اضافة شريط قوائم CSS فى بلوجر

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

كيفية اضافة شريط قوائم CSS فى بلوجر

  - قم بالتوجه الى بلوجر > القالب > تعديل القالب > ابحث عن الوسوم التالى

]]></b:skin>

فوق الوسوم السابق اضف الكود التالى

/*Menu Stars BWidgets.com */
.bwidgets-nav {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.bwidgets-nav ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.bwidgets-nav ul li {
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhweVpC5KGHwr4lcE-zXzHDWl8DZnZ7HYBtoJOKRrGZDbdNPXYM3v42i5OSbIAoVeFEF178CY-v3vvQINLhf0tTWpFhEImY7n1mefC3zEIr0a7LWGGzhyF1mMZOTnJZt6SVYb16ClQFBEg/s1600/SpritesMenu.png');
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.bwidgets-nav ul li a {
    display:block;
    height:100%;
    width:100%; }
.bwidgets-nav ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.bwidgets-nav ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.bwidgets-nav ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.bwidgets-nav ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.bwidgets-nav ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.bwidgets-nav ul li:hover {
    z-index:1000; }
.bwidgets-nav ul li.sm1:hover {
    background-position:0 -75px; }
.bwidgets-nav ul li.sm2:hover {
    background-position:-125px -75px; }
.bwidgets-nav ul li.sm3:hover {
    background-position:-249px -75px; }
.bwidgets-nav ul li.sm4:hover {
    background-position:-373px -75px; }
.bwidgets-nav ul li.sm5:hover {
    background-position:-498px -75px; }
/*Menu Ends BWidgets.com */

الان قم بحفظ القالب 

والان حان موعد اضافة القوائم التى سنكتبها لتظهر بكود CSS السابق

  - قم بالتوجه الى بلوجر > التخطيط > اضافة HTML/JavaScript

 قم بلصق الكود التالى

<div class="bwidgets-nav">
<ul>
<li class="sm1"><a href="#"></a></li>
<li class="sm2"><a href="#"></a></li>
<li class="sm3"><a href="#"></a></li>
<li class="sm4"><a href="#"></a></li>
<li class="sm5"><a href="#"></a></li>
</ul>
</div>

قم بلصق كل # بروابط مدونتك واقسام مدونتك المختارة

اتمنى ان تعجبك الاضافة :)