Buat Show Hide Kategori, Kategori adalah salah satu pendukung penting dalam sebuah blog selain mempermudah juga membuat tampilan blog lebih elegan.
Fungsi utama dari kategori ini adalah untuk mengelompokkan konten berdasarkan tema untuk membantu pengunjung untuk menjelajahi blog Anda.
Karena pasti kita tidak membahas satu jenis konten saja jadi tak jarang kita memiliki puluhan label atau kategori yang memenuhi tampilan blog anda.
Jumlah label yang puluhan itu terlihat berantakan dan akhirnya kurang sedap dipandang mata ataupun mengganggu saat seseorang membaca artikel.
Untuk mengatasi hal tersebut, Anda bisa membuat show hide kategori yang berfungsi sebagai widget. Tampilannya akan menjadi rapi dan tidak menumpuk atau berantakan seperti biasanya.
Lalu bagaimana cara membuatnya? Sangat simple dan sederhana, silahkan ikuti langkah-langkah dibawah ini.
Cara Buat Show Hide Kategori
Menambahkan HTML
Langkah pertama silahkan Anda menambahkan HTML di blog Anda. Buka tata letak lalu tambahkan HTML/Javascript, setelah itu silahkan masukan script dibawah ini kedalam kolom yang tersedia.
<a class=’show-more’ id=’showmore’ onclick=’document.getElementById('Label1').style.height='auto';document.getElementById('showmore').style.display='none';document.getElementById('hidemore').style.display='block';’ href=’javascript:;’>Show More Categories</a>
<a class=’show-more’ id=’hidemore’ onclick=’document.getElementById('Label1').style.height='130px';document.getElementById('hidemore').style.display='none';document.getElementById('showmore').style.display='block';’ href=’javascript:;’>Hide More Categories</a>Anda bisa meletakan widgetnya dimana saja, baik itu di sidebar, footer, dan tempat lain sebagainya. Namun perlu diperhatikan, jangan meletakan widget pada bagian yang sekiranya menutupi konten.
Selain akan menggangu pembaca, juga tidak enak dipandang mata.
Baca juga: Tips Menjadi Blogger yang Sukses
Menambahkan CSS
Langkah berikutnya silahkan Anda membuka html template Anda, Template > Edit HTML . Setelah itu silahkan tambahkan css dibawah ini tempat diatas kode “] ] > < / b: skin >” (tanpa spasi dan tanda petik).
/* 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}Silahkan Anda ganti label sesuai dengan babel yang ada di blog Anda. Untuk melihatnya silahkan buka kategori/label Anda dan klik di url nya lalu lihat label berapa yang tertera.
Jika masih terdapat kesalahan atau mungkin tampilannya berantakan silahkan clear cache atau refresh halaman Anda. Lalu cek kembali apakah sudah benar antara ukuran dan label pada nomor 1 dan 2 sudah sama.
Penutup
Itulah dia tutorial singkat bagaimana cara untuk membuat show hide kategori untuk digunakan di blogger. Semoga dapat bermanfaat dan terima kasih telah membaca tulisan saya ini.
