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

Blogger Açılır Menü Eklemek

 Blogger eklentileri ile sizlere yazılar sunmaya devam ediyorum. Blogunuzun herhangi bir yerine açılır menü eklentisi eklemek ister misiniz? İstersiniz istersiniz :)

blogger açılır menü eklemekYapmanız gereken işlem çok basit. Anlatıma geçmeden önce bu açılır menü de sevdiğiniz siteleri yayınlayabilirsiniz ya da en çok ziyaret edilen siteleri ekleyebilirsiniz. Bunun kararını vermek size kalmış artık. Şimdi gelelim blogger açılır menü eklentisine.


Kumanda Paneli >Yerleşim >Gadget Ekle > HTML/Javascript işlemini yaptıktan sonra aşağıda yer alan kodları HTML/Javascript gadgetine ekleyin

form><select name="menu" onchange="window.open (this.options[this.selectedIndex].value,'_blank')" size=1 name=menu> <option />- Açılır Menü - <option value="http://www.gokhaninguncesi.com/" />Link 1 <option value="http://www.gokhaninguncesi.com/" />Link 2 <option value="http://www.gokhaninguncesi.com/" />Link 3 </select></form>

 Tüm işlem bu kadar. http://wwww.gokhaninguncesi.com/ olan yerleri istediğiniz gibi değiştirebilirsiniz. Aklınıza takılan yerleri yorum formundan sorabilirsiniz.