شرح كيفية اضافة قائمة أفقية جميلة بالشكل التالي:
لاضافتها اتبع الخطوات التالية:
- اذهب إلى لوحة تحكم مدونتك.
- اضغط على تخطيط.
- ثم إضافة أداة.
- ثم أضف أداة HTML/Javascript
ثم قم بوضع الكود التالي في html/javascript
<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/AVvXsEj2PmtJIoJEhs5Vd1JzEXip6uNTdNz1QH2fWKpc5jFX_V1lWQVungh5MEpq87jp65AikNALnPSDljGEZkqVFPYjIqvttwYgUtoPvnOb-6vjqQ4k3trEKPKEHitrRz64tOgMyUG816F_nQU/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/AVvXsEgup4SA1LJm4g7L9FWy1WtYWd_RAkQhQrU-KfkOjDBZqIYPnZOAkZQUyJk421rKnSOP22x_VCEGvpdVoz6zYQmPaiQASAn1axz3I_Qafxv3LCiHMyKK7erXMuOWLSwhyphenhyphennXQKVOClucHKhc/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>
