logo blog

Cara Membuat Komentar Blog Menjadi Show Hide

Cara Membuat Komentar Blog Menjadi Show Hide

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.


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

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Cara Membuat Komentar Blog Menjadi Show Hide. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Cara Membuat Komentar Blog Menjadi Show Hide. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

Comment Loading