السلام عليكم ورحمة الله وبركاتة موعدنا اليوم مع درس جميل ورائع ومهم انها اضافه تتيح للمدونين اضافه قائمه تحتوى روابط اقسام وتسميات مدوناتهم تحت الهيدر مباشرة مثل الموجوده عندى بمدونتى,,, ان اعجبتك القائمه
قم باتباع الخطوات التى بالاسفل ---->>>>>

* قم بتسجيل الدخول الى لوحة تحكم مدونتك.

* قم بالذهاب الى تصميم ثم تحرير HTML.

* قم بالضغط على علامة توسيع قوالب واجهة المستخدم.

* ابحث عن الكود التالي ]]</b:skin> وذلك بالضغط علىCTRL+F .

* انسخ الكود الموجود بالاسفل وضعه مباشرة قبل هذا الكود ]]</b:skin>

#menu {
background: #fff;
height: 28px;
margin: 3px 0 0 0;
padding: 0;
border: 1px solid #ddd;
}
#menu .current a {
background: #fd0859;
color: #fff !important;
}
#menu ul {
float: left;
list-style: none;
margin: 0 0 0 1px;
padding: 0;
}
#menu li {
float: left;
list-style: none;
margin: 0;
padding: 0;
border-right: 1px solid #ddd;
}
#menu ul li {
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-right: 1px solid #045;
}
#menu li a, #menu li a:link, #menu li a:visited {
margin: 0;
padding: 7px 12px 7px 12px;
color: #333;
display: block;
font-size: 14px;
font-weight: bold;
}
#menu li a:hover, #menu li a:active {
background: #fd0859;
margin: 0;
padding: 7px 12px 7px 12px;
color: #fff;
display: block;
text-decoration: none;
border-bottom: none;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background: #fff;
width: 130px;
float: none;
margin: 0;
padding: 7px 12px 7px 12px;
color: #000;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
#menu li li a:hover, #menu li li a:active {
background: #fd0859;
color: #fff;
padding: 7px 12px 7px 12px;
}
#menu li ul {
z-index: 9999;
position: absolute;
height: auto;
width: 155px;
margin: 0;
padding: 0;
left: -999em;
}
#menu li li {
border: none;
}
#menu li ul a {
width: 120px;
}
#menu li ul a:hover, #menu li ul a:active {
}
#menu li ul ul {
margin: -29px 0 0 156px;
border: none;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
left: auto;
}
#menu li:hover, #menu li.sfhover {
position: static;
}

 * قم مره اخرى بالبحث عن هذا الكود </head>بالضغط على مفتاحى CTRL+F

انسخ الكود الموجود بالاسفل وضعه قبل هذا </head>

<script type='text/javascript'>
<!--//--><![CDATA[//><!--
sfHover = function() {
        if (!document.getElementsByTagName) return false;
        var sfEls = document.getElementById("menu").getElementsByTagName("li");

        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>

* قم الان بحفظ قالب مدونتك.

* قم بالذهاب الى تصميم.

* تذكر انك الان في --->>> عناصر تصميم الصفحه.

* قم بانشاء اداه جديده.

* لا تنسى ان تكون الاداه من هذا النوع HTML/javascript.

*انسخ الكود الموجود بالاسفل وضعه فيها وقم بالحفظ.

<div id='menu'>

<li class='current'><a href='YOUR BLOG URL HERE'>Home</a></li>
<li class='cat-item'><a href='TAB 1 URL HERE' title='tab1'>TAB1 TITLE HERE</a></li>
<li class='cat-item'><a href='TAB 2 URL HERE' title='tab2'>TAB2 TITLE HERE</a></li>
<li class='cat-item'><a href='TAB 3 URL HERE' title='tab3'>TAB3 TITLE HERE</a>
<ul class='children'>
<li class='cat-item'><a href='SUB TAB 1 URL HERE' title='Link 1'>SUB TAB1 TITLE HERE</a></li>
<li class='cat-item'><a href='SUB TAB 2 URL HERE' title='Link 2'>SUB TAB2 TITLE HERE</a></li>
<li class='cat-item'><a href='SUB TAB 3 URL HERE' title='Link 3'>SUB TAB3 TITLE HERE</a></li>
</ul>
</li>

</div>

ملحوظه:- لا تنسى تغيير الروابط ذات اللون الاحمر بروابط تسميات مدونتك وذات اللون الاخضر باسماء التسميات.
* بعد الانتهاء من تغيير الروابط وبعد حفظ الاداه قم بسحبها الى فوق رسائل المدونة الاجتماعيه ثم قم بالحفظ.
* تم الانتهاء من موضوع اليوم بحمد الله وتوفيقهالموضوع بالكامل منقول من احد المواقع الاجنبيه وتمت ترجمته للافاده