اضافة قائمة افقية علوية menu horizontal بمدونة blogger يمكنك من اختصار مواضيع مدونتك وعرضها بشكل بسيط وواضح أما زوار مدونتك خاصة عندما تكون القائمة علوية تظهر لكل الزوار بدون عناء كما يمكنك تقسيم مدونتك الى عدة أقسام وتخصيص كل قسم لمواضيع معينة .
لأضافة قائمة افقية علوية أو menu horizontal بمدونة بلوجر اتبع الشرح المبسط التالي بواسطة و
- - قم بتسجيل الدخول الى مدونتك على موقع blogger
- - من لوحة التحكم الخاصة بمدونتك اختر التخطيط ثم اختر تحرير html .
- - قم بحفظ نسخة من قالب مدونتك .
- - اضغط المفتاح f3 من لوحة المفاتيح ثم ابحث عن الكود التالي :
</b:skin>
5- ثم مباشرة قبل الكود السابق قم بنسخ الكود التالي :
-------------------------------------------------------------------
/*URL: http://www.AllBlogTools.com/ */
.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;
}
---------------------------------------------------------------------/*URL: http://www.AllBlogTools.com/ */
.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;
}
6- ثم قم بحفظ قالب مدونتك
7-ثم اذهب الى التخطيط اختر اضافة أداة ثم اختر ثم بلصق الكود التالي :
------------------------------------------------------------------------------------------------------------------------
<ul class="basictab">
<li class="selected"><a href="http://www.AllBlogTools.com.com">Home</a></li>
<li><a href="http://www.allblogtools.com/blogger-templates/">Blogger Templates</a></li>
<li><a href="http://www.allblogtools.com/blogger-tricks-and-hacks/">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>
--------------------------------------------------------------------------------------------------------------------------
<ul class="basictab">
<li class="selected"><a href="http://www.AllBlogTools.com.com">Home</a></li>
<li><a href="http://www.allblogtools.com/blogger-templates/">Blogger Templates</a></li>
<li><a href="http://www.allblogtools.com/blogger-tricks-and-hacks/">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>
--------------------------------------------------------------------------------------------------------------------------
8- يمكنك تغير لون خلفية القائمة من خلال البحث عن الكود التالي وتغير رمز اللون الذي تريد .
background-color: #f6ffd5;
9- وتغير لون القائمة عند المرور عليها بزر الماوس من خلال الكود التالي :
background-color: #DBFF6C;
10- وتغير لون النص من خلال الكود التالي :
color: black;
