Cara Menambahkan Tombol Show All Di Widget Cloud Label

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

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

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

Baca juga : Membatasi Jumlah Posting di Halaman Label

Cara Menambahkan Tombol Show All di Widget Cloud Label

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

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

Ganti semua isyarat widget di atas dengan isyarat 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 isyarat 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 isyarat yang ditandai, (n+7) berarti hanya akan ditampilkan 6 label sedangkan untuk label ke 7 dan seterusnya akan disembunyikan dan akan ditampilkan semua saat teman klik tombol Show All.

Tambahkan isyarat 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 pola kesannya sanggup lihat di blog ini pada bab sidebar.

• Result

Sekian dari , terima kasih sudah berkunjung dan wassalam.

Share this post