قائمة عريضة بتقنية ال css لاقسام وتسميات مدونة بلوجر باللون الازرق

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

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

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

* ابحث عن الكود التالي </head>

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

<style type="text/css">
<!--
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(http://santabanta.mywapblog.com/files/dolphin-bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(http://santabanta.mywapblog.com/files/dolphin-bg-over.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(http://santabanta.mywapblog.com/files/dolphin-left-on.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(http://santabanta.mywapblog.com/files/dolphin-right-on.gif) no-repeat top right;height:33px;}
-->
</style>

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

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

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

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

<div id="dolphincontainer">
 <div id="dolphinnav">
  <ul>
   <li><a href="TAB1 URL HERE" title="css menus"><span>TAB1 TITLE HERE</span></a></li>
   <li><a href="TAB2 URL HERE" title="css menus" class="current"><span>TAB2 TITLE HERE</span></a></li>
   <li><a href="TAB3 URL HERE" title="css menus"><span>TAB3 TITLE HERE</span></a></li>

   <li><a href="TAB4 URL HERE" title="css menus"><span>TAB4 TITLE HERE</span></a></li>
   <li><a href="TAB5 URL HERE" title="css menus"><span>TAB5 TITLE HERE</span></a></li>
  </ul>
 </div>
</div>

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

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

 

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

 

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

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

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