Cara Membuat Show More Categories

Bagikan :

Tweet

Hai Sobat, kali ini saya akan share " Cara Membuat Show More Categories ". Cara ini cocok bagi anda yang ingin categories / label tidak terlalu panjang karena banyaknya categories / label di blog.
Mau tau caranya... Langsung Ke Tutorialnya...

Cara Membuat Show More Categories

1. Masuk Ke Beranda Blogger > Template > Edit HTML

2. Cari Kode ]]></b:skin> Atau </style> Untuk Mempermudah Pencarian Anda Dapat Tekan CTRL + F

3. Masukkan Kode Di Bawah Ini Di Atas Kode ]]></b:skin> Atau </style>

/* CSS Show More Categories Cak Yit */
#Label1{height:130px;transition:all 1s ease-in-out;overflow:hidden}
a.show-more{width:180px;overflow:hidden;color:#fff;background:#36BD80;text-transform:uppercase;font-weight:bold;border:4px solid #ddd;padding:10px 30px;text-align:center;margin:15px;border-radius:10px;font-size:12px;transition:all .5s ease-in-out}
a.show-more:hover{border:4px solid #22AF6F;background:#fff;color:#22AF6F}
#showmore{display:block}#hidemore{display:none}

4. Kemudian Masuk Ke Tata Letak > Tambah Widget > HTML / Javascript
5. Masukkan Kode Di Bawah Ini Ke Dalam Kotak Yang Sudah Di Sediakan

<a class='show-more' id='showmore' onclick='document.getElementById(&#39;Label1&#39;).style.height=&#39;auto&#39;;document.getElementById(&#39;showmore&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;hidemore&#39;).style.display=&#39;block&#39;;' href='javascript:;'>Show More Categories</a>
<a class='show-more' id='hidemore' onclick='document.getElementById(&#39;Label1&#39;).style.height=&#39;130px&#39;;document.getElementById(&#39;hidemore&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;showmore&#39;).style.display=&#39;block&#39;;' href='javascript:;'>Hide More Categories</a>

Info : Ukuran 130px Yang Akan Menyesuaikan Jumlah Kategories Yang Akan Di Tampilkan, Anda Juga Dapat Merubahnya Sesuai Keinginan Anda
6. Klik Simpan

Cara Menerapkan

1. Masuk Ke Beranda Blogger > Tata Letak > Tambah Widget > Pilih Label

Info : #Label Di Tag CSS Pada Kategori Harus Di Samakan Dengan Cara Di Atas.

Tag : CSS, HTML, Tutorial Blog, Widget