Menambahkan Tombol Show All Di Widget Cloud Label

Menambahkan Tombol Show All

Menambahkan tombol show all di widget cloud label pada sebuah blog sangat membantu bagi para blogger tentunya.

Baca : VSCO Cam Aplikasi Foto Dengan Filter Kekinian

Info Menarik Seputar Internet Yang Perlu Kamu Tahu

Menambahkan Tombol Show All Di Widget Cloud Label

Bagi para blogger, widget label sangatlah penting dan mempunyai peran inti.

Mengapa demikian? Widget label sendiri berperan sebagai elemen pada sebuah blog dan berfungsi dalam memberikan informasi kepada para pengunjung blog dalam melihat postingan yang sudah di beri label.

Dan memudahkan mencari serta melihat postingan yang telah di kategorikan masing-masing.

Nah buat kamu yang memang ingin terjun di dunia blogging, mungkin cara ini akan sangat membantu kamu. Sehingga para pengunjung blogmu nanti, dapat dengan mudah melihat dan mencari postingan dengan kategori yang sesuai dengan mereka inginkan.

Untuk itu, perhatikan langkah-langkah menambahkan tombol show all di widget cloud label berikut ini.

1. Buka Dasbor Blogger, Untuk Menambahkan Tombol Show All

Untuk langkah pertama yang perlu kamu lakukan ialah, buka dasbor Blogger yang kamu miliki. Lalu pilih menu Tema dan pilih Edit HTML, namun pastikan kamu sudah menambahkan widget label di tata letak blog. Dan cari kode widget label berikut ini.

<b:widget id=’Label1′ locked=’false’ title=’Labels’ type=’Label’ version=’1′>…</b:widget>

2. Ganti Kode Widget

Ganti kode widget sebelumnya, dengan kode berikut 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. Kode CSS

Nah selanjutnya, jangan lupa untuk menambahkan kode css berikut 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>

Note* : Ingat untuk perhatikan kode yang di tandai (n+7), yang berarti hanya ada 6 label yang nanti ditampilkan. Namun pada label 7 hingga disembunyikan dan akan di tampilkan setelah kamu memilih tombol Show All.

4. Tambahkan Kode </body>

Tambahkan lagi kode berikut 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>

Nah sebagai sentuhan akhirnya, kamu bisa mengklik tombol simpan tema dan selesai.
Bagaimana? Sudah siap memppraktekkannya pada blogmu?

Selamat Mencoba ~

You May Also Like

About the Author: Shinta Palin

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!