Cara Menambahkan Tombol Show All di Widget Cloud Label

Published by Ira Inayatul Alsa Sabtu, 27 April 2019

Seperti yang kita tahu, widget label merupakan salah satu elemen penting yang ada di sebuah blog yang berfungsi memberikan informasi kepada pengunjung untuk melihat postingan yang sudah diberi label sehingga pengunjung dapat mencari postingan dengan kategori apa saja yang ada di blog tersebut.

Terkadang jika kita memiliki blog dengan label postingan yang banyak sampai puluhan hingga ratusan tentunya akan sedikit mengganggu penampilan blog. Namun hal tersebut bisa diatasi dengan cara membatasi jumlah label yang tampil atau bisa juga dengan Mengganti Fungsi Widget Label Menjadi Dropdown agar tampilan blog terlihat lebih rapi dan minimalis.

Pada tips blogger kali ini saya akan memberikan tips Cara Menambahkan Tombol Show All di Widget Cloud Label, berikut ini langkah-langkahnya.

Cara Menambahkan Tombol Show All di Widget Cloud Label

Pertama, buka dasbor Blogger > Kemudian klik menu Tema dan klik tombol Edit HTML > Pastikan sebelumnya sobat sudah menambahkan widget label di tata letak blog > Cari kode widget label ini

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

Ganti semua kode widget di atas dengan kode widget ini

<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='Show all label'>Show All</a>
  </div>
</b:includable>
    </b:widget>

Selanjutnya tambahkan kode css ini sebelum </head>

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

Perhatikan kode yang ditandai, (n+7) berarti hanya akan ditampilkan 6 label sedangkan untuk label ke 7 dan seterusnya akan disembunyikan dan akan ditampilkan semua ketika sobat klik tombol Show All.

Tambahkan kode ini sebelum </body>

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

Selanjutnya klik tombol Simpan tema dan selesai. Untuk contoh hasilnya bisa lihat di blog ini pada bagian sidebar.

Result

Sekian dari Blogcozone, terima kasih sudah berkunjung dan wassalam.