Cara Menciptakan Show More Categories Di Blog

Cara Praktis Membuat Show More Categories di Blog - Pada tutorial kali ini sesungguhnya hanya menghilangkan sebagian label atau categories pada blog biar tidak terlalu panjang ataupun biar tidak terlalu banyak. Tutorial kali ini memakai Show Hide pada HTML dan tidak memakai Javascript sedikitpun, maka dari itu tutorial membuat Show More Categories ini tidak menciptakan loading blog sahabat menjadi lambat.

Tutorial kali ini tidak dapat pribadi menambahkan isyarat begitu saja kemudian Save. Pada tutorial ini sahabat juga harus mengoptimalkan sendiri kode-kode tersebut pada template blog sahabat biar pas dan rapih. Kaprikornus fokus dan ikuti tutorial ini baik-baik.

1. Buka Blogger > Tata Letak > Tambahkan Widget > HTML/Javascript > kemudian masukan isyarat HTML di bawah ini kemudian 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 yaitu ukuran kategori yang akan menyesuaikan jumlah kategori yang akan di tampilkan. Jika sahabat merubah 130px harap ubah juga 130px pada CSS.

2.  Buka Blogger > Template > Edit HTML > kemudian letakan isyarat CSS di bawah ini sempurna di atas isyarat ]]></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 yaitu Tag CSS pada kategori, mungkin tag CSS kategori pada blog sahabat berbeda jadi samakan dengan cara "lihat gambar 1".

Gambar 1

Simpan Template.

Note : Jika tampilan show more categories masih awut-awutan harap lihat kembali tutorial dan sesuaikan menyerupai isyarat #Label1 dan 130px.

Result

Semoga Tutorial ini Bemanfaat...

Sumber https://www.idblanter.com