Sunset Photography, by Chrstina
Gadgets & Technology, by Christina
Exotic Cars, by Naveed Iqbal

الأحد، 5 أكتوبر 2014

اضافة تاثير الدوران الى الصور الخاص بمدونتك باستخدام خاصية Transforms

السلام عليكم أعزائي زوار مدونتي,اليوم سنتعلم اضافة تاثير الدوران على الصور  بواسطة الCSS3
بكل صراحة خلق تاثير على الصورة هو امر بسيط جداً خاصة بعض ظهور الCSS3 ورغم ذلك  سأقوم بطرح خاصية من خصائص الCSS3 الا وهي transform مع الدالة  ()rotate.
قمت بشرح موضوع ال Transforms في تدوينات سابقة
الدالة ()rotate تجعل العنصر يدور باتجه عقارب الساعة حسب الزاوية المعطى له ,كما يمكن لهذه الدالة ادارة العنصر عكس اتجاه الساعة اذا كانت قيمة الزاوية سالبة.
سنقوم باضافة دوران للصور بمقدار 5 درجات مئوية 
قوم بتحرير قالبك>>ابحث(CTRL+F) عن الوسم التالي ]]></b:skin> والصق كود الCSS التالي فوقه مباشرة

 img.foto {
  background-color:#ffffff;
  border:0px;
  outline:none;
  padding:5px 5px 20px;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.7);
  box-shadow:0 1px 3px rgba(0,0,0,0.7);
}

img.foto:hover {
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  -ms-transform:rotate(5deg);
  -o-transform:rotate(5deg);
  transform:rotate(5deg);
}
قم بحفظ القالب واذهب لتحرير مشاركة جديدة لتجريب الدوران على الصور >> في محرر HTML قم بلصق احد الاكواد الاتية
الصورة تحتوي على رابط
 <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-IMG"><img class="foto" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 240px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2NwDfJEBp9JeWshr2zyhboIuJQvpfohvKd-dVI2GlYpINy68hy0tqPSv35y5BcC2SGE3Ioc2PHBLvJNgycTGd5eFTUAjGx58bPPyZW2jt0nWiRiBkh00eni1WY1VLjO-m-QpuZxhBHk/s1600/b81a7ed66e3.jpg" alt="" id="BLOGGER_PHOTO_ID_5636537814866564146" border="0" /></a>
الصورة بدون رابط
 <img alt="" class="foto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2NwDfJEBp9JeWshr2zyhboIuJQvpfohvKd-dVI2GlYpINy68hy0tqPSv35y5BcC2SGE3Ioc2PHBLvJNgycTGd5eFTUAjGx58bPPyZW2jt0nWiRiBkh00eni1WY1VLjO-m-QpuZxhBHk/s1600/b81a7ed66e3.jpg" height="640" width="581" /></div>
لو اردت ان تضيف هذا التاثير لكافة صور مدونتك قم بالبحث(CTRL+F) عن الوسم التالي ]]></b:skin> والصق كود الCSS التالي فوقه مباشرة

 img {
  background-color:#ffffff;
  border:0px;
  outline:none;
  padding:5px 5px 20px;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.7);
  box-shadow:0 1px 3px rgba(0,0,0,0.7);
}

img:hover {
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  -ms-transform:rotate(5deg);
  -o-transform:rotate(5deg);
  transform:rotate(5deg);
}
الى هنا اترككم فر رعاية الله وحفظه, يمكنكم الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد .

السبت، 4 أكتوبر 2014

قائمة مزدوجة بشكل راقي مصممة بواسطة الCSS

السلام عليكم وعيدكم مبارك ,اليوم سنطرح قائمة مزدوجة بشكل راقي مصممة بواسطة الCSS
قائمة مزدوجة بشكل راقي مصممة بواسطة الcss
لاضافة القائمة نقوم بالذهاب الى القالب ثم تحرير HTML ثم البحث(CTRL+F) عن الوسم التالي ]]></b:skin> والصق كود الCSS التالي فوقه مباشرة

 #navbar-iframe {   height:0px;   visibility:hidden;   display:none   }
body {
background: #ddd;
color: #333;
font-family: Verdana, arial;
font-size: 12px;
margin: 0 auto 0;
padding: 0;
}

#Main-Menu {
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDjF9SLs0KcTJhVv2xRFrSxmAkcv70pIybNV4_KcBbcHb4B0GUo90rwPSDT02K0MctjAD1pVT9avSJ9arcrz3_YXvMdveeAdnAKP6zNjFytuUA7lSTYlPX6e0kDgCMRd_j_v3h9zR4RD5/s1600/Menu_bg-op.png) no-repeat;
width : 1018px;
height : 70px;
margin : 0 auto;
padding : 0px 0px 0px 0px;
}
#Main-nav {
margin : 0px 0px 10px 15px;
padding : 10px;
}
#Main-nav ul {
float: right;
list-style: none;
margin: 10px auto;
padding: 0;
}
#Main-nav li {
list-style: none;
margin: 17px -10px 0px 0px;
padding: 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiGMvX63WWFROPmJ9cL5OQ3oZfHIv-oebcyKCMBXNMoEJ0DQoGDfmAPoSF2WUBiIhqQEOYjSjthORDsbYOXd_mDK3iwxgeGlXx6f8VjHNpvVZrwK8lkkN7QZu9xZfucMOnEpIxfQtl2X_A/s400/menu_button_grey.png) no-repeat;
width:169px;
height:42px;
float:right;
}
#Main-nav li:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtawr1Lc4r5M2aydCUFd3AhbTybXa1g5c7IMjI2p1qJB4g7T3i5lJXPMxYB2s9FmuYwpTs8N9M1zTx4Jbh9L2Jl5GzA_HFraP4Xe1Kz_S35cbTQFFzoYrcJafuQ6C9uybjXdtHdzxmgfzG/s400/menu_button_white.png) 0px 0px no-repeat;
}
#Main-nav li.highlight {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtawr1Lc4r5M2aydCUFd3AhbTybXa1g5c7IMjI2p1qJB4g7T3i5lJXPMxYB2s9FmuYwpTs8N9M1zTx4Jbh9L2Jl5GzA_HFraP4Xe1Kz_S35cbTQFFzoYrcJafuQ6C9uybjXdtHdzxmgfzG/s400/menu_button_white.png) 0px 0px no-repeat;
}
#Main-nav li.highlight a {
color: rgb(51, 51, 51) !important;
text-shadow: 1px 2px 1px #9E9E9E !important;
font-size: 12px !important;
font-family: arial;
font-weight: bold;
text-transform: none;
}
#Main-nav li a{
color: #FFF;
display: block;
font-size: 12px;
font-family:arial;
font-weight: bold;
text-transform: none;
margin: 0;
padding: 15px 0px 9px 60px;
text-decoration: none;
text-shadow:1px 1px 3px #333;
letter-spacing:0.09em;
}
#Main-nav li a:hover {
color: #333;
text-shadow:1px 2px 1px #9E9E9E;
}
#home-icon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM65DQSiLT7x_lrcTtizyj0-p3ronbSZRrtjaht3jFPLjNN1oRi9UdNV6n_YDiffEHar9yBFmFp9Ztz9fZhDcr-tWI3eLlj7qe4MbheWzhY2TxXA-J4LkVrCTvZ3-iGSmno8K-m7lac8Ka/s400/home_ico.png) no-repeat 30px 14px;
}
#mm-icon{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioM0KOBYZ_5kIiCHFggwfltbRV_oeXCXFpURkEgzZ2B1Ystuzh4CuF0YZzELbLhdnA8SWuljCsKXHimvhibaKUaRK2gWn-KoT9VNJSxlYqOjFkZJ4bz7BT2gUgEl34tnGqfaUnOayqom1p/s400/make_money_ico.png") no-repeat 30px 14px;
}
#seo-icon{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOO8F6RUIE90r_dc7Iw64KxCS0SK2ux39ECr1h1mvU_PHRQhh_Cj1fwPRZdTl8udx3pY6JfCzhpyzmtXe8iqSXJZcZ31jPVqHQiPiLMU5e4jNUaD3RFGQ6ckA-zUC9ZKxC9JS1AubARR_H/s400/SEO_ico.png") no-repeat  30px 14px;
}
#hosting-icon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTYmJbpz65Nhd81oMRGu3iXJOlzQ-vkm_1srdaHSLA5E4TUo4bVTu5dMdALpCiFk1pr7ov7rEEW8UOQG4TuKZwnNHDLZqp5mwRyA4sJzXNqmTxfcaLe-vXYZZjhQkig4ifZwHj1s9oOCpJ/s400/web_hosting_ico.png) no-repeat  30px 14px;
}
#blogging-icon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw2YYyTBHOqvctiNgDja6P4HFwga7O_5ycekZYSOSi14-ewUHQgQn6MmBguqyWuDSdFPPWtSGPWQZrIK9AB7GAIJifNVboYQsdYJ_5zbfryx7K3cxZjugidT1UwirEXEPNisc9RKw1GHK0/s400/blogging_ico.png) no-repeat  30px 14px;
}
#widgets-icon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLyIZXNS-B443IW1CJCqQXXpqtY3v3RN7cHChOx2NRGnNy9QftNZExlVeamYDiByhub5wNjBje3G9_yQRPvy_tXVJ3T8dvI-58hfkSXqbeYZfTlwmE8BMyONLQ9u232274foKi_NbQDMJ2/s400/templates_ico.png) no-repeat  30px 14px;
}
/*-----SECONDARY MENU-----*/
#secondary-Menu {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-8Chj_HljDrFQaLYf-Aa8P0d3p_p65dC7ekz2Ew4ii_yWgNFa6kJ1G1Aty-QO1-yCWWYy6Q-PhwVqU9hUiYJZy0wtJ6_6AZz8FzPxoSsWlcSInBRZemjfhOhWhOHExONs_vu4TUAtORO/s1600/Sub_menu_bg-optimized2.png") no-repeat scroll 0% 0% transparent;
width: 1015px;
height: 128px;
margin: 0px auto;
padding: 0px 0px 0px 17px;
position: relative;
right: 0px;
}
#secondary-nav {
margin: 10px auto;
padding: 0px;
}
#secondary-nav ul {
float: right;
list-style: none;
margin: 5px auto;
padding: 0;
}
#secondary-nav li {
list-style : none;
margin : 5px 0px 0px 0px;
padding : 0;
float : right;
}
#secondary-nav li a, #secondary-nav li a:link {
color: #B8B8B8;
display: block;
font-size: 12px; font-family:arial;
font-weight: bold;
text-transform: none;
margin: 0 0 0 20px;
padding: 0px 0px 17px 20px;
text-decoration: none;
text-shadow:1px 1px 3px #333;
}
#secondary-nav li a:hover {
color: #ddd;
text-shadow:1px 2px 1px #000;
}
#secondary-nav li ul {
position: absolute;
right: -999em;
width: 190px;
margin: 0 0 0 0px;
padding: 0;  z-index:99999; display:block;
}
#secondary-nav li:hover ul {
right: auto;
}
#secondary-nav li li {
margin:0px;
padding:0px;
border-bottom:1px dotted #3B3D3E;
background: #242729;
width: 190px;
}
#secondary-nav li li:hover {
background: #343637;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#secondary-nav li li a {
color: #B8B8B8;
display: block;
margin: 0;
padding: 7px 0px !important;
text-decoration: none;
}
#secondary-nav li li a:hover {
color: #FFF;
text-decoration: none;
}
الان لاضافة اكواد الHTML نذهب الى التخطيط ثم اضافة أداة ثم HTML/JavaScript
ثم نقوم بلصق كود الHTML التالي ونغير المسميات كما نشاء ونغير الروابط بما نشاء

 /*-----القائمة الرئيسية-----*/
<div id="Main-Menu">
<ul id="Main-nav">
<li><a href="#" id="home-icon">  الرئيسية</a></li>
<li><a href="#" id="mm-icon">الربح من الانترنت</a></li>
<li><a href="#" id="seo-icon">سيو</a></li>
<li><a href="#" id="hosting-icon">خدع</a></li>
<li><a href="#" id='blogging-icon'>بلوجر</a></li>
<li><a href="#" id="widgets-icon">اضافات</a></li>
</ul>
</div>
/*-----القائمة السفلية-----*/
<div id="secondary-Menu">
<div style="float:right; margin-right:40px;">
<ul id="secondary-nav">
<li><a href="#">خدمات</a></li>
<li><a href="#">تحميلات</a>
</li>
<li><a href="#">قوالب</a></li>
<li>
<a href="#">اسئلة شائعة</a>
</li>
<li>
<a href="#">نبذة عني</a>
</li>
<li>
<a href="#">تواصل معي</a>
</li>
<li><a href="#">أعلن لدينا</a>
</li>
<li><a href="#">«أدوات</a>
<ul>
    /*-----القائمة الفرعية من القائمة السفلية-----*/
<li><a href="#">HTML محرر</a></li>
<li><a href="#">تشفير الاكواد</a></li>
<li><a href="#">محرر الالوان</a></li>
</ul>
</li>
</ul>
</div>
<div style="float:left; margin-right:40px;">
   <ul>
    <li><a id='munuswe' href="http://sweup.com">«احصل عليها</a></li>
    </ul>
    </div>
     <script src='https://mununon.googlecode.com/svn/munu.js' type='text/javascript'/>
</div>
اقترح علي المهندس محمد جلال ان اقوم بعرض القائمة بالوان مختلفة ولكني سأقوم بتعليمكم الطريقة بالصور فهذا أفضل 
1-نضع مؤشر الفاراة على المكان المراد تغير لونه في القائمة ثم نضغط على الزر الايسر للفاراة ثم نقوم بالضغط على فحص العنصر
تغيير الوان العناصر في مدونتي
 2-ستظهر لنا أكواد HTML الخاصة بالقائمة على الجانب الايسر من الصندوق وفي المقابل اكواد الCSS في الجانب الايمن يمكننا من خلال اكواد الcss تغير لون خلفية العنصر وقد تكون الخلفية عبارة عن لون بصيغة HEXA او Rgp او تكون عبارة عن صورة كما هو الحال في مثالنا
تغيير الوان العناصر في مدونتي
يمكنكم تركيب القائمة على مدوناتكم وعرضها علينا كما يمكنكم تغير الوان واشكال قوائمكم لتكون مميزة
الى هنا اترككم فر رعاية الله وحفظه, يمكنكم الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد .

الخميس، 2 أكتوبر 2014

السلام عليكم أعزائي ,سنقوم باضافة تاثيرات الارتجاج على الصورة عند مرور مؤشر الفأراة عليها بواسطة الجافا سكربت
ابحث(CTRL+F) عن الوسم التالي </body> وقم بلصق الكود التالي فوقه مباشرة
  
 <script type="text/javascript">
var rector=8
var stopit=0 
var a=1

function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}

function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"
}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",10)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
document.write('<style>.gambargetar{position:relative;}</style>')
</script>
ثم قم بحفظ القالب.
للاستخدام داخل مشاركاتك قم بفتح محرر HTML واستخد احد التاثيرين الاتيين
تاثير الارتجاج ببطء
 <img class="gambargetar" src="URL IMAGE" onclick="top.focus()" onmouseout="stoprattle(this);top.focus()" onmouseover="init(this);rattleimage()" />

تاثير الارتجاج بسرعة 
 <img class="gambargetar" src="URL IMAGE" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()" />
قم باستبدال URL IMAGE برابط الصورة المراد تطبيق التاثير عليها.
كل عام وأنتم بخير

الاثنين، 29 سبتمبر 2014


هناك العديد من الطرق لعرض الكود الخاص بصفحة الويب لديك جرب الضغط على زر الفاراة الايسر واضغط عرض مصدر الصفحة (view page source) او بشكل مختصر من على لوحة المفاتيح اظغط (CTRL+U).
ستلاحظ ان كود القالب الخاص بك سيعرض امامك!! لكن قد يتضايق الكثيرون خاص مصممي تلك الصفحات من الكشف عن كودهم الذي سهروا الليالي على انشاءه , يأتي السؤال ما الحل لمنع ظهور مصدر الصفحة الخاصة بنا.
دائما لدينا الحل فقط اتبع الخطوات التالية, سنقوم بمنع اي شخص من عرض الكود بواسطة لوحة المفاتيح(CTRL+U) وسيتم توجيه اي شخص يحاول عرض مصدر الصفحة الى صفحة خطأ
 اولا سجل في بلوجر ثم قم بتحرير قالبك وابحث عن الوسم التالي </body> وقم بوضع الكود التالي فوقه مباشرة

 <script type='text/javascript'>
//<![CDATA[
shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:"keydown",propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(var e in d)"undefined"==typeof c[e]&&(c[e]=d[e]);else c=d;d=c.target,"string"==typeof c.target&&(d=document.getElementById(c.target)),a=a.toLowerCase(),e=function(d){d=d||window.event;if(c.disable_in_input){var e;d.target?e=d.target:d.srcElement&&(e=d.srcElement),3==e.nodeType&&(e=e.parentNode);if("INPUT"==e.tagName||"TEXTAREA"==e.tagName)return}d.keyCode?code=d.keyCode:d.which&&(code=d.which),e=String.fromCharCode(code).toLowerCase(),188==code&&(e=","),190==code&&(e=".");var f=a.split("+"),g=0,h={"`":"~",1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")","-":"_","=":"+",";":":","'":'"',",":"<",".":">","/":"?","\\":"|"},i={esc:27,escape:27,tab:9,space:32,"return":13,enter:13,backspace:8,scrolllock:145,scroll_lock:145,scroll:145,capslock:20,caps_lock:20,caps:20,numlock:144,num_lock:144,num:144,pause:19,"break":19,insert:45,home:36,"delete":46,end:35,pageup:33,page_up:33,pu:33,pagedown:34,page_down:34,pd:34,left:37,up:38,right:39,down:40,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123},j=!1,l=!1,m=!1,n=!1,o=!1,p=!1,q=!1,r=!1;d.ctrlKey&&(n=!0),d.shiftKey&&(l=!0),d.altKey&&(p=!0),d.metaKey&&(r=!0);for(var s=0;k=f[s],s<f.length;s++)"ctrl"==k||"control"==k?(g++,m=!0):"shift"==k?(g++,j=!0):"alt"==k?(g++,o=!0):"meta"==k?(g++,q=!0):1<k.length?i[k]==code&&g++:c.keycode?c.keycode==code&&g++:e==k?g++:h[e]&&d.shiftKey&&(e=h[e],e==k&&g++);if(g==f.length&&n==m&&l==j&&p==o&&r==q&&(b(d),!c.propagate))return d.cancelBubble=!0,d.returnValue=!1,d.stopPropagation&&(d.stopPropagation(),d.preventDefault()),!1},this.all_shortcuts[a]={callback:e,target:d,event:c.type},d.addEventListener?d.addEventListener(c.type,e,!1):d.attachEvent?d.attachEvent("on"+c.type,e):d["on"+c.type]=e},remove:function(a){var a=a.toLowerCase(),b=this.all_shortcuts[a];delete this.all_shortcuts[a];if(b){var a=b.event,c=b.target,b=b.callback;c.detachEvent?c.detachEvent("on"+a,b):c.removeEventListener?c.removeEventListener(a,b,!1):c["on"+a]=!1}}},shortcut.add("Ctrl+U",function(){top.location.href="http://www.sweup.com/sl"});
//]]>
</script>
ملاحظة /
الاضافة تعمل فقط مع طريقة عرض المصدر عن طريق لوحة المفاتيح يمكن اضافة كود لمنع استخدام زر الفأراة الايسر اذا كان هذا الخيار يناسبك
قم بحفظ القالب وقم بالتجريب ,يمكنكم الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد . 

الأربعاء، 24 سبتمبر 2014

التحكم في (عرض / إخفاء) اضافات بلوجر حسب رغبتك


صراحة كنت محتار اليوم عن ماذا سأقدم لكم ,فالخيارات كانت متعددة لكني قررت أن اطرح هذا الدرس التعليمي عن طريقة التحكم في اظهار واخفاء اضافات بلوجر حسب رغبتك فلو كنت تتعامل مع وردبرس او جوملا فأن هذا الامر اعتيادي لكن لم نعهد هذا على منصة بلوجر ,سيكون الشرح بسيط تابعوا معي .

كيفية اظهار الاضافات فقط في الصفحة الرئيسية

بكل بساطةما عليك الا وضع اكواد الHTML/JavaScript الخاص بالاضافة داخل الوسم التالي
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
هنا HTML/JavaScript أكواد 
</b:if>

كيفية اخفاء الاضافات من الصفحة الرئيسية

بكل بساطةما عليك الا وضع اكواد الHTML/JavaScript الخاص بالاضافة داخل الوسم التالي
  <b:if cond='data:blog.pageType == "item"'>
هنا HTML/JavaScript أكواد 
</b:if>

كيفية اظهار الاضافات على الصفحة الرئيسية

 <b:if cond='data:blog.pageType != "item"'> 
هنا HTML/JavaScript أكواد 
</b:if>

كيفيةاظهار الاضافات فقط في الصفحات الثابتة

لعرض الاضافات فقط في الصفحات الثابتة بكل بساطةما عليك الا وضع اكواد الHTML/JavaScript الخاص بالاضافة داخل الوسم التالي
 <b:if cond='data:blog.pageType == "static_page"'>
هنا HTML/JavaScript أكواد 
</b:if>

كيفية اخفاء الاضافات من الصفحات الثابتة

 <b:if cond='data:blog.pageType != "static_page"'>
هنا HTML/JavaScript أكواد 
</b:if>

كيفية اظهار الاضافات في منشور واحد فقط

لعرض الاضافات في منشور واحد فقط بكل بساطةما عليك الا وضع اكواد الHTML/JavaScript الخاص بالاضافة داخل الوسم التالي وتغير URL الى رابط المنشور في مدونتك

 <b:if cond='data:blog.url == "URL"'>
هنا HTML/JavaScript أكواد 
</b:if>

كيفية اخفاء الاضافات من منشور واحد فقط


 <b:if cond='data:blog.url != "URL"'>
هنا HTML/JavaScript أكواد 
</b:if>

كيفية اضهار الاضافات في صفحة الارشيف

 <b:if cond='data:blog.pageType == "archive"'>
هنا HTML/JavaScript أكواد 
</b:if>

 أتمنى ان يكون الموضوع مفيد بالنسبة لكم ,للحصول على المزيد يمكنك الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد

الاثنين، 22 سبتمبر 2014

صنع محول أكواد للالوان بنظام Hexa داخل مدونتك

سنضيف اضافة جميلة لمدونتك لتجعل مدونتك مميزة دوماً وهي محرر الألوان للحصول على أكود اﻷلوان بنظام Hexa بدون الحاجة لتضمين موقع داخل مدونتك !!
صنع محول أكواد للالوان بنظام Hexa داخل مدونتك
لاضافة المحول داخل مدونتك
1-البحث(CTRL+F) عن الوسم </head> ونلصق الكود التالي فوقه مباشرة 

 /**
 * http://www.sweup.com
 */
function colorLuminance(hex, lum) {
    // Validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, "");
    if (hex.length < 6) {
        hex = hex.replace(/(.)/g, '$1$1');
    }
    lum = lum || 0;
    // Convert to decimal and change luminosity
    var rgb = "#",
        c;
    for (var i = 0; i < 3; ++i) {
        c = parseInt(hex.substr(i * 2, 2), 16);
        c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
        rgb += ("00" + c).substr(c.length);
    }
    return rgb;
}
function rangeSlider(e,d){var k=document.documentElement,l=document.createElement("div"),a=document.createElement("span"),p=false,q,j,c,h;var f={value:0,vertical:false,rangeClass:"",draggerClass:"",drag:function(i){}};for(var g in f){if(typeof d[g]=="undefined"){d[g]=f[g]}}function m(r,s,i){if(r.addEventListener){r.addEventListener(s,i,false)}else{if(r.attachEvent){r.attachEvent("on"+s,i)}else{r["on"+s]=i}}}var o=d.vertical;e.className=(e.className+" range-slider "+(o?"range-slider-vertical":"range-slider-horizontal")).replace(/^ +/,"");l.className=("range-slider-track "+d.rangeClass).replace(/ +$/,"");a.className=("dragger "+d.draggerClass).replace(/ +$/,"");m(l,"mousedown",function(i){k.className=(k.className+" no-select").replace(/^ +/,"");q=l[!o?"offsetWidth":"offsetHeight"];j=l[!o?"offsetLeft":"offsetTop"];c=a[!o?"offsetWidth":"offsetHeight"];p=true;n(i);return false});m(document,"mousemove",function(i){n(i)});m(document,"mouseup",function(i){k.className=k.className.replace(/(^| )no-select( |$)/g,"");p=false});m(window,"resize",function(r){var i=a[!o?"offsetWidth":"offsetHeight"];a.style[!o?"left":"top"]=(((h/100)*l[!o?"offsetWidth":"offsetHeight"])-(i/2))+"px";p=false});function n(i){i=i||window.event;var r=!o?i.pageX:i.pageY;if(!r){r=!o?i.clientX+document.body.scrollLeft+document.documentElement.scrollLeft:i.clientY+document.body.scrollTop+document.documentElement.scrollTop}if(p&&r>=j&&r<=(j+q)){a.style[!o?"left":"top"]=(r-j-(c/2))+"px";h=Math.round(((r-j)/q)*100);d.drag(h)}}function b(){var i=a[!o?"offsetWidth":"offsetHeight"];h=((d.value/100)*l[!o?"offsetWidth":"offsetHeight"]);a.style[!o?"left":"top"]=(h-(i/2))+"px";d.drag(d.value)}l.appendChild(a);e.appendChild(l);b()};

var slider = document.getElementById('range-slider'),
    color = document.getElementById('hex-color-input'),
    preview = document.getElementById('preview-area');
rangeSlider(slider, {
    drag: function (v) {
        var lighter = colorLuminance(color.value, (v * 0.01)),
            darker = colorLuminance(color.value, -(v * 0.01));
        // Lighter...
        preview.children[0].style.backgroundColor = lighter;
        // Darker...
        preview.children[1].style.backgroundColor = darker;
        // Preview...
        preview.children[0].innerHTML = '<span>&uarr; ' + v + '% = ' + lighter + '</span>';
        preview.children[1].innerHTML = '<span>&darr; ' + v + '% = ' + darker + '<span>';
    }
});
2-نبحث(CTRL+F) عن الوسم ]]></b:skin> ونلصق الكود التالي فوقه مباشرة

 body {
    background-color:white;
    color:black;
    padding:30px;
}
#preview-area {
    height:100px;
    overflow:hidden;
}
#preview-area div {
    float:left;
    width:50%;
    height:inherit;
}
#preview-area div span {
    display:block;
    background-color:white;
}
p {
    display:block;
    margin:1em 0;
}
.range-slider {margin:0 auto 1em}
.range-slider-track {
  width:auto;
  height:20px;
  margin:0 auto;
  position:relative;
  cursor:e-resize;
}
.range-slider-track:before {
  content:"";
  display:block;
  position:absolute;
  top:9px;
  left:0;
  width:100%;
  height:2px;
  background-color:black;
}
.range-slider-track .dragger {
  display:block;
  width:10px;
  height:inherit;
  position:relative;
  z-index:2;
  background-color:red;
  cursor:inherit;
  /* opacity:.6; */
}
.range-slider-vertical {
  display:inline-block;
  vertical-align:middle;
  margin:0 1em 1em 0;
}
.range-slider-vertical .range-slider-track {
  cursor:n-resize;
  width:20px;
  height:100px;
}
.range-slider-vertical .range-slider-track:before {
  top:0;
  right:auto;
  left:9px;
  width:2px;
  height:100%;
}
.range-slider-vertical .range-slider-track .dragger {
  width:inherit;
  height:10px;
}
.no-select {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
3- نحفظ القالب ومبارك عليك
يمكنك تضمين محرر اﻷلوان في صفحة مستقلة او داخل مشاركاتك عبر محرر HTML باستخدام كود HTML التالي

 <div id="preview-area">
    <div></div>
    <div></div>
</div>
<p>Input:
    <input type="text" id="hex-color-input" value="#398" placeholder="#000000" />
</p>
<div id="range-slider"></div>
<div id="itempager" style="position:relative;"><a title="Variasi Blogger" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:35px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://sweup.com" target="_blank">&#9658;احصل عليها</a>
</div> 
معاينة حية  أدخل 6 خانات من الارقم والاحرف التالية (0,1,2,3,4,5,6,7,8,9,A,B,C,D,F,) وحرك السلايدر باللون اﻷحمر يسار ويمين لتحصل على درجات اللون الى هنا ينتهي درسنا وللحصول على جديدنا يمكنك الانضمام للمدونة من هنا واي مشاكل تواجهها يمكنك ترك تعليق أسفل التدوينة

الأحد، 21 سبتمبر 2014

انشاء فهرس تدوينات خاص بمدونتك بشكل مميز جداً-site map

يمكنك المعاينة من هنا
لاضافة الفهرس لمدونتك اتبع الخطوات التالية
1-سجل الدخول لقالبك 
2-الصفحات ثم انشاء صفحة جديدة وانسخ الكود التالي في محرر HTML

 <div dir="rtl" style="text-align: right;" trbidi="on">
<style type="text/css">
#resultDesc {
    margin:0 30px;
    padding:0 0;
    border-bottom:4px solid #31353e;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#D64D52;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 30px;
    padding:0 0;
    overflow:hidden;
    position:relative;
    border:1px solid #3d464f;
    border-top:none;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
    content:"";
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    background-color:#3d464f;
}
#feedContainer li {
    list-style:none;
    margin:0 0;
    padding:0 0;
    border-top:1px solid #3d464f;
    color:#999;
    width:50%;
    float:left;
    display:inline;
}
#feedContainer li .inner {
    margin:15px 16px;
    height:120px;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#5687B8;
}
#feedContainer li a:hover {
    text-decoration:none;
    color:#eee;
}
#feedContainer li a.toc-title {
    font-weight:bold;
    font-size:12px;
    margin:0 0;
}
#feedContainer li .news-text {
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:4px 4px;
    background-color:#222;
    border:1px solid #111;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 0 #444;
    -moz-box-shadow:0 1px 0 #444;
    box-shadow:0 1px 0 #444;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
    background-color:#111;
    padding:0 0;
    color:#999;
    text-decoration:none;
    display:block;
}
#feedNav a:hover, #feedNav a:active {
    background-color:black;
    color:white;
    border:none !important;
}
#feedNav span {
    cursor:wait
}
#table-outer {
    padding:7px 10px;
    margin:30px 30px 0;
}
#table-outer input {
    display:inline-block;
    vertical-align:top;
    margin:0 2px 0 0;
    padding:0 0;
}
#table-outer table {
    border:none
}
#table-outer td {
    padding:2px 2px;
    border:none;
}
#table-outer label {
    font-weight:bold;
    color:#999;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
    display:block;
    text-align:right;
    margin:0 10px 0 0;
}
#table-outer select[disabled] {
    opacity:.4
}
#postSearcher {
    display:block;
    margin:0 0;
    padding:0 0;
}
#postSearcher input, #table-outer select {
    width:180px;
    background-color:#111;
    border:none;
    display:block;
    margin:0 0;
    padding:5px 5px;
    font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
    text-transform:uppercase;
    color:#777;
    outline:none;
    -webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    -moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
    width:170px;
    padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
    background-color:#090909
}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
 url: "http://swe-up.blogspot.com/",
 feedNum: 5,
 labelName: false,
 numChars: 100,
 thumbWidth: 40,
 navText: "المزيد &#9660;",
 frontText: "الى أعلى &uArr;",
 resetToc: "Reset",
 noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVuJGQuhDMoIHsb_7XkslmeeeFV8cZNtL-lK1hKE3A_Pf1TBaXeq2IhqO5H8LsaJxQ0cvsrdAB4-qOsEXwVSa-Ajc7Q8ZVl6-rCaLe9i1pLdHxofVs1OO-xg4IFUDCoOrJ_0OTAm8bH_Y/s1600/no+images+Variasi+Blogger.jpeg",
 loading: "<span>تحميل...</span>",
 searching: "<span>تحميل...</span>",
 noResult: "غير موجود !!"
};
//]]>
</script>

<br />
<div id="table-outer">
&nbsp; <br />
<table border="1" style="text-align: left;">
        <tbody>
<tr>
                <td><label for="orderFeedBy">تصنيف المشاركات:</label>
                </td>
                <td><select id="orderFeedBy">
                        <option selected="" value="published">التدوينات الجديدة</option>
                        <option value="updated">التدوينات المحذتة</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="labelSorterSelect">تصنيف المشاركات حسب الاقسام:</label>
                </td>
                <td><span id="labelSorter"><select disabled="" id="labelSorterSelect"><option selected="">تحميل...</option></select></span>
                </td>
            </tr>
<tr>
                <td><label for="feed-q-box">البحث المباشر:</label>
                </td>
                <td><form id="postSearcher">
<input id="feed-q-box" type="text" />
                    </form>
</td>
            </tr>
</tbody>
    </table>
</div>
<div style="text-align: left;">
<br /></div>
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
</div>
<script  type="text/javascript">

// This is the container template that will be used to insert post template, pagination and the posts count
document.write('<div id="itempager" style="position:relative;"><a title="Variasi Blogger" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:35px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://sweup.com" target="_blank">&#9658;احصل عليها</a></div>');

function getID(a) {
 return document.getElementById(a);
}

var head = document.getElementsByTagName('head')[0],
 tocContainer = getID('feedContainer'),
 feedNav = getID('feedNav'),
 orderByer = getID('orderFeedBy'),
 labelSorter = getID('labelSorter'),
 input = getID('postSearcher').getElementsByTagName('input')[0],
 resultDesc = getID('resultDesc'),
 nextPage, feedArchive, startPage = 0, filter = 0;

function showLabels(json) {
 var cat = json.feed.category, skeleton = "<select id='labelSorter' onchange='changeSort(this.value);'><option value='' selected disabled>الأقسام...</option>";
 for (var i = 0, cen = cat.length; i < cen; i++) {
  skeleton += "<option value='" + decodeURIComponent(cat[i].term) + "'>" + cat[i].term.toUpperCase() + "</option>";
 }
 skeleton += "</select>";
 labelSorter.innerHTML = skeleton;
}

function showFeedList(json) {
 var entries = json.feed.entry, postTitle, postUrl, postImage, postContent, commentNum, skeleton = "";
 if (json.feed.entry) {
  for (var i = 0; i < tocConfig.feedNum; i++) {
   if (i == json.feed.entry.length) {
    break;
   }
   postTitle = entries[i].title.$t;
   for (var j = 0, jen = entries[i].link.length; j < jen; j++) {
    if (entries[i].link[j].rel == 'alternate') {
     postUrl = entries[i].link[j].href;
     break;
    }
   }
   for (var k = 0, ken = json.feed.link.length; k < ken; k++) {
    if (json.feed.link[k].rel == 'next') {
     nextPage = json.feed.link[k].href;
    }
   }
   for (var l = 0, len = entries[i].link.length; l < len; l++) {
    if (entries[i].link[l].rel == 'replies' && entries[i].link[l].type == 'text/html') {
     commentNum = entries[i].link[l].title;
     break;
    }
   }
   postContent = ("summary" in entries[i]) ? entries[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,tocConfig.numChars) : "";
   postImage = ("media$thumbnail" in entries[i]) ? entries[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "\/s" + tocConfig.thumbWidth + "-c") : tocConfig.noImage.replace(/\/s[0-9]+\-c/, "\/s" + tocConfig.thumbWidth + "-c");
   skeleton += "<li><div class='inner'>" +
   "<a href='" + postUrl + "' target='_blank'><img style='width:" + tocConfig.thumbWidth + "px;height:" + tocConfig.thumbWidth + "px;' src='" + postImage + "' alt='" + postTitle + "' /></a>" +
   "<a class='toc-title' href='" + postUrl + "' target='_blank'>" + postTitle + "</a><strong> - (" + commentNum + ")</strong><br>" +
   "<div class='news-text'>" + postContent + "&hellip;<br style='clear:both;'></div>" +
   "</div></li>";
  }
  resultDesc.innerHTML = (input.value !== '' && filter == 'search') ? "<span>Hasil penelusuran untuk kata kunci <strong>&#8220;" + input.value + "&#8221;</strong> (" + json.feed.openSearch$totalResults.$t + " Temuan)</span>" : "Total: " + json.feed.openSearch$totalResults.$t + " Artikel";;
  feedContainer.innerHTML += (nextPage) ? skeleton : "";
  if (nextPage && filter != 'search') {
   skeleton = (filter !== 0) ? "<a href='javascript:initResult(2);' class='next'>" + tocConfig.navText + "</a>" : "<a href='javascript:initResult(1);' class='next'>" + tocConfig.navText + "</a>";
  } else {
   skeleton = "<a href='#top' class='front'>" + tocConfig.frontText + "</a>";
  }
  feedNav.innerHTML = skeleton;
  input.value = '';
  labelSorter.getElementsByTagName('select')[0].removeAttribute('disabled');
  orderByer.removeAttribute('disabled');
 } else {
  if (filter == 'search') {
   feedContainer.innerHTML = "";
   resultDesc.innerHTML = "";
   alert(tocConfig.noResult);
  }
  feedNav.innerHTML = "<a href='#top' class='front'>" + tocConfig.frontText + "</a>";
 }
}

function initResult(archive) {
 var p, param;
 if (archive == 1) {
  p = nextPage.indexOf("?");
  param = nextPage.substring(p);
 } else if (archive == 2) {
  p = nextPage.indexOf("?");
  param = nextPage.substring(p).replace(/\?/, '/-/' + filter + '?');
 } else {
  param = "?start-index=1&max-results=" + tocConfig.feedNum + "&orderby=" + orderByer.value + "&alt=json-in-script";
 }
 param += "&callback=showFeedList";
 updateScript(param);
}

function removeScript() {
 var old = getID('temporer-script');
 old.parentNode.removeChild(old);
}

function buildLabels() {
 var s = document.createElement('script');
  s.type = "text/javascript";
  s.src = tocConfig.url + "/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels";
 head.appendChild(s);
}

function updateScript(tail) {
 if (startPage == 1) {
  removeScript();
  startPage = 1;
 }
 feedNav.innerHTML = tocConfig.loading;
 feedArchive = (tocConfig.labelName !== false) ? tocConfig.url + "/feeds/posts/summary/-/" + tocConfig.labelName + tail : feedArchive = tocConfig.url + "/feeds/posts/summary" + tail;
 var toc_script = document.createElement('script');
  toc_script.type = 'text/javascript';
  toc_script.src = feedArchive;
  toc_script.id = 'temporer-script';
 head.appendChild(toc_script);
}

function changeSort(label) {
 removeScript();
 tocContainer.innerHTML = "";
 resultDesc.innerHTML = "Menghitung artikel&hellip;";
 feedNav.innerHTML = tocConfig.loading;
 var newScript = document.createElement('script'),
  labSorter = labelSorter.getElementsByTagName('select')[0],
  l = (label !== 0) ? '/-/' + label : "";
 newScript.type = 'text/javascript';
 newScript.id = 'temporer-script';
 newScript.src = tocConfig.url + '/feeds/posts/summary' + l + '?alt=json-in-script&max-results=' + tocConfig.feedNum + '&orderby=' + orderByer.value + '&callback=showFeedList';
 head.appendChild(newScript);
 labSorter.disabled = true;
 orderByer.disabled = true;
 filter = label;
}

function searchPost() {
 removeScript();
 tocContainer.innerHTML = "";
 resultDesc.innerHTML = "";
 feedNav.innerHTML = tocConfig.searching;
 var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.id = 'temporer-script';
  newScript.src = tocConfig.url + '/feeds/posts/summary?alt=json-in-script&orderby=published&q=' + input.value + '&max-results=9999&callback=showFeedList';
 head.appendChild(newScript);
 filter = 'search';
 return false;
}

getID('postSearcher').onsubmit =  searchPost;

orderByer.onchange = function() {
 changeSort(0);
}
initResult(0);
buildLabels();
</script></div>
استبدل رابط مدونتي المحددة باللون الاصفر برابط مدونتك واحفظ الصفحة ومبارك عليك ^_^

الخميس، 18 سبتمبر 2014

دورة HTML5 : عناصر الروابط والروابط الداخلية


عناصر الروابط Hyper Links

توفر لغة HTML آلية للانتقال بين الصفحات المختلفة عبر عناصر الروابط Hyper Links , والروابط عبارة عن نصوص أو صور تنقلك عند النقر عليها من الصفحة الحالية إلى إلى صفحة ويب أخرى, تقوم مستعرضات الويب بتمييز الروابط بعرض "يد صغيرة" كمؤشر للفأرة عند الإشارةإلى أحد الروابط, ويتم إنشاء الروابط بواسطة الوسم <a> , و ال a هذه اختصار لـ Anchor , يتم
تزويد عنصر الرابط بنص يُعرض كمحتوى له أمَّا الموقع الهدف (الذي سيتم الانتققال إليه عند النقر على الرابط)فيتم تزويده للواصفة href والتي هي اختصار لـ Hyper Reference , فلننظر للمثال التالي:

 <html>
 <head>
 <title>
      صفحة اختبار لعناصر الروابط
 </title>
 </head>
<body>
   <a href="http://www.microsoft.com"> مايكروسفت </a><br />
   <a href="http://www.google.com">جوجل </a><br />
   <a href="http://www.msn.com" target="_blank" >MSN</a> <br />
   <a href="firstPage.html" target="_self">أول مثال </a> 
</body> 
</html>
الذي يبدو عند استعراضه بمستعرض الويب كمايلي:
لقد قمنا بتزويد صفحتنا بمجموعة من عناصر الروابط التي تشير إلى بعض المواقع الشهيرة و قد تعمدت في الرابط الأخير ذكر اسم ملف المثال الأول الذي قمنا بإنشائه معاً في بداية هذا الفصل وذلك لتوضيح أن الروابط يمكن أن تكوف مطلقة Absolute (كالثلاثة الأولى)أو نسبية Relative(كالرابط الأخير) و يقصد بالنسبية أن الرابط المذكور يكون عبارة عن مسار Path ملف الصفحةالهدف بالنسبة للصفحة الحالية و في حالتنا فقد كانت الصفحةالهدف firstPage.html في نفس مجلد الصفحة الحالية.
عند النقر على أحد هذه الروابط سيتم الاّنتقال إلى الرابط URL المذكور في الواصفة href المرافقة لعنصر الرابط الذي تم النقر عليه, من الجدير بالذكر أنَّنا قمنا بتزويد بعض الروابط بالواصفة target والتي تحدد مكان عرض الصفحة الهدف في المستعرض بمعنى أنّها تجيب على الأسئلةالتالية:
هل سيتم عرض الصفحة الهدف في نافذة الصفحة الحالية؟ (في هذه الحالة فإن قيمة الواصفة هي القيمة _self )هل سيتم عرض الصفحة الهدف في إطار مستعرض جديدة؟ ( في هذه الحالة فإن قيمة الواصفة _blank ),هل سيتم عرض الصفحة في إطار محدد؟ (في هذه الحالة فإن قيمة الواصفة هي اسم الإطار وسيتم تناول الإطارات بشكل مفصل لاحقاً).
آخر ما يجب ذكره عن الروابط حالياً أنَّه يمكن للرابط أن يشير إلى أي مورد Resource متوفر على الويب و ليس فقط الصفحات, كما يمكن أن يشير الرابط إلى بريد إلكتروني E-Mail وذلك بأن نضع القيمة :mailto قبل البريد الإلكتروني الذي نريد أن نضع رابطاً له, انظر المثال التالي:

 <html>
 <head>
 <title>
      روابط خاصة
 </title>
 </head>
<body>
   <a href="http://www.somesite.com/files/file1.zip"> اضغط لتحميل الملف </a> <br />
   <a href ="mailto:abdallhadagga.com">راسلني</a>
 </body>
</html>
ما سيحدث عند النقر على الرابط الأولى هو ظهور مربّع تحميل الملف Save File Dialog و ماسيحدث عند النقر على الرابط الثاني هو ظهور برنامج مدير البريد الإلكتروني )مثل Outlook Express ( في وضع إرسال رسالة جديدة إلى البريد الإلكتروني المذكور في الرابط.

الروابط الداخليَّة Internal Linking

أحياناً يكون المحتوى الموجود ضمن صفحة معيّنة كبيراً إلى حد ما و في حالة مثل هذه يصبح الاّنتقال إلى فقرة محددة ضمن الصفحة عملية تستغرق بعض الجهد والوقت, توفِّر لغة HTML آليَّة للانتقال إلى جزء محدد من الصفحة مباشرة عبر ما يعرف بالروابط الداخلية Internal Links
و التي يتم تحقيقها عبر استخدام وسم الرابط <a> و تمرير معرف العنصر المراد الانتقال إليه كقيمة لمواصفة href بالشكل التالي:

 <html>
 <head>
 <title>
    مثال على الروابط الداخليه
 </title>
 </head> 
<body> 
<a href="#Para4">الى الفقرة الرابعة</a>
 <h1>الفقرة الاولى </h1>
 <p>محتوى الفقرة الاولى</p>
 <h1>الفقرة الثانية </h1>
 <p>محتوى الفقرة الثانية</p>
 <h1>الفقرة الثالتة </h1>
 <p>محتوى الفقرة الثالتة</p>
 <h1 id="Para4">الفقرة الرابعة </h1>
 <p>محتوى الفقرة الرابعة </p>
</body> 
</html>
يمكنك التطبيق ورؤية الناتج , وإلى هنا أتركم في رعاية الله إلى حين نلقاكم في درس جديد ولمتابعة الدورة يمكنك الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد . 
المصادر /www.w3schools.com  تعلَّمHTML5 & CSS3 (م.مختار صالح)

صنع رابط مختصر بواسطة JavaScript

مرحبا بكم أصدقائي , سأشارككم خدعة اختصار الروابط ,اذا كنت تستخدم هذه المواقع  bit.ly، goo.gl فأنت تعرف ماذا أقول ,ولو نظرنا بتمعن لفكرة عمل هذه المواقع سنجد أن الروابط التي نحصل عليها هي روابط وهمية تقوم بأعادة توجيهنا للرابط الأصلي وهذا ما سأقوم بكتابته بشكل مبسط بواسطة الجافا سكربت حيث نستطيع استخدام هذه الخدعة في مدونات بلوجر.
سنضيف ثلاث روابط وهمية ولنفرض رابط بروفايل الفيس الخاص بي ورابط القروب الخاص بنا ورابط الاشتراك بأعضاء المدونة
نذهب للقالب ونبحث(CTRL+F) عن الوسم </head>  ونلصق الكود التالي فوقه مباشرة
 <script language='javascript'>
 //<![CDATA[
var key = window.location.href.split("go/")[1].replace("/","") 
var url={ 
'fb':'https://www.facebook.com/abdallhadagga', 

'fbg':"https://www.facebook.com/groups/322398437938561",
 'blog':"https://www.blogger.com/follow-blog.g?blogID=3128931490091816597" 
 }
 if(key){
 if(urls[key]){ 
window.location.href=urls[key]
 }else
{ document.write("'"+key+"' غير موجود!! :("); 
 }
 } 
//]]>
 </script>
للتجريب في مدونتي اظغط على الرابط التالي sweup.com/go/blog واشترك في الاعضاء :-bd
يمكنك اضافة عدد لا متناهي من الروابط  لتسهيل الوصول لصفحات مدونتك بسهولة  بالصيغة التالية

 'key':'url',
من أعجبته الفكرة يضع تعليق بالرابط الوهمي الذي صنعه لمدونته وأي استفسارات يمكنك ان ترك تعليق وانا مستعد أن اجيبك بكل حب
, وإلى هنا أتركم في رعاية الله إلى حين نلقاكم في درس جديد ولمتابعة الدورة يمكنك الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد . 

الأربعاء، 17 سبتمبر 2014

تركيب جرس التنبيهات باخر التعليقات لمدونتك كما في قوقل بلس

حصرياُ لمدونتي sweup.com ومدونة أبواياد  في العالم العربي اضافة جرس اخر التعليقات لمدونتك المقتبس من قوقل بلس حيث ان هذه الاضافة تضيف مزيد من الاحترافية لقالب مدونتك كما تقلق من معدل الارتداد وتدفع الزائر للتنقل داخل تدويناتك 
الاضافة هي من تصميم مجموعة DTE وتطوير mantapweb وتعريب sweup.com 

لتركيب الاضافة 

1-لحفظ مكتبة جكويري داخل قالب مدونتك ابحث عن الوسم </head> واضف الكود التالي فوقه مباشرة

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
2-ابحث عن الوسم ]]></b:skin وأضف الكود التالي فوقه مباشرة

 #show-total {
position:fixed;
top:1px; /* يمكنك تغير ارتفاع الموضع الخاص بالجرس من هنا */
right:280px; /* يمكنك تحريك الجرس يمين او يسار من هنا */
z-index:9999; 
cursor:pointer;
float:right;
}
.total-show {
display: block;
position: fixed;
top:50px;
right:20px;
background-color:#FF0000; /*warna total komentar*/
color:white;
padding:2px 6px;
font-size:11px;
border-radius:4px;
font-weight:bold;
}
#notif {cursor:pointer;}
#notif:before {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNPr5qJD5Ts1GkCtpKquePU1EUgXgs8exBh3LbYDpAA-3QqKUp7n3aserQeh5gPMo6TVo6ExeiQiVCwUiX_mGxip-6g86njvafprRz1z3HYSvlYlY5E4EkIG2VizGdTePkHtDhcp8YAazx/s1600/comment.png');
display:block;
position:fixed;
top:40px;
 right:10px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
}
#notif:hover:before {
opacity:1;
}
#notif2 {cursor:pointer;display:none}
#notif2:before {
content: url('https://cdn1.iconfinder.com/data/icons/blue-bits-basic-and-bonus/32/008.png');
display:block;
position:fixed;
top:12px;
right:300px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
}
#notif2:hover:before {
opacity:1;
}
#cm-wrapper {
width:310px;
position:fixed;
top:48px;
right:-381px;
z-index:9999;
background-color:#192028;
padding:15px 15px 25px 13px;
color:#666;
font-family: DroidKufi-blod;
border-top:8px solid #ff6c60;
transition:0.5s ease;
}
#cm-wrapper:before {
content:"";
width:0;
height:0;
position:absolute;
top:-24px;
right: 303px;
border:8px solid transparent;
border-color:transparent transparent #444;
}
#cm-scroll {
width: 100%;
height: 600px;
overflow: auto;
position: relative;
}
#comments-container {
color:#666;
font-family: DroidKufi-blod;
}
#comments-container.cm-active {
position:fixed;
right:0;
top:61px;
}
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}
.vscrollerbase {
width: 5px;
background-color: #111;border-radius:2px;
}
.vscrollerbar {
width: 5px;
background-color: #599b29;border-radius:2px;
}
.hscrollerbase {
height: 10px;
background-color: #111;border-radius:2px;
}
.hscrollerbar {
height: 10px;
background-color: #444;border-radius:2px;
}
.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}
.cm-outer {
margin:0 auto;
padding:0;
font-size:11px;
text-align:left;
}
.cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c}
.cm-outer li {
padding:7px 10px 12px;
list-style:none;
clear:both;
position:relative;
border-top:1px solid #333;
border-bottom:1px solid #111;
margin-right:10px;
}
.cm-outer code {
color:#a6a658;
font-size:11px;
}
.cm-outer li.selected {
border-left:4px solid #fffe8c;
}
.cm-outer li:first-child {
border-top:none;
}
.cm-outer li:last-child {
border-bottom:none;
}
.cm-text {color:#999;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 60px;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#599b29;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#e6e6e6;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:60px}
.cm-outer img {
display:block;
float:left;
background:#8fa2cb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzVXxLTlCyMwz3w74h3odImpUfNXA1N5MD7l0xsEGcKZdrigUKxw3DqU95gu6inHiYBegKCQt9chbHkvP6az6Un46ivf50gqNOkAqcNv56v-dHURh23Z8j22dyPPDBzhnkvNzlK2PmeM/s1600/anon5.png') no-repeat 50% 50%;
overflow:hidden;
border-radius:100px;
position:absolute;
top:10px;
left:0;
border:3px solid #3d464f;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#599b29;text-decoration:none;}
.cm-footer a:hover {color:#e6e6e6;text-decoration:none;}
div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0QOJ5LNMHMusJgbNyfmbHul1h_gl_Jno9Y5hyphenhyphenRdZ_-xyouSEir88RzXkiw06sZH92Ymx9R1GiGeKZe1m0NmlD6MjO0w31PFlaESYufhHbZDwbtB_Vc09bo59zBzREMOHt1dALjRagR3o/s80-c/gravatar.png);
}
.bg_hitam{
display: none;
position: absolute;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:99;
opacity:.30;
}
.sticky {
position:fixed;
top:42px;/* jarak dari atas*/
z-index: 100;
}
.comments
.thanks-comment{
position:relative;
margin:10px 0;
padding-left:40px;
font-style:italic;
font-size:16px;
quotes:"\201C""\201D""\2018""\2019"
}
.comments
.thanks-comment:before{
content:open-quote;
position:absolute;
top:0;
left:0;
margin-top:15px;font-size:4em;color:#d80556}
.reblog {
text-align: left;
color: #fff;
font-weight: bold;
font-size: 14px;
text-shadow: 1px 1px 0 #75a43b;
padding: 5px 10px;
display: inline;
border: 1px solid rgba(254, 101, 0, 0.55);
background: #7cc237;
border-radius: 2px;
background: -webkit-gradient(linear, left top, left bottom, from(#afd95b), to(#7cc237));
background: -webkit-linear-gradient(top,rgba(254, 101, 0, 0.55),rgba(254, 101, 0, 0.55));
background: -moz-linear-gradient(top, #afd95b, #7cc237);
background: -ms-linear-gradient(top, #afd95b, #7cc237);
background: -o-linear-gradient(top, #afd95b, #7cc237);
box-shadow: inset 0 1px 0 #d0e8a0;
-webkit-box-shadow: inset 0 1px 0 #d0e8a0;
-moz-box-shadow: inset 0 1px 0 #d0e8a0;
-o-box-shadow: inset 0 1px 0 #d0e8a0;
}
3-ابحث عن الوسم </body> والصق الكود التالي فوقه مباشرة

 <div id='notif' title='اخر التعليقات'/>
<div id='notif2' title='اخر التعليقات'/>

<div class='bg_hitam' id='bg'/>
<div id='cm-wrapper'>
<div class='flexcroll' id='cm-scroll'>
<div id='comments-container'/>
</div>
</div>
<div id='show-total'/>
<script type='text/javascript'>
//<![CDATA[
 var originalTitle = document.title;
var cm_config = {
    home_page: "http://www.sweup.com/",
    max_result:20,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "comments-container",
    new_cm: " تعليقات جديدة!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$("#cm-wrapper").css({right: "0px"});$("#bg, #notif2").show();$("#notif").hide();});$('#notif2').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});$('#bg').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});document.getElementById('notif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#cm-wrapper").css({right: "0px"});$("#bg").show();};setTimeout(function() {$('.myframe').each(function() {$(this).replaceWith('<iframe class="myframe" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);$(document).ready(function() {
var stickyNavTop = $('#HTML7').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyNavTop) { $('#HTML7').addClass('sticky');} else {$('#HTML7').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});});
setTimeout(function() {
        $('.jsfiddle-demo').each(function() {
        $(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');
    });
}, 5000);
//]]>
</script>
<script src='https://sweup--notification-comments-google.googlecode.com/svn/trunk/sweup.js' type='text/javascript'/>
قم بتغير رابط مدونتي http://www.sweup.com برابط مدونتك مع الملاحظة ان الاشعارات لن تعمل الا اذا كان هناك 20 تعليق في مدونتك فأكثر واذا أرد ت تغير القيمة الى قيمة اقل قم بتغير قيم max_result:20
قم بحفظ قالب مدونتك ومبارك عليك الاضافة واي مشاكل يمكنك وضع تعليق أسفل التدوينة
Resource: http://mantapweb.blogspot.com/2013/12/mempelajari-lebih-lanjut-notifikasi.html

دورة HTML5 :شرح عناصر النصوص و عناصر تنسيق النصوص والمحارف و الرموز الخاصَّة


عناصر النصوص Paragraphs

تتكون صفحة الويب في الواقع من مجموعة مف الفقرات النصية في الغالب, يتم إنشاء هذه الفقرات باستخدا الوس <p> و الذي مر معنا استخدامه في الأمثلة السابقة, و يستخدم الوس <br /> للنزول إلى السطر التالي و ذلك لأنمحارف الفراغات بما فيها محرف المفتاح Enter ليس لها قيمة في لغة HTML كما ذكرنا سابقاً.

عناصر تنسيق النصوص Text Formatting

توفر لغة HTML مجموعة من العناصر لتنسيق النصوص, فلجعل النص عريضاً Bold توفر العنصر <b> أو العنصر<strong>  ( و لجعل النص مائلاً Italic توفر العنصر <i> (أوالعنصر <em> ), و لوضع خط أسفل النص توفر العنصر <u> , و لشطب النص Delete توفرالعنصر <del> , لنشاهد الشيفرة التالية على سبيل المثال:


 <html>
 <head>
 <title>صفحة اختبار لعناصر تنسيق النصوص </title>
 </head>
 <body>
      <p> 
   This is a sample text to demonstrate 
   <b>bold</b>,
   <i>italic</i>,
   <u>underline</u> and 
   <del>delete</del> tags.
          <!--  للنزول سطراً واحداً<br/> استخدمنا -->
   <br/> 
   You may use other tags to generate the same output: 
   <br/>
   This is a sample text to demonstrate 
   <strong>bold</strong>, 
   <em>italic</em>, 
   <u>underline</u> and
   <del>delete</del> tags.
     </p>
</body>
</html>
تبدو الشيفرة أعلاه في المستعرض كمايلي:

ملحوظة: بالطبع هناك المزيد من عناصر تنسيق النصوص سيتم ذكرها في مرجع وسوم HTML لاحقاً

المحارف و الرموز الخاصَّة Special Characters

هناك بعض المحارف والرموز التي لا يمكن عرضها في الصفحة عن طريق كتابتها بشكل مباشر مثل الرموز المستخدمة في الرياضيات و محارف الفراغات وغيرها, توفر لغة HTML آلية خاصة لعرض هذه الرموز و ذلك باتباع الصيغة العامة التالية &value; باستبدال القيمة value بقيمةالمحرف المطلوب على أن يتم عرضه في مستعرض الويب و في الجدول التالي نماذج من هذه المحارف:

الرمز شيفرة XHTML
< &lt;
> &gt;
≠ &ne;
™ &trade;
© &copy;
 محرف الفراغ &nbsp;
للحصول على الجدول الكامل يمكن اتباع الرابط التالي:
http://www.w3schools.com/html/html_symbols.asp
لنشاهد المثال التالي:

 <html>
<head>
   <title>
       صفحة اختبار لبعض المحارف الخاصة
   </title>
</head>
 <body>
      <p>
     3 &lt; 5 and 10 &gt; 2 and also 3 &ne; 4 .... all rights          reserved for &copy; sweup.com &trade; 
      </p>
 </body>
</html>
والذي يبدو عند عرضه في المستعرض كمايلي:

, وإلى هنا أتركم في رعاية الله إلى حين نلقاكم في درس جديد ولمتابعة الدورة يمكنك الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد . 
المصادر /www.w3schools.com  تعلَّمHTML5 & CSS3 (م.مختار صالح)

الثلاثاء، 16 سبتمبر 2014

دورة HTML5 : شرح واصفات الوسوم وعناصر العناوين وعنصر الخط الأفقي والتعليقات



واصفات الوسوم Attributes

يتلخص كل ما قلناه سابقاً بأنَ لغة HTML تتيح لك تقديم المحتوى عبر إنشاء مجموعة من العناصر, مهمة كل عنصر من عناصر HTML عرض شيء محدد جداً في صفحتك فهناك عناصر لعرض النصوص و هناك عناصر لعرض الصور و هناك عناصر لعرض الروابط التشعبيَّة Links .. إلخ, يتم إنشاء كل عنصر من هذه العناصر بواسطة وسم خاص من وسوم HTML , و يكون لكل عنصر وسم بداية ووسم نهاية يحصران محتوى العنصر الظاىر بينهما.
يمكن تزويد بعض وسوم البداية بمجموعة من الخصائص الإضافيَّة والتي تخصّص سلوك عرض العنصر لمحتواه ويتم هذا عبر ما يعرف بالواصفات Attributes , انظر للشيفرة التالية على سبيل المثال:

 <p align="center">
 المحتوى النصي لعنصر عرض النصوص
</p>
كما تلاحظ فقد قمنا بإضافة شيء جديد في هذه الشيفرة إلى وسم البداية الخاص بالعنصر p ألاّوهو الواصفة align التي تحدد محاذاة النص الذي سيعرضه العنصر p و أعطيناها القيمة center لعرض النص في منتصف الصفحةوعند استعراضها سيظهر النص كمايلي:
,,
حسناً, يوجد لكل وسم بداية من وسوم HTML مجموعة معروفة سلفاً من الواصفات Attributes ويوجد لكل واصفة مجموعة معروفة سلفاً من القيم التي يمكن أن يتم إسنادها إلى الواصفة, فالواصفة align هي إحدى الواصفات المعروفة سلفاً لوسم البداية <p> على سبيل المثال و القيم التي يمكن أن تسند إليها هي left لمحاذاة النص إلى اليسار أو right لمحاذاة النص إلى اليمين أو center لمحاذاة النص إلى الوسط, و سيتم بالطبع عرض واصفات كل وسم بالتفصيل عند الحديث عنه وأظن أنه لاّ داعي للقول أن الشكل العام للواصفة هو name="value"  حيث أنَ name هو اسم الواصفة و value هي القيمة المُسنَدة لتلك الواصفة و التي يجب أن توضع بين علامتي اقتباس مزدوجتين " " أوعلامتي اقتباس مفردتيف ‘ ‘ .
أظفن أنَّنا نستطيع الآن أن نبدأ بالحديث عن عناصر HTML كافةً و بالتفصيل و البداية مع عناصر العناوين Headings , و لكف قبل ذلك سنعرض جدولًّ بمجموعة من الواصفات المشتركة بين أغلب وسوم HTML هنا بدلّاً من تكرارها مع كل وسم من تلك الوسوم, و فيمايلي الجدول:


اسم الواصفةالقيم الممكنةالشرح
id       اي اس فريد(غير مكرر)بالنسبة للمستنديتم استخدام هذا الّاسم للتعامل مع العنصر برمجياً باستخدا لغة Java Script أو jQuery , و لها استخدامات أخرى سيتم عرض أحدهما في فقرة الروابط الداخلية لاحقاً
dir ltr
rtl 		لتحديد اتجاه القراءة, ltr تعني أن اتجاه القراءة من اليسار إلى اليمين أمَّا rtl فتعني أن اتجاه القراءة من اليمين إلى اليسار
alignleft
right
center
justify 		لتحديد محاذاة النص
classأي اسم فئة CSS صالحلمنح كافة خصائص الفئة إلى العنصر و سيتم مناقشة هذا بالتفصيل في الدورة ب CSS3
name اي اسم فريدتستخد لتمييز العنصر برمجيّاً

عناصر العناوين Headings

 توفر لغة HTML ستَّة عناصر لعرض العناوين و هي على الترتيب: h1 و h2 و h3 و h4 وh5 و h6 حيث أن العنصر h1 هو أكبرها حجماً و العنصر h6 هو الأصغر و ما بينهما يتدرج في الحجم, و طبعاً حرف ال h هنا اختصار لكممة Heading , دعنا نجرب الشيفرة التالية على سبيل المثال:

 <html>
<head>
   <title>
        صفحى اختبار لعناصر العناوين
   </title>
</head>
 <body dir='rtl'> 
 <h1>عنصر عنوان من المستوى الأوَّل </h1> 
 <h2>عنصر عنوان من المستوى الثاني </h2> 
 <h3>عنصر عنوان من المستوى الثالث </h3>
 <h4>عنصر عنوان من المستوى الرابع </h4>
 <h5>عنصر عنوان من المستوى الخامس </h5>
 <h6>عنصر عنوان من المستوى السادس </h6> 
</body> 
</html>
عند استعراض الصفحة السابقة في مستعرض الويب سنشاهد النتيجة التالية:
كما تلاحظ فقد قمنا بتزويد الوسم <body> بالواصفة dir و التي تحدد اتجاه قراءة جسد المستند وقمنا بإسناد القيمة rtl لها و ذلك لنجعل اتجاه القراءة من اليمين إلى اليسار right to left و هو ما يتناسب مع اللغة العربية بالطبع, و في حال أن هذه الواصفة لا تُعْطَ أية قيمة فإن القيمة الاّفتراضية لها هي ltr أي أن اتجاه القراءة الاّفتراضي من اليسارإلى اليمين.


ملحوظة: استخدام عناصر العناوين <h>   إلى من أجل عناوين الفقرات فقط, و لّا تستخدمها لجعل النص عريضاً أو كبير الحجم فهناك وسوم خاصة لهذين الغرضين.

عنصر الخط الأفقي Horizontal Line

تقدِّم  لغة HTML الوسم الخاص <hr /> لإنشاء الخطوط الأفقيَّة في الصفحة, انظر للمثال التالي:

 <html>
<head>
<title>
  صفحة اختبار لعنصر الخط الافقي
</title>
</head>
 <body dir='rtl'>
   <p>محتوى الفقرة الأولى للتجربة فقط </p>
 <hr />
   <p>محتوى الفقرة الثانية للتجربة فقط</p> 
 <hr />
   <p>محتوى الفقرة التالثة للتجربة فقط</p>
 </body> 
</html>
تبدو الشيفرة السابقة في مستعرض الويب كمايلي:

التعليقات Comments

اعتاد المبرمجون في لغات البرمجة التقليديَّة على كتابة أسطر توضيحيَّة لا تُعالَج إذ أنها لا تعتبر جزءاً من الشيفرة, و إنَّما تستخدم فقط لتذكير المبرمج بأجزاء الشيفرة عندما يعود لتعديلها بعد فترة من الزمن, و هذه الأسطر تعرف بالتعليقات Comments , و مع أن HTML لغة وصفية كما قلت سابقاً إلّا أنها توفر آلية لكتابة التعليقات ضمن المستندات, فتقدّمِ الصيغة العامة التالية لكتابةالتعليق:

 <!-- نضع هنا اي تعليق نريد  -->
, وإلى هنا أتركم في رعاية الله إلى حين نلقاكم في درس جديد ولمتابعة الدورة يمكنك الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد . 
المصادر /www.w3schools.com  تعلَّمHTML5 & CSS3 (م.مختار صالح)
النشرة البريدية
هنا تستطيع الأشتراك في قائمتنا البريدية ضع إيميلك باﻷسفل وأضغط أشتراك ولا تنسى تأكيد أشتراكك من خلال بريدك اﻷلكتروني

لمتابعة المدونة عبرالخلاصة
Powered by Blogger.
TOP