Blogger da Renkli Tek Sıra Menü Nasıl Oluşturulur

Anasayfanıza eklediğiniz menünün görsellik açısından renkli olması durumunda okuyucuların daha fazla ilgisini çekecektir.Bu menüyü ilgi çekici hale getirmek için drop drown menü kullanacağınız gibi tek sıra halinde renkli olarak da kullanabilirsiniz.Eğer kategori sayınız az ise tek sıra halinde görüntülemeyi tercih edebilirsiniz.Bu yüzden size alternatif olması açısından fare ile üzerine gelindiğinde renklenen yatay menü nasıl oluşturulur onu paylaşacağım.Aşağıda paylaştığım kodları tamamen kendinize göre özelleştirebilirsiniz.Kodlarda ilgili yerleri değiştirdiğiniz takdirde arka plan rengi, fare ile üzerinde delince değişen renk gibi kısımları değiştirebilirsiniz.

DEMO

Bu menüyü blogunuza eklemek isterseniz :

• Blogger hesabınıza giriş yapın
• Tasarım kısmına gelerek Yerleşimden Html/JavaScript ekle seçeneğini seçin.
• Aşağıdaki kodları kopyalayın ve Html/Javascript kutusuna yapıştırın.

<style>
#wrapper {
margin:0px;
padding:0px;
width:100%
}
#menu {
margin:0px;
padding:0px;
width:960px;
}
#menu ul {
margin:0px;
padding:0px;
}
#menu li {
display:inline;
}
#menu a {
width:150px;
height:30px;
padding:10px 0px 0px 0px;
float:left;
display:block;
border-right:1px solid #666;
text-align:center;
text-decoration:none;
color:#000000;
font-weight:bold;
font-size:16px;
background-color: #CCC;
background-image: -moz-linear-gradient(#CCC, #999);
background-image: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#999));
background-image: -webkit-linear-gradient(#CCC, #999);
background-image: -o-linear-gradient(#CCC, #999);
background-image: -ms-linear-gradient(#CCC, #999);
background-image: linear-gradient(#CCC, #999);
text-shadow:1px 1px 1px #ccc;
}
#menu a:hover {
background-color: #CCC;
background-image: -moz-linear-gradient(#0066B3, #00477D);
background-image: -webkit-gradient(linear, left top, left bottom, from(#0066b3), to(#00477d));
background-image: -webkit-linear-gradient(#0066B3, #00477D);
background-image: -o-linear-gradient(#0066B3, #00477D);
background-image: -ms-linear-gradient(#0066B3, #00477D);
background-image: linear-gradient(#0066B3, #00477D);
color:#EEEEEE;
text-shadow:1px 2px 1px #000;
}
</style>
<div id="wrapper">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Hakkımda</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Kategoriler</a></li>
<li><a href="#">Reklam</a></li>
</ul>
</div>
</div>

Yukarıdaki kodları isteğinize göre düzenleyebilirsiniz.Genişliği ayarlayabilir ve fare ile üzerine gelindiğinde olması gereken renk kısmını belirleyebilirsiniz.Gerekli düzeltmeleri yaptıysanız kaydedip blogunuzu görüntüleyin.