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 memperlihatkan gosip kepada pengunjung untuk melihat postingan yang sudah diberi label sehingga pengunjung sanggup mencari postingan dengan kategori apa saja yang ada di blog tersebut.

Terkadang jikalau 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 biar tampilan blog terlihat lebih rapi dan minimalis.

Pada tips blogger kali ini aku akan memperlihatkan 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 sahabat 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 dikala sahabat 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 balasannya sanggup lihat di blog ini pada bab sidebar.

• Result

Sekian dari , terima kasih sudah berkunjung dan wassalam.

Tweet

Subscribe to receive free email updates: