Cara Memasang Tombol Show All pada Cloud Label Blogger

Bisa Oi - Kalian tahu bahwa widget merupakan salah satu bagian terpenting dalam dunia Blogging. Banyak fungsi yang terdapat dalam widget bisa sebagai informasi akan artikel baru atau daftar artikel terpopuler.

Cara Memasang Tombol Show All pada Cloud Label Blogger

Terkadang, kalian juga menjumpai sebuah blog memiliki widget label postingan yang banyak sampai puluhan bahkan lebih. Nah pastinya penampilan blog tersebut akan menjadi kurang bagus jika terlihat. Banyak jenis desai tampilan label ini mulai dilengkapi border atau langsung tulisan saja sampai ke bawah.

Nah, kali ini saya akan membagikan cara atasi tampilan cloud label dengan menambahkan tombol show all pada widget tersebut. Fungsi dari tombol ini adalah sebagai pembatas akan jumlah label yang ingin ditampilkan di blog kalian. Dengan begitu, maka blog kalian akan terlihat rapi dan minimalis. Selain itu, memungkinkan pengunjung akan semakin betah di blog kalian.

Untuk memasang tombol show all pada widget cloud label, kalian bisa ikuti langkah-langkah di bawah ini. Langsung saja simak pada ulasan berikut ini.

Cara Pasang Tombol Show All pada Cloud Label

1. Masuk ke akun Blogger kalian. Setelah itu klik menu Tema, kemudian pilih menu Edit HTML.
2. Setelah itu cari kode di bawah ini pada template blog kalian. Agar lebih mudah kalian bisa menggunakan pencarian dengan tekan Ctrl + F. Lalu pastekan kode di bawah ini pada kotak tersebut dan tekan enter.

<b:widget id='Label1' locked='false' title='Labels' type='Label' version='1'>...</b:widget>
Ganti kode tersebut 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. Letakkan kode CSS di bawah ini tepat diatas/sebelum kode </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>
Perhatian :
Pada kode berwarna merah, khususnya untuk kode (n+7) berarti hanya ditampilkan 6 label saja. Untuk label ke 7 serta seterusnya akan disembunyikan dan label tersebut akan muncul jika ada yang klik tombol show all tersebut.

4. Langkah selanjutnya, letakkan kode di bawah ini tepat diatas/sebelum kode </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. Simpan template dan lihat hasilnya.

Demikian cara memasang tombol show all pada widget cloud label blog. Terus update perkembangan desain baru Blogger. Terima kasih, semoga tutorial ini bermanfaat bagi kalian semua.

Post a Comment

0 Comments