Blogger Aşağıya Doğru Açılabilen Menü

Blogger'ın menü çeşitlerinin çok fazla olduğu aşikar. Kullanıcı ve ziyaretçiler için kısa zamanda kolay ve kullanımı

basit eklentiler yayıngınlaşıyor. Bu sayede ziyaretçi ulaşmak istediğine blogda sıkılmadan ulaşabiliyor.

Blogger açılan menü ile sizde ziyaretçilerinize kısa yoldan bilgileri sunabilirsiniz. Mesela blogunuzda paylaşımda bulundunuz 4 farklı içerik mevcut. Bunlar Blogger Seo, Blogger Eklentileri, Blogger Tema ve Sosyal Ağlar. Bu dört içerikte en fazla popüler olan 3-4 konuyu ekleyerek ziyaretçilerinizin ulaşmak istediği konuya anında yönlendirebilirsiniz. Açılır menünün en büyük avantajı bu olsa gerek.

Şimdi gelelim CSS ile tasarlanmış Blogger Açılır Menüye. Aşağıdaki kodu blogunuzun Şablon bölümüne girip CTRL + F yardımı ile ]]></b:skin> kodunun üzerine ekleyin.

body { font: 13px Arial, Helvetica, sans-serif; color: #1e1e1e; } #container { width: 600px; margin: 20px auto; } #accordion { margin-top: 20px; } #accordion .item { width: 400px; height: 30px; /* height = total height of A child element */ overflow: hidden; transition: height ease-in-out 500ms; /* css3 transition */ -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 2px; } #accordion a { display: block; height: 20px; line-height: 20px; background: #e6e6e6; padding: 5px; color: #1e1e1e; text-decoration: none; } #accordion p { height: 150px; padding: 5px; font-weight: bold; } #accordion div:hover { height: 100px; /* height = total height of A and P elements */ } #accordion div:hover a { border-bottom: 1px solid #ccc;font-weight; }



 
Kodu ekledikten sonra Şablonu kaydedip çıkın. Daha sonra ise aşağıdaki HTML kodları için yeni bir gadget oluşturun ve içerisine aşağıdaki html kodlarını ekleyin.




<div id="container"> <div id="accordion"> <div class="item"> <a>Başlık - 1</a> <p> İçerik</p> </div> <div class="item"> <a>Başlık - 2</a> <p> İçerik</p> </div> <div class="item"> <a>Başlık - 3</a> <p> İçerik</p> </div> <div class="item"> <a>Başlık - 4 </a> <br /><a href="http://www.gokhaninguncesi.com/2013/10/blogger-ic-ice-gecmis-menu-eklentisi.html" target="_blank">Blogger iç içe geçmiş menü eklentisi</a> </div> </div> </div>

Yukarıda 2.kod kutusu içindeki  ( <br /><a href="http://www.gokhaninguncesi.com/2013/10/blogger-ic-ice-gecmis-menu-eklentisi.html" target="_blank">Blogger iç içe geçmiş menü eklentisi</a> ) Mavi işaretli alanı örnek olarak görmeniz için ekledim. HTML kodunu ekleyin görünümünü kontrol ettikten sonra kullanıp kullanmayacağınıza karar verirsiniz. Yapamadğınız bir yer olursa yorumdan iletebilirsiniz. Kolay gelsin. İyi bloglamalar... 

 NOT | Sosyal ağlarda paylaşarak konuyu arkadaşlarınızla paylaşabilirsiniz