Blogger Etiket Bulutu Eklentisine Tümünü Göster Butonu Ekleme

Bildiğimiz gibi, etiket eklentisi bir blogda ziyaretçilerin etiketli yayınları görebilmeleri için bilgi sağlamaya yarayan ve blogda bulunan herhangi bir kategorideki yayınları arayabilen önemli unsurlardan biridir.

Paylaştığımız bazı yazılar çok fazla etikete sahip olabiliyor. Blogumuzda etiketler eklentisinde bu etiketlerin hepsi görününce blogun görünümü biraz bozulabilir.

Bu yazımda Blogger Etiket Bulutu Eklentisine Tümünü Göster Butonunu Nasıl Ekleyeceğiniz hakkında bilgiler vereceğim. işte adımlar.

Blogger Etiket Bulutu Eklentisine Tümünü Göster Butonu Ekleme

Öncelikle Blogger Kontrol Panelinizi açın. Ardından Temalar menüsünü açın. Ve HTML'yi Düzenle butonuna tıklayın.

Blogunuza Etiketler Eklentisini Yüklediğinizden Emin Olun!

Aşağıda vermiş olduğum kodu aratın.

<b:widget id='Label1' locked='false' title='Etiketler' type='Label'>...</b:widget>

Eğer kodu aradığınızda bir sonuç çıkmıyor ise; <b:widget id="Label1" Sadece bu kodu aratın!

Arattığınızda çıkan sonuçtaki kodları aşağıda vermişim olduğum kodlarla değiştirin.

<<b:widget id='Label1' locked='false' title='Labels' type='Label' version='1'>
      <b:widget-settings>
        <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
        <b:widget-setting name='display'>CLOUD</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'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;amp;max-results=10&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'><data:label.count/></span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;amp;max-results=10&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'><data:label.count/></span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
   <a class='btn-more' href='#' title='Etiketlerin Tümünü Göster'>Tümünü Göster</a>
  </div>
</b:includable>
    </b:widget>

Sonra, aşağıdaki kodları </head> kodunun üstüne ekleyin.

<style type='text/css'>
/* CSS Label */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1}.cloud-label-widget-content{text-align:left}#Label1 .label-size{display:block;float:left;line-height:1.2;margin:0 5px 5px 0;font-size:13px;font-weight:600;z-index:9;transition:initial}#Label1 .label-size a,#Label1 .label-size span{background:#4e72f8;display:inline-block;color:#fff;border:1px solid #4e72f8;padding:6px 12px;font-weight:600;border-radius:3px;transition:all .3s}#Label1 .label-size a:hover{background:#4667e1;color:#fff;border-color:#4667e1;box-shadow:0 3px 8px rgba(0,0,0,0.1),0 3px 4px rgba(0,0,0,0.12)}.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#f8f8f8}
#Label1 .label-size:nth-child(n+7){display:none}#Label1.open .label-size:nth-child(n+7){display:block}#Label1 a.btn-more{background:#4e72f8;display:block;color:#fff;border:1px solid #4e72f8;font-weight:600;border-radius:3px;transition:all .3s;float:left;overflow:hidden;line-height:1.2;padding:6px 12px;font-size:13px;margin:0 5px 5px 0}#Label1 a.btn-more:hover{background:#4667e1;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,0.1),0 3px 4px rgba(0,0,0,0.12)}#Label1 .widget-content{max-height:110px;overflow:hidden;overflow-y:visible}
</style>

!Yukarıda vermiş olduğum kodda #Label1 .label-size:nth-child(n+7)koduna dikkat edin. Bu kod şunu ifade ediyor. Etiketlerinizden sadece 6 tanesinin gözükeceği ve diğerlerinin gizleneceği, tümünü göster butonuna tıklayınca hepsinin gözükeceği anlamına gelmektedir.

Bu işlemleri de uyguladıktan sonra, aşağıdaki kodu da </body>  kodunun hemen üstüne ekleyin.

<script type='text/javascript'>
//<![CDATA[
// Show all label
$("#Label1 .btn-more").on("click",function(e){e.preventDefault(),$(this).closest("#Label1").toggleClass("open")});
//]]>
</script>

Temayı Kaydet düğmesine tıklayın ve tamamlayın. Örneği görmek istiyorsanız aşağıdaki butona tıklayın.
 
SONUÇ