Cara Membuat Show More Categories pada Blog

 
Cara Membuat Show More Categories pada Blog - Pada artikel kali ini saya akan membagikan cara membuat Show More Categories pada Blog atau Lihat Kategori Lainnya. Sebenarnya, tutorial ini hanya mengilangkan sebagian label atau categories pada blog agar tidak terlihat terlalu panjang. Tutorial ini menggunakan Show Hide pada HTML dan tidak menggunakan Javascript, maka dari itu tutorial ini tidak membuat loading blog sobat menjadi lambat.

Cara ini tidak bisa langusng menambahkan kode lalu di save, sobat harus mengoptimalkan sendiri kode tersebut pada template blog sobat, agar sesuai dengan panjang dan lebar kolom peletakkan label atau categories yang diinginkan. Jadi sobat perlu perhatikan dengan seksama tutorial berikut.

• Seperti biasa, buka Blogger  > Tata Letak > Tambahkan Widget > HTML/Javascript > Kemudian tambahkan kode HTML di bawah ini dan Simpan.

<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>

Nb : 130px adalah ukuran label atau kategori yang akan menyesuaikan jumlah kategori yang akan ditampilkan. Jadi, jika sobat mengubah 130px harap ubah juga 130px pada CSS.

• Kemudian Buka Blogger > Template > Edit HTML > lalu letakkan kode CSS di bawah ini tepat diatas kode ]]></b:skin> atau </style>
 

/* CSS Show More Categories */
#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}

Nb : #label1 adalah tag CSS pada kategori, mungkin tag CSS kategori pada blog sobat berbeda, jadi samakan dengan cara berikut.

 

• Kemudian Simpan Template 

Nb : Jika tampilan Show More Categories masih terlihat berantakan, harap lihat dan amati kembali langkah langkah di atas dan sesuaikan seperti #label1 dan 130px.

Jika ada pertanyaan, keluh kesah, dan masalah silahkan sobat bisa bertanya dikolom komentar di bawah.