Blogger Açılabilen İçerik Menüsü

Blogger Açılabilen İçerik Menüsü sayesinde yazılarınızın uzun olması nedeniyle yaşadığımız sorunları biraz da olsun ortadan kaldırmamıza yardımcı olabilecek bir çalışma. Yazılarımızı bir kaç başlık altında daha az bir alan kullanarak toparlayabileceğimiz açılır bir menü ile okuyucularımızın textler arasında boğulmadan istediği başlığa hemen ulaşmasına yardımcı olabilecek basit bir dizini paylaşmak istiyorum.

BLOGUMUZA KODLARIMIZ EKLEMEK İÇİN;

Blogger kontrol panelimize giriyoruz, şablon sekmesinde HTML düzenle seçeğine tıklayıp kodlarımızı açıoruz.

CTRL+F tuşuna basarak ]]></b:skin> kodunu aratıp bulduktan sonra bu kodun hemen üzerine aşağıdaki kodları yapıştırıyoruz.

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; } 
#accordion div:hover { height: 180px; /* height = total height of A and P elements */ }
 #accordion div:hover a { border-bottom: 1px solid #ccc; font-weight: bold; }

Yukarıdaki korlarımızı ekledikten sonra; 

İçeriğimizin blogumuzun görmek istediğimiz herhangi bir yerinde olması için;

Blogger kontrol panelimizden yerleşim seçeneğini seçiyoruz, buradan Gadget ekle diyerek HTML/Javascript seçeneğinden aşağıdaki kodları ekleyerek blogumuza yerleştirmiş oluyoruz.

<div id="container"> 

<div id="accordion"> 

<div class="item"> 

<a href="#">Başlık - 1</a> 

<p>İçerik</p>

</div> 

<div class="item"> 

<a href="#">Başlık - 2</a> 

<p>İçerik</p> 

</div> 

<div class="item"> 

<a href="#">Başlık - 3</a> 

<p>İçerik</p> 

</div> 

<div class="item"> 

<a href="#">Başlık - 4 </a> 

<p>İçerik</p>

 </div> 

</div> 

</div>

Eğer yazı içersinde kullanmak istersek;

Yeni Yayın hazırlarken HTML kısmına bu kodları yapıştırmamız yeterli olacaktır.

Kırmızı ile yazılı yerlere başlıklarımızı;

Mavi ile yazılı yerlere ise içeriklerimizi eklememiz gerekmektedir.