Membuat Tombol Show All pada Widget Cloud Label

Seperti kita ketahui, label widget adalah salah satu elemen penting dalam sebuah blog yang berfungsi untuk memberikan informasi kepada pengunjung untuk melihat posting yang telah diberi label sehingga pengunjung dapat mencari posting dengan kategori apa saja di blog.

Terkadang jika kita memiliki blog dengan banyak label pos hingga puluhan hingga ratusan tentunya akan sedikit mengganggu penampilan blog. Tapi ini bisa diatasi dengan membatasi jumlah label yang muncul atau bisa juga dengan Mengganti Fungsi Widget Label menjadi Dropdown sehingga tampilan blog terlihat lebih rapi dan minimalis.

Lihat Juga: Cara Sederhana Membuat Tombol Menu Dropdowns

Yang perlu Anda lakukan untuk Membuat Tombol Show All di Widget Cloud Label sebagai berikut:

1. Login ke blogger.com.
2. Cari kode di bawah ini pada Tema > Edit HTML.

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

Pastikan sebelumnya Anda telah menambahkan widget label di tata letak blog.

3. Ganti kode di atas dengan copas (copy-paste) kode di bawah 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>

4. Cari kode </head> pada Tema > Edit HTML.
5. Copas (copy-paste) kode di bawah ini sebelum kode </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 6 label yang akan ditampilkan sementara label ke-7 dan seterusnya akan disembunyikan dan semua akan ditampilkan ketika Anda mengklik tombol Show All.

6. Cari kode </body> pada Tema > Edit HTML.
7. Copas (copy-paste) kode di bawah ini sebelum kode </body>.

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

8. Bila sudah memasang kode di atas pada Tema > Edit HTML, sekarang simpan tema Anda.

Lihat Juga: Membuat Read More Read Less Dengan Tampilan Button Yang Menarik

Untuk demo silahkan kunjungi Halaman Blog disini.

Artikel Pencarian Terkait:

• Cara Menambahkan Tombol Show All di Widget Cloud Label
• Cara Menambahkan Tombol Show All di Widget Cloud Label
• Cara Memasang Tombol Show All pada Cloud Label Blogger ...
• Cara Menambahkan Tombol Show All di Widget Cloud Label
• Cara Membuat Label Kategori Keren di Blog [Lengkap] | Wadah ...