Cara Membuat Komentar Blog Menjadi Show Hide

Cara Membuat Show Hide Pada Komentar Blog

Menjadikan Komentar Blog Show Hide Valid HTML5

Cara Merubah komentar blog menjadi singkat dengan tombol show hide. Manfaat merubah komentar blog menjadi show hide ini tidak terlalu banyak, hanya membuat blog menjadi singkan jika ada banyak komen pada blognya, mungkin bisa juga membuat loading blog jadi lebih cepat karena tidak terlalu banyak meload image di komentar blog.

Cara Membuat Komentar Blog Menjadi Show Hide

• Login ke Blogger.com

• Masuk ke tab Template Edit HTML Cari Kode </head>

• Masukan CSS di bawah ini, tepat di atasnya.

<style type='text/css'>
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>

Jangan lupa mampir ke tutorial lainnya di blog saya ya.

Tutorial Blogger Lainnya :

• Membuat Responsive Menu Navigation Bar Scrolling

• Encrypt Tool Online Untuk Menyembunyikan Script

• Simple Menu Navigation Bar Responsive

Cukup sekian dan terimakasih, semoga artikel tentang cara membuat komentar blog menjadi show hide ini bermanfaat.