Cara Menambahkan Tombol Show All di Widget Cloud Label

Tutorial blogger, bloging, cara bloging untuk pemula


Seperti yang kita tahu, widget label adalah salah satu elemen penting pada 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 mengatasi jumlah label yang tampil atau bisa juga mengganti fungsi widget label menjadi dropdown agar tampilan blog terlihat lebih rapi dan minimalis.

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


Cara Menambahkan Tombol Show All di Widget Cloud Label

1. Buka Dasboard Blogger > Kemudian klik menu Tema dan klik tombol Edit HTML > Pastikan sebelumnya agan 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>


2. 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>
3. 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"


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


5. Selanjutnya klik Simpan Tema dan lihat hasilnya.

Untuk contoh hasilnya bisa dilihat di Screenshoot di bawah ini.
Sekian dari mimin. Terimakasih sudah berkunjung dan Wasaalamualaikum.
Cara Menambahkan Tombol Show All di Widget Cloud Label
Blog ini dibuat dengan tujuan untuk berbagi kepada semua orang yang membutuhkannya.

You May Like These

Ikuti blog Siap Ngoding untuk mendapatkan notifikasi terbaru!