Blogger akordiyon menü eklentisi

Akordiyon Menü normal menülerden farklı olarak daha az alan kaplamasından dolayı gerçekten kullanışlı bir menü. Bu menüde Blogunuzun belli bölümlerinin görünmesini sağlayabilirsiniz. Bağlantılarınızın düzgün, temiz ve uzun bir liste şeklinde görüntülemek için etkili bir yol. JQuery ve Hareket Hızı Plugini kullanılarak yaratılmış bir eklentidir. Blogunuz ile uyumlu hale getirmek için bazı stil ve komut bölümlerini düzenleyebilir özelleştirebilirsiniz. Harika bir genişlet / Daralt Özelliği vardır. Kullanıcı tıklattığında varsayılan içindeki tüm içerik sekme bölümü genişleterek görüntülenir. Websitenizin, blogunuzun Sidebar bölümünde hertürlü içerik için kullanılabilir ilgi çekici güzel bir eklenti.

Akordiyon Menü Önizleme

Tarayıcı uyumluluk sorunları hakkında endişelenmenize gerek yok. IE8 + dahil olmak üzere tüm büyük tarayıcılar ile uyumludur.
Aşağıdaki adımları takip edin:

1. Blogger > şablon
2. Şablonunuzu Yedekleyin!
3. HTML'yi Düzenle tıklayın
4. Ctrl+F yardımı ile </head> kodunu bulun.
5. Bulduğunuz kodun hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){$.easing.def="easeOutBounce";$('li.button a').click(function(e){var dropDown=$(this).parent().next();$('.dropdownmenu').not(dropDown).slideUp('slow');dropDown.stop(false,true).slideToggle('slow');e.preventDefault()})});
</script>

6. </b:skin> kodunu bulun. kodu genişletmek için siyah oku (►) tıklayın.


7. </b:skin> kodunun hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

ul.container{background:#26292c;width:98%;border:2px solid #7E7E7E;box-shadow:0 2px 7px #666;margin:0 auto;padding:2px 3px 0;}
li.menu{width:100%;padding:5px 0;}
li.button a{color:#b5bec4;display:block;font-family:Arial,georgia,sans-serif,Helvetica;font-size:13px;overflow:hidden;position:relative;width:100%;text-transform:capitalize;padding:0 0 5px;}
li.button a:hover{text-decoration:none!important;}
li.button a span{right:0;top:0;position:absolute;color:#ccc;display:block;}
.dropdownmenu{display:none;padding-top:5px;width:100%;}
.dropdownmenu li{border:1px solid #7E7E7E;color:#CCC;margin:5px 0;padding:4px 10px;}
.dropdownmenu li:hover{border:1px solid #ccc;text-decoration:none;}
.dropdownmenu li a:hover{text-decoration:none;}

Not: Yukarıdaki bağlantıları, yazı tiplerinin görünümünü ve renk kodlarını düzenleyerek özelleştirelebilirsiniz. 8. şablonunuzu kaydedin.

9. Akordiyon menüyü ekleme

1. Blogger kontrol paneli > Yerleşim
2. Gadget Ekle
3. HTML/JavaScript seçin
4. İçine aşağıdaki HTML kodunu kopyalayıp yapıştırın:

<ul class="container">
<!- BİRİNCİ SEKME -->
<li class="menu">
<ul>
<li class="button"><a href="#" >BURAYA SEKME BAŞLIĞI EKLE<span>▼</span></a></li>             
<li class="dropdownmenu">
<ul>
<li>1. <a href="http://....blogspot.com/p/örnek.html" >Örnek</a></li>
<li>2. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
<li>3. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
<li>4. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
<li>5. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
</ul>
</li>
</ul>
</li>
<!- İKİNCİ SEKME -->
<li class="menu">
<ul>
<li class="button"><a href="#" >BURAYA SEKME BAŞLIĞI EKLE<span>▼</span></a></li>
<li class="dropdownmenu">
<ul>
<li>1. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
<li>2. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
<li>3. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
<li>4. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
<li>5. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
</ul>
</li>
</ul>
</li>
</ul>

• Kırmızı renkle işaretlediğim bölümlere istediğiniz menü başlık isimlerini verin. BURAYA SEKME BAŞLIĞI EKLE
• Menüye link vermek için Mavi renkle işaretlediğim yerlere linklerinizi yazın. BURAYA LiNK EKLE
• Sarı renkle işaretlediğim bölümlerede link isimlerinizi yazın. BURAYA LINK METNİNİ EKLE
• Örnekte sadece iki satır var ama siz bunu istediğiniz kadar çoğaltabilirsiniz. Son </ul> kodundan önce menünüze eklemeler yapabilirsiniz.

Not:

Eğer uyguladınız ve düzenli olmadıysa 7. Adımdaki </b:skin> alanına yerleştirdiğimiz Style kodlarını başına <style type="text/css">, sonuna </style> ekleyerek 9. adımdaki eklediğimiz kodların üzerine ekliyoruz.

Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...