Ekim 17, 2013

Blogger'a Açılabilen Menü Eklemek


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ış. Sizler için daha önce paylaştığım klasik bir açılır menü konusu vardı. Eğer ziyaret etmediyseniz linki tıklayarak göz atabilirsiniz.

Ş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://bloglamazamani.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. Kolay gelsin. İyi bloglamalar...

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

2 yorum :

Hocam bu kırmızı alanı komple silsek ne olur.

@tyfun kara, Hiçbir sorun olmaz. Önizleme amaçlı koydum onu. Dilediğiniz gibi değiştirebilirsiniz.

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.