Cara Membuat Kolom Komentar Blog Show Hide

show hide komentar blog

Cara Membuat Kolom Komentar Blog Show Hide - membuat agar kolom komentar singkat merupakan cara yang bagus agar tampilan komentar menjadi ramping apa lagi jika artikel tersebut di banjiri komentar bahkan sampai ratusan tentunya sangat ribet dan membuat  halaman tersebut menjadi lambat saat loading. mempersingkat kolom komentar blog menjadi Show hide mungkin bisa di terapkan dan mungkin juga bisa membuat loading blog menjadi lebih cepat karena tidak terlalu banyak meload image di komentar blog .

manfaat merubah Kotak komentar blog menjadi show hide tidak terlalu banyak , karena hanya membuat kotak komentar menjadi singkat dan terlihat ramping . bukan hanya itu menjadikan kotak komentar menjadi show hide ini Valid HTML5 .

Memasang Kotak komentar Show hide pada blogspot

• .border{ border:1px solid greenuntuk memasangnya silahkan Login pada blogger .
• setelah itu sil masuk ke Taorderb Temorderplate pada menu samping kiri dan edit HTML dan cari </head>
• Masukan kode CSS di bawah ini tepat di atas kode </head>

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

• setelah itu cari kode </body> dan masukan kode javascript di bawah ini tepat di atas kode </body> tersebut .

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

setelah itu Save template dan lihat hasilnya .

Catatan :
Jika template sobat masih belum memasang agar font awesomenya  muncul silahkan pasang kode di bawah ini tepat di atas kode </head >

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

jika sudah maka untuk memasang script di atas tidak di perlukan. semoga sukses ☺☺