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

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

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

* ابحث عن الكود التالي ]]</b:skin>

ضع قبلة الكود الذي بالاسفل

#menu{
 width:90%;
 margin:25px auto;
}
#menu ul{
 list-style:none;
}
#menu li{
 display:block;
 float:left;
}
#menu li a{
 background:#749b10 url(http://santabanta.mywapblog.com/files/menu-bgm.gif) repeat-x;
 border:2px solid #80a225;
 margin:0 1px;
 padding:15px 15px 15px 15px;
 display:block;
 float:left;
 color:#fff;
 text-transform:uppercase;
 text-decoration:none;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-size:13px;
 font-weight:bold;
 height: 50px;
}
#menu li a span{
 color:#52651f;
 font-size:10px;
 text-transform:lowercase;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-weight:normal;
}
#menu li a:hover{
 background:#e46825 url(http://santabanta.mywapblog.com/files/menu-hover.gif) repeat-x;
 border:2px solid #c04118;
 text-decoration:none;
}
#menu li a:hover span{
 color:#ffd9c7;
}
.current{
 background:#e46825 url(http://santabanta.mywapblog.com/files/menu-hover.gif) repeat-x;
 border:2px solid #c04118;
 margin:0 1px;
 padding:15px 15px 15px 15px;
 display:block;
 float:left;
 color:#fff;
 text-transform:uppercase;
 text-decoration:none;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-size:13px;
 cursor:pointer;
 font-weight:bold;
 height: 50px;
}
.current span{
 color:#ffd9c7;
 font-size:10px;
 text-transform:lowercase;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-weight:normal;
}

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

* اذهب مجددا الى عناصر تصميم الصفحه.

* قم باختيار اداه جديده من نوع HTML/javascript.

ضع بداخلها الكود الموجود بالاسفل

<div id="menu">
 <ul>
  <li class="current">Home<br /><span>takes you to<br /> home page</span></li>

  <li><a href="TAB1 URL HERE">TAB1 TITLE<br /><span>takes you to<br />about us page</span></a></li>  
  <li><a href="TAB2 URL HERE">TAB1 TITLE<br /><span>takes you to<br />products page</span></a></li>
  <li><a href="TAB3 URL HERE">TAB1 TITLE<br /><span>takes you to<br />partners page</span></a></li>  
  <li><a href="TAB4 URL HERE">TAB1 TITLE<br /><span>takes you to<br />contact page</span></a></li>

 </ul>
</div>

<div style="clear: both;"></div

ملحوظه:- قم بتغيير الرابط الاحمر داخل الكود برابط القسم والكلام ذات اللون الاخضر باسم التسميه او القسم.

اي استفسار يرجا ترك تعليق بالاسفل!!