Cara Membuat Show More Categories di Blog

Cara Membuat Show More Categories di Blog

Rio Ilham Hadi

24 October 2015

Cara Mudah Membuat Show More Categories di Blog - Pada tutorial kali ini sebenarnya hanya menghilangkan sebagian label atau categories pada blog agar tidak terlalu panjang ataupun agar tidak terlalu banyak. Tutorial kali ini menggunakan Show Hide pada HTML dan tidak menggunakan Javascript sedikitpun, maka dari itu tutorial membuat Show More Categories ini tidak membuat loading blog sobat menjadi lambat.

Tutorial kali ini tidak bisa langsung menambahkan kode begitu saja lalu Save. Pada tutorial ini sobat juga harus mengoptimalkan sendiri kode-kode tersebut pada template blog sobat agar pas dan rapih. Jadi fokus dan ikuti tutorial ini baik-baik.

1. Buka Blogger > Tata Letak > Tambahkan Widget > HTML/Javascript > lalu masukan kode HTML di bawah ini lalu 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>

Info : 130px adalah ukuran kategori yang akan menyesuaikan jumlah kategori yang akan di tampilkan. Jika sobat merubah 130px harap ubah juga 130px pada CSS.

2.  Buka Blogger > Template > Edit HTML > lalu letakan kode CSS di bawah ini tepat di atas 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}

Info : #Label1 adalah Tag CSS pada kategori, mungkin tag CSS kategori pada blog sobat berbeda jadi samakan dengan cara "lihat gambar 1".

Gambar 1

Simpan Template.

Note : Jika tampilan show more categories masih berantakan harap lihat kembali tutorial dan sesuaikan seperti kode #Label1 dan 130px.

Result

Semoga Tutorial ini Bemanfaat...

Share This