Cara Memasang Tombol Show All di Widget Cloud Label Blog

Hello sahabat blogger, kali ini monsuka akan berbagi tips cara memasang tombol show all di widget cloud label blog. Widget label merupakan sebuah elemen penting dari sebuah blog yang berguna untuk memberikan informasi kepada pengunjung tentang postingan atau artikel yang sudah diberi label. Sehingga pengunjung lebih mudah mencari postingan dengan kategori yang diinginkan.

Cara Memasang Tombol Show All di Widget Cloud Label Blog

Ketika sebuah blog memiliki label yang banyak hingga ratusan maka akan mengganggu tampilan blog. Namun, hal tersebut dapat diatasi dengan memasang tombol show all di widget cloud label. Tombol show all ini berfungsi untuk menyembunyikan beberapa label sehingga tampilan blog lebih rapi dan minimalis. Jika tombol show all diklik maka label yang tersembunyi tadi akan muncul kembali.

Cara Memasang Tombol Show All di Widget Cloud Label Blog


Langsung saja cara memasang tombol show all di widget cloud label, ikuti langkah-langkah dibawah ini.

Pertama, buka dashboard Blogger anda - Lalu pilih menu Tema dan klik Edit HTML - Sebelumnya pastikan anda sudah memasang widget cloud label di tata letak blog - kemudian 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 dibawah 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>

Baca juga :
Selanjutnya tambahkan kode CSS dibawah 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 diwarnai, (n+7) berarti hanya akan ditampilkan 6 label sedangkan untuk label ke 7 dan seterusnya akan disembunyikan dan akan ditampilkan semua ketika anda klik tombol Show All.
Tambahkan kode dibawah 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>

Terakhir klik Simpan Tema dan lihatlah hasilnya di blog anda.

Sekian tips dari monsuka yaitu cara memasang tombol show all di widget cloud label blog. Terima kasih sudah membaca sampai akhir dan jangan lupa kembali lagi yaa.

Sumber kode : blog arlina

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Cara Memasang Tombol Show All di Widget Cloud Label Blog"

Posting Komentar

Iklan Tengah Artikel 1