Blogger Açılır Text Menü Başlıkları

Blogger Açılır Text Menü Başlıkları
Blogger Açılır Text Menü Başlıkları

Blogger Açılır Text Menü Başlıkları özellikle alan konusunda sorun yaşan Blogger kulalnıcılarının yüzünü güldürecek şekilde tasarlanmış, genişleyen text alanlarına izin veren bir CSS kod dizinidir. Hemen size örneğini sunayım. Başlıkların üzerine gelirseniz alt bilgi ekranı genişleyerek sunulacaktır.

Açılır Menü Başlıkları Demo


Blogger Açılır Text Menü Başlıkları Kullanımı


1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle temamızın kodlarını açıyoruz.
2 ) Ctrl + F yardımı ile ]]></b:skin>kodunu buluyoruz.
3 ) ]]></b:skin>kodunun öncesine aşağıdaki  Blogger Açılır Text Menü Başlıkları  kod dizinini ekliyoruz.


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;
}

4 )  Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/Javascript seçeneğini kullanarak Blogger Açılır Text Menü Başlıklarını  görmek istediğiniz yere aşağıdaki kodları ekleyin.


div id="container">
  <div id="accordion">
  <div class="item">
   <a href="#">Menü Başlığı - 1</a>
   <p>İçerik</p>
  </div>
  <div class="item">
   <a href="#">Menü Başlığı - 2</a>
   <p>İçerik</p>
  </div>
  <div class="item">
   <a href="#">Menü Başlığı - 3</a>
   <p>İçerik</p>
  </div>
  <div class="item">
   <a href="#">Menü Başlığı - 4 </a>
   <p>İçerik</p>
  </div>
 </div>
</div>
  • Kırmızı olarak belirlenmiş alanlara menü başlıklarını eklemeniz gerekiyor. 
  • Mavi olarak işaretlenmiş bölge içeriğiniz eklenmesi gereken alan. 


Makaleyi Paylaş :
 

Yorum Gönder

 
Hakkında : kredi kartı borcu taksitlendirme
Copyright © 2012 - 2013. Blogger Dersleri - All Rights Reserved | Proudly powered by Blogger