شرح كيفية اضافة قائمة رأسية فى مدونة بلوجر

بـــــــــــــسم الله الرحمن الرحيم

*************************

السلام عليكم ورحمة الله و بركاته موضوع اليوم هو عن كيفية إضافة قائمة رأسية بالـ SideBar الخاص بمدونات Blogger

لإضافة قائمة رأسية vertical menu بمدونة blogger يمكنك من اختصار مواضيع مدونتك وعرضها بشكل بسيط وواضح أمام زوار مدونتك خاصة عندما تكون القائمة الرأسية تظهر لكل الزوار بدون عناء كما يمكنك تقسيم مدونتك الى عدة أقسام وتخصيص كل قسم لمواضيع معينة .

لأضافة قائمة افقية رأسية أو  vertical menu بمدونة بلوجر اتبع الشرح المبسط التالي 

1- قم بتسجيل الدخول الى مدونتك على موقع blogger

2- من لوحة التحكم الخاصة بمدونتك اختر التصميم ثم اختر تحريرhtml 

3 - قم بحفظ نسخة من قالب مدونتك .

  4 - اضغط المفتاح f3 من لوحة المفاتيح ثم ابحث عن الكود التالي :

</b:skin>

 ضع الكود التالى مباشرة قبل الكود السابق الذى قمنا بالبحث عنه

/*URL: http://www.AollBlogoToools.coom/ */


.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}


.basictab li{
display: inline;
margin: 0;
}


.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}


.basictab li a:visited{
color: #2d2b2b;
}


.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}


.basictab li a:active{
color: black;
}


.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}

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

ثم اذهب الى التصميم داخل عناصر الصفحة  اختر اضافة أداة ( html ) من الشريط الجانبي على اليمين أو اليسار ثم قم بلصق الكود التالي مع التعديل على الروابط :

<ul class="basictab">
<li class="selected"><a href="http://www.AlolBlogToools.com.com">Home</a></li>
<li><a href="http://     .com/">Blogger Templates</a></li>
<li><a href="http://     .com/">Blogegr Tricks</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>

 

- يمكنك تغير لون خلفية القائمة من خلال البحث عن الكود التالي وتغير رمز اللون الذي تريد 

background-color: #f6ffd5; 

- وتغير لون القائمة عند المرور عليها بزر الماوس من خلال الكود التالي :

background-color: #DBFF6C;

- وتغير لون النص من خلال الكود التالي :

color: black;

و الحمد لله