Trik Mudah Menambahkan Tombol Show All pada Label Widget Cloud

Cara Menambahkan Tombol Show All di Widget Cloud Label, Trik Mudah Menambahkan Tombol Show All pada Label Widget Cloud, jentsuu tv
Estimated read time: 3 min
Widget label pada suatu Blog merupakan salah satu elemen penting 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.

Trik Mudah Menambahkan Tombol Show All pada Label Widget Cloud

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 Trik Mudah Menambahkan Tombol Show All pada Label Widget Cloud, berikut ini langkah-langkahnya.


Trik Mudah Menambahkan Tombol Show All pada Label Widget Cloud


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.


Sekian dari JENTSUU TV, terima kasih sudah berkunjung dan salam bahagia.

About the Author

𝘢𝘬𝘶 𝘣𝘰𝘭𝘦𝘩 𝘩𝘪𝘥𝘶𝘱 𝘣𝘶𝘬𝘢𝘯 𝘬𝘢𝘳𝘦𝘯𝘢 𝘬𝘦𝘬𝘶𝘢𝘵𝘢𝘯𝘬𝘶 𝘵𝘦𝘵𝘢𝘱𝘪 𝘰𝘭𝘦𝘩 𝘬𝘢𝘳𝘦𝘯𝘢 𝘽𝙚𝙡𝙖𝙨 𝙆𝙖𝙨𝙞𝙝-𝙉𝙮𝙖 ✞

Posting Komentar

Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.