BerlanggananBerlangganan Artikel Gratis Langsung Di Email Anda

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.

Karena jumlahnya yang banyak tentu akan sedikit menggangu pemandangan blog anda yang keren cetar membahana itu. Jumlah label yang puluhan itu terlihat berantakan dan akhirnya kurang sedap dipandang mata ataupun mengganggu saat seseorang membaca artikel, Daripada itu mungkin Show Hide Kategori ini dapat anda gunakan untuk megatasi masalah ini.

Baca Juga : Cara Membuat Alamat Email Keren

Cara Buat Show Hide Kategori

1. Menambahkan HTML

Langkah pertama silahkan anda menambahkan HTML di blog anda , buka tata letak > HTML/Javascript, setelah itu silahkan masukan script dibawah ini kedalam kolom yang tersedia.

<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>

Lihat script yang saya beri tanda merah diatas, itu adalah ukuran kategori yang akan menyesuaikan dengan kategori anda. Jika mengganti ukuran tersebut anda juga harus mengubahnya di dalam script css pada nomor 2.

2. Edit HTML Template

Langkah berikutnya silahkan anda membuka html template anda, Template > Edit HTML . Setelah itu silahkan anda tambahkan css dibawah ini tempat diatas kode ]]> </ b: skin>

/* 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 sobat ganti LABEL1 sesuai dengan Label yang ada di blog anda, untuk melihatnya silahkan buka kategori/label anda dan klik di url nya lalu lihat Label berapa yang tertera , seperti gambar dibawah iniBuat Show Hide KategoriBaca Juga : Tips Menjadi Blogger Sukses

Jika masih terdapat keslahan atau mungkin tampilannya berantakan silahkan anda cek kembali apakah sudah benar antara ukuran dan label pada nomor 1 dan 2 sudah sama. Silahkan sobat berkreasi, Jika selesai maka selesai sudah Buat Show Hide Kategori nya sekarang tinggal fokus konten lagi ok, Terima kasih.