Mengubah tampilan komentar blog menjadi show hide

Kenapa Perlu Menggunakan Show Hide pada Komentar Blog?

Mengubah tampilan komentar blog menjadi Show Hide memiliki beberapa manfaat. Salah satunya adalah membuat tampilan blog lebih ringkas, terutama jika terdapat banyak komentar. Selain itu, metode ini dapat membantu mempercepat waktu loading halaman karena gambar pada komentar tidak langsung dimuat semua.

Langkah-langkah Membuat Komentar Blog Menjadi Show Hide

1. Login ke Blogger

Masuk ke akun Blogger kamu melalui Blogger.com.

2. Buka Menu Edit HTML

Pergi ke tab Theme/Tema, lalu pilih Edit HTML.

3. Temukan Tag `</head>`

Gunakan fitur pencarian (Ctrl + F) dan cari kode berikut:

</head>

4. Tambahkan CSS Show Hide Komentar

Tempelkan kode CSS di bawah ini tepat di atas tag </head>:

<style>a.openpanel{width:100%;color:rgb(141,142,144);display:block;font-size:120%;overflow:hidden;padding:0;text-align:center;position:relative;text-decoration:none;box-sizing:border-box;background-color:white;border:2px solid rgb(141,142,144);box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);border-radius:3px}
a.openpanel span.title{padding:15px 10px;display:block}
a.openpanel span.mas{position:absolute;top:0;right:0;bottom:0;padding:0 25px;background:transparent;border-left:2px solid rgb(141,142,144);box-sizing:border-box}
a.openpanel span.mas span{background-color:#ed1e1e;width:30px;height:30px;position:absolute;right:10px;top:12px;border-radius:50%;box-shadow:0 2px 5px 0 rgba(0,0,0,0.26)}
a.openpanel span.mas.tamvanx span{background:#0091ea}
</style>

Selanjutnya, cari kode </body> lalu masukan javascript dibawah ini tepat diatasnya.

<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
    openPanelText = "Show Comments",
    closePanelText = "Hide Comments",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed = 400;
jQuery(function() {
    jQuery(panelSelector).hide()
        .addClass('kerenPanel')
        .before('<a class="openpanel" href="#" title="Comments"><span class="title">' + openPanelText + '</span><span class="mas tamvan"><span></span></span></a>')
        .after('<div class="paneline"></div>');
    jQuery('a.openpanel').toggle(function() {
        jQuery(this).addClass('active').html('<span class="title">' + closePanelText + '</span><span class="mas tamvanx"><span></span></span>');
        jQuery('.kerenPanel').slideDown(slideDownPanelSpeed);
        return false;
    }, function() {
        jQuery(this).removeClass('active').html('<span class="title">' + openPanelText + '</span><span class="mas tamvan"><span></span></span>');
        jQuery('.kerenPanel').slideUp(slideUpPanelSpeed);
        return false;
    });
});
//]]>
</script>

Kalau sudah tinggal save dan lihat hasilnya.

Kalo Showhidenya Ga tampil, Kalian pasang script ini di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

5. Simpan dan Uji Coba

Setelah menambahkan kode, simpan template dan cek apakah fitur Show Hide pada komentar sudah berfungsi dengan baik.

Kesimpulan

Dengan menerapkan fitur Show Hide pada komentar blog, tampilan blog menjadi lebih rapi dan loading halaman lebih cepat. Jika ada pertanyaan atau kendala, jangan ragu untuk meninggalkan komentar!