Menu Close

Cara Membuat Show Hide Kategori Blogger

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. Jadi silahkan terapkan cara buat show hide kategori 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>

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.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *