Blogger için açılır etiket listesi ile ilgili geçtiğimiz günlerde bir içerik paylaşmıştım sizlerle. Şimdi ise daha farklı bir yöntem kullanılarak hazırlanmış olan ve neredeyse tüm tarayıcılar ile uyumlu olan bir açılır / kapanır etiket listesi eklentisi daha paylaşmak istiyorum. Eğer sitenizdeki etiketlerinizi direkt göstermek yerine, açılır / kapanır şeklinde çalıştırmak istiyorsanız, bu basit bir işlemdir. Aşağıdaki kodları temanızın sidebar alanına eklemeniz yeterli olacaktır. Hepsi bu kadar...

AYRICA: Blogger için Responsive Facebook Beğen Butonu Yapımı

Blogger için Açılır / Kapanır Etiket Listesi

<style>
a.accordion {background-color: #f5f5f5;color: #444;display:block;font-size:18px;border-bottom:1px solid #ddd;cursor: pointer;padding: 15px;text-align: center;outline: none;}
.panel {display: none;background-color: white;overflow: hidden;}
#Label50,#Label50 .widget-content{margin:0;}
a.iLabels__link{color:#444}
.iLabels__link{display:block;padding:20px;border-bottom:1px solid #eee;text-align:center;font-size:17px;}
.section{margin:0 0}
.iLabels__link:nth-child(odd){background:#f5f5f5}
</style>
<b:section class='katlistbu' id='katlistbu'>
<b:widget id='Label50' locked='false' title='' type='Label' version='1'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>LIST</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<a class='accordion'>Kategorileri Aç / Kapat</a>
<div class='panel'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<a class='iLabels__link' expr:href='data:label.url'><data:label.name/></a>
<b:else/>
<a class='iLabels__link' expr:href='data:label.url'><data:label.name/></a>
</b:if>
</b:loop>
</div>
<script>
var acc = document.getElementsByClassName(&quot;accordion&quot;);
var i;
for (i = 0; i &lt; acc.length; i++) {
acc[i].addEventListener(&quot;click&quot;, function() {
/* Toggle between adding and removing the &quot;active&quot; class,
to highlight the button that controls the panel */
this.classList.toggle(&quot;active&quot;);
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === &quot;block&quot;) {
panel.style.display = &quot;none&quot;;
} else {
panel.style.display = &quot;block&quot;;
}
});
}
</script>
</b:includable>
</b:widget>
</b:section>

Örnek Görünüm 1

Örnek Görünüm 2