افضل قائمه بتقنية ال css لمدونة بلوجر قمة في الاناقة والالوان

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

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

* اذهب الي تصميم ثم الي تحرير 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

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

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

 

يسمح لكم بنقل الموضوع بشرط ذكر المصدر : افضل قائمه بتقنية ال css لمدونة بلوجر قمة في الاناقة والالوان | TATWEERWEB

 

ساهم في نشر الموضوع ولك جزيل الشكر !

أضف تعليقك عن طريق الفيسبوك :

اضافات css, تنسيق القالب