السلام عليكم و رحمته الله تعالى و بركاته
درس رائع خاص بأصحاب مدونات بلوجر
كيف يمكنك أضافة قائمة علوية لقالب مدونتك البلوجر؟؟
توجه للوحة التحكم >> تصميم>> تحرير html
وأبحث عن الكود التالي:
]]></b:skin>
وأضف قبله مباشر الكود التالي:
#nav { float : right;
font : bold 13px Arial, Helvetica, Sans-serif;
border : #121314 solid 1px;
border-top : 1px solid #2b2e30;
overflow : hidden;
width : 100%;
background : #3c4042;
box-shadow : 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
}
#nav ul {
margin : 0;
padding : 0;
list-style : none;
}
#nav ul li {
float : right;
}
#nav ul li a {
float : right;
color : #d4d4d4;
padding : 10px 20px;
text-decoration : none;
background : #3c4042;
box-shadow : 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-right : 1px solid rgba(255, 255, 255, 0.05);
border-left : 1px solid rgba(0, 0, 0, 0.2);
}
#nav ul li a:hover, #nav ul li:hover > a {
color : #252525;
background : #3c4042;
}
#nav li ul a:hover, #nav ul li li:hover > a {
color : #2c2c2c;
background : #5c9acd;
border-bottom : 1px solid rgba(0, 0, 0, 0.6);
border-top : 1px solid #7baed9;
}
#nav li ul {
background : #3c4042;
right : -999em;
margin : 35px 0 0;
position : absolute;
width : 160px;
z-index : 9999;
box-shadow : 0 0 15px rgba(0, 0, 0, 0.4) inset;
border : rgba(0, 0, 0, 0.5) solid 1px;
}
#nav li:hover ul {
right : auto;
}
#nav li ul a {
background : none;
border : none 0;
margin-left : 0;
width : 120px;
box-shadow : none;
border-bottom : 1px solid transparent;
border-top : 1px solid transparent;
}
.nav ul li ul {
position : absolute;
right : 0;
display : none;
visibility : hidden;
}
.nav ul li ul li {
display : list-item;
float : none;
}
.nav ul li ul li ul {
top : 0;
}
.nav ul li ul li a {
font : normal 14px Verdana;
width : 160px;
padding : 5px;
margin : 0;
border-top-width : 0;
border-bottom : 1px solid gray;
}
#nav li li ul {
margin : -1px 160px 0 0;
visibility : hidden;
}
#nav li li:hover ul {
visibility : visible;
}
ثم أحفظ القالب
توجه الأن للوحة التحكم >>تصميم>>أضافة أداة
أختار تهيئة
HTML/JavaScript
وأضف الكود التالي مع تعديل المسميات المشار له بلون الأخضر بمسميات وأقسام مدونتك
وكذلك تعديل الروابط # الرمز المشار له بلون الأحمر بروابط صفحة كل مسمى أو قسم تضيفه:
<div id="nav"> <ul>
<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="#">تعديل قسم فرعي</a></li>
<li><a href="#">تعديل قسم فرعي</a></li>
<li><a href="#">تعديل قسم فرعي</a></li>
<li><a href="#">تعديل قسم فرعي</a></li>
<li><a href="#">تعديل قسم فرعي</a></li>
</ul>
</li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</div>
وصلنا إلا آخر تعديل وهو:
قم بكتابة إسم القسم مكان كلمة تعديل ثم ضع رابطة مكان علامة #
