Membuat Show More Categories di Blog

JejakSeru.com - Kali ini saya akan membahas cara membuat show more categories di blog. Tutorial kali ini tidak menggunakan JavaScript sehigga blog tidak akan menjadi berat. Kamu hanya perlu menambahkan CSS saja untuk menggunakan show more categories ini, Namun kamu jugs harus mengoptimalkan sendiri kode-kode tersebut pada template blog kamu agar pas dan rapih.



Langkah 1 : Buka Blogger > Tata Letak > Tambahkan Widget > HTML/JavaScript > Masukan kode HTML di bwah 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>


Angka 130px adalah ukuran kategori yang akan menyesuaikan jumlah kategori yang akan ditampilkan. Jika kamu merubah 130px maka kamu juga harus merubah 130px pada CSS.

Langkah 2 : Buka Blogger > Edit HTML > 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}


#Label1 adalah Tag CSS pada kategori, mungkin tag CSS kategori pada blog kamu berbeda jadi samakan dengan gambar di bawah.



Langkah 3 : Simpan dan lihat hasilnya.

Jika dirasa bermanfaat silahkan share/bagikan ke temen-temen terdekat kamu dan jangan lupa like fanspage facebook kami dan follow twitter kami agar selalu dapat informasi bermanfaat dari kami.

Blogger
Disqus
Pilih Sistem Komentar Yang Kamu Suka

No comments