اضافة قائمة أفقية لمدونات بلوجر بطريقة سهلة جداً

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

سأشرح لكم كيفية اضافة قائمة أفقية جميلة بالشكل التالي:

 
لاضافتها اتبع الخطوات التالية:

1. اذهب إلى لوحة تحكم مدونتك.
2. اضغط على تخطيط.
3. ثم إضافة أداة.
4. ثم أضف أداة HTML/Javascript
5.  ثم ضع الكود التالي فيها:

 

<style>
.mbt-red-grey-menu{
border:5px solid #cd0000;
padding:0;
clear:both;
}
.mbt-red-grey-menu{
margin:0px;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3-YDCJ17y5aJXjPO2JiwtdueNYyQgqbuMRYISantdqASVEhMu_ZpDI4ORuWMrrLRBjaSb_hLEUeKUVaTQCIzypL8fLQDMkxPnJuS9AjOOiJrxVRCHs36KdiMzJzSVR2o1VK46C2Vp3I4/s400/blockdefault.gif) center center repeat-x;
}
.mbt-red-grey-menu li{
display: inline;
}
.mbt-red-grey-menu li a{
float: left;
color: #fff;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.mbt-red-grey-menu li a:visited{
color: #fff;
}
.mbt-red-grey-menu li a:hover, .mbt-red-grey-menu li a.selected{
color: #fff;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH4hU2RSjAx2C29YDr0YqLbY0-5t4G5dsQh7h9ZQiDD14v3IjhhQ2t7MURD_MGM75DMMZQ69nNBBaNTj_-TGBtyvmLmBFrXbgGcAN6fMdOg_BbjVscBkj-JIfH7jZ4DzQVoZlCkzUnZkk/s400/blockactive.gif) center center repeat-x;
}
</style>

<ul  class="mbt-red-grey-menu">
<li><a href="#">Home</a></li>
<li><a href="#" >About Us </a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sitemap</a></li>
</ul>

والآن قم بتغيير ما هو مظلل باللون الأصفر برابط الصفحة || وما هو مظلل باللون الأزرق باسم الصفحة || وما هو باللون البنفسجي برابط الخلفية.

انتهى الشرح :)