Sidebar'a Hazır Efektli Menü Yapımı

Menü yapımıyla alakalı olarak; Blogger Blogunuza Yatay Menü Eklemeyi ve buna ek olarak Alt kategorili bir menüyü anlatmıştım. Ancak bunlar hep Başlık alanının altına konumlandırılan menülerdi.

Menülerinizi başlık alanında değilde sütunlar kısmına da konumlandırabilirsiniz. Buna benzer bir konuda Sekmeli Navigasyon Menü Yapımı konusunda geçmişti. Tabi bu tam bir menü değildi ancak üç gadgeti bir arada göstermeye yaradığı için kullanışlı bir eklentiydi. Hazır menü seçenekleri sunan Styled Menus sitesinden faydalanarak hazır formatlarda ve kullanımı nispeten daha kolay, basit ve farklı menüleri blogunuza ekleyebilirsiniz. İster sütunlarınızda, ister başlık alanı altında kullanabileceğiniz menüler mevcut. Tamamen sizin tercihiniz. Hemen yukarıdaki örnek resimdeki menü normalde yeşil bir arka plana sahip ve fare ile üstüne gelindiğinde arka plan rengi penbeye dönüşüyor. Bu menünün şuan aktif olarak nasıl çalıştığını görmek isterseniz bu blogu ziyaret edebilirsiniz. Menü için gerekli olan kodlar aşağıda. Eğer ilginizi çektiyse; alttaki kodu kopyalayıp, Yerleşim ve Sayfa ögeleri yolunu izleyin, gadget ekle diyerek JavaScript Kodu seçeneğine tıklayın ve yapıştırın. Kaydedin ve sitenizi görüntüleyin.

Sütunlarda Efektli Menü Kullanımı için Gerekli Kodlar

<center><div id="menu">
<ul>
<li><a class="current" href="<span class="Apple-style-span" >http://takipteyiz.blogspot.com/</span>"><span class="Apple-style-span" >Anasayfa</span></a></li>
<li><a href="<span class="Apple-style-span" >http://takipteyiz.blogspot.com/</span>"><span class="Apple-style-span" style="color:#3333FF;">Hakkımda</span></a></li>
<li><a href="<span class="Apple-style-span" >http://takipteyiz.blogspot.com/</span>"><span class="Apple-style-span" >Kategoriler</span></a></li>
<li><a href="<span class="Apple-style-span" >http://takipteyiz.blogspot.com/</span>"><span class="Apple-style-span" style="color:#3333FF;">Arşiv</span></a></li>
<li><a href="<span class="Apple-style-span" >http://takipteyiz.blogspot.com/</span>"><span class="Apple-style-span" >İletişim</span></a></li>
</ul>
</div></center>
<style>
*{
margin:0;
padding:0;
}
body{
background:#fff;
color:#666;
font:12px/18px Tahoma, Arial, Helvetica, sans-serif;
}
#menu{
background:#fff;
width:170px;
}
#menu ul{
list-style:none;
}
#menu li{
list-style:none;
margin:3px 0;
}
#menu li a{
list-style:none;
background:#8faf39 url(http://i29.tinypic.com/15s3jnn.gif) no-repeat;
color:#fff;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
text-decoration:none;
display:block;
height:35px;
line-height:35px;
padding:0 0 0 20px;
}
#menu li a:hover{
background:#da4a70 url(http://i28.tinypic.com/2jb2vs5.gif) no-repeat;
color:#fff;
text-decoration:none;
}</style>

Yukarıdaki kodda mavi renklileri kişisel tercihinize göre değiştirin. Kırmızı renkliler ise kullanmak istediğiniz menü indirdiğiniz dosyanın içinde yer alan resimlerin yükleyici sitelere yüklendikten sonra eklenmesi gereken yerleri göstermektedir. Styled Menus sitesinden kendi seçtiğiniz bir menüyü yüklemede herhangi bir sorun yaşarsanız yorumlarda belirtin, yardımcı olmaya çalışırım.

Kolay gelsin.

Benzer Yazılar;
Pratik Yatay Menü
Alt Kategorili Menü
Hareketli Menü
Multi Açılır Menü
Gizli yazı imkanı
Tabbed Menu