Blogger'a Açılabilen Menü Eklemek

13:00 | 0 yorum


Blogger'a Açılabilen Menü Eklemek

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.

Bu açılır menüde herhangi bir javascript kodu içermemekte. CSS ile tasarlanmış sade ve kullanışlı bir menü hazırlanmış.

Ş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://turkiyeajans.blogspot.com/2013/10/blogger-populer-yayinlar-widgetini.html" target="_blank">Popüler Yayınlar Widgeti Özelleştirmek</a>
 </div>
 </div>
</div>
Yukarıda kırmızı 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.

Kategori: , , , ,

0 yorum