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.


ÖNİZLEME

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 kontrol panelinize giriş yapın > Şablon sekmesine tıklayın.
2. Şablonunuzu yedeklemeyi unutmayın.
3. HTML'yi Düzenle'ye basın.
4. Düzenleme ekranındayken CTRL+F tuş kombinasyonuyla </head> kodunu aratıp bulun ve hemen üzerine aşağıdaki kodları kopyalayıp yapıştırın:


<script src='https://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>

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

6. </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.
7. şablonunuzu kaydedin.

8. 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="https://....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>

Özelleştirme

  • 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 6. Adımdaki </b:skin> alanına yerleştirdiğimiz Style kodlarını başına <style type="text/css">, sonuna </style> ekleyerek 8. adımdaki eklediğimiz kodların üzerine ekliyoruz.

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

    13 Yorumlar

    Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

    1. kodları ekledim bloğuma ama anasayfamı açtığımda tüm alt linkler gözüküyor nasıl gizleyebilirim alt linkleri.yardım edersen sevinirim.

      YanıtlaSil
    2. Sidebarınıza HTML/JavaScript'i şu şekilde ekleyin.
      <style type="text/css">
      7. Adımdaki style kodlarını bu araya koyun.
      </style>
      <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>

      Böylece devam edin,olacaktır.

      YanıtlaSil
    3. Bunu ben bloguma ekledim ama sizin demo görüntüsünde ki gibi olmuyor.Normal Gadget ekleme yönteminde ki gibi düz metin olarak gözüyor menüler,artı Blog anasayfaya her yeni girişte otomatik olarak menüler açık oluyor.diğer bilog sayfamda denedim sorun çıkmıyo ama

      YanıtlaSil
    4. Script kodları sonra
      <style type="text/css">
      7. Adımdaki style kodlarını bu araya koyun.
      </style>
      ve 9. adımdaki kodları, hepsini birleştirerek Gadget Ekle>HTML/JavaScript'i eklemeyi deneyin.

      YanıtlaSil
    5. 7.Adımda ki kodların başına ve sonuna sizin söylediğiniz gibi yaptım ama değişen bir şey olmadı

      YanıtlaSil
    6. Eklentide hiçbir problem yok. Denenmiş ve bütün bloglarda sorunsuz çalışıyor. Blogunuzdan kaynaklanan bir problem var sanırım. Hangi blogunuzda kullanmak istiyosunuz bu eklentiyi? Dışarıdan bi bakıym problem nerde.

      YanıtlaSil
    7. http://etralibela-61.blogspot.com.tr/ blog adresim bu

      YanıtlaSil
    8. Özel mesaj gönderdim. G-Mail hesabınıza bakın ve uygulayın, olacaktır. Eklentide problem yok. Kolay gelsin.

      YanıtlaSil
    9. G-mailden cevap yazdım.Şimdi başka sorun çıktı.

      YanıtlaSil
    10. Size gönderdiğim örneği blogunuza eklemişsiniz gördüm ve normal çalışıyor. Basınca açılıyor, basınca kapanıyor. Sanırım tarayıcınızdan kaynaklanan bi problem. Mümkünse lütfen Firefox'un (Dünyanın En iyi tarayıcısı) son versiyonunu kullanın yada tarayıcınızı güncelleyin.

      YanıtlaSil
    11. Düzelttim kardeşim önce ki eklediğim kodlardan kaynaklanıyodu sorun şimdi hallettim saolasın.

      YanıtlaSil
    12. Elinize sağlık, menü bende düzgün görünüyor lakin ben görüntü olarak herhangi bir renk kutu ya da çerçeve istemiyorum. Yazı rengi blog'un default yazı rengi olsun, Yazının arka plan rengi de olmasın blogun rengi gözüksün istiyorum. Nasıl yapabilirim acaba bunu?

      YanıtlaSil
      Yanıtlar
      1. 7, Adımdaki style kodlarında aşağıdaki gösterdiğim bölümleri değiştirin (ul.container ve li.button a). Yani kopyalayıp yapıştırın.
        ul.container{background:none;width:98%;border:none;margin:0 auto;padding:2px 3px 0;}
        li.button a{display:block;font-size:13px;overflow:hidden;position:relative;width:100%;text-transform:capitalize;padding:0 0 5px;}

        Sil

    Yorum Gönder

    Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

    Önceki Makale Sonraki Makale