Cara Membuat Show Hide Komentar di Blogger

Cara membuat dan memasang show hide komentar Blogger. Kemarin anisuka telah membagikan template Blogger seo friendly heibrow, dan pada kotak komentarnya saya tambahkan fungsi show hide untuk menyembunyikan dan menunjukan kembali komentar blog.

Dengan menambahkan fungsi ini pada komentar blog, ini dapat menghemat ruang yang terpakai ketika nantinya banyak komentar yang masuk pada postingan di blog tersebut, misalnya komentar Blog yang banyak dan memanjang kebawah, dengan menambahkan fungsi ini, dapat meringankan loading blog yang komentarnya menumpuk dan mempercantik tampilan blog.

Bicara soal komentar blog, pada waktu yang lalu juga saya sudah membagikan, cara membuat komentar facebook di blog responsive, cara memasukan emoticon di komentar blogger dan cara menyembunyikan komentar dengan CSS.

Sebelumnya usahakan sudah terpasang jQuery di template blog kamu, misalnya:

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

Jika sudah ada Jquery walaupun dengan fersi berbeda, maka kode diatas tidak perlu di tambahkan lagi. Ok, berikut adalah cara membuat komentar show hide di blog.

Show Hide Komentar di Blogger V.1

1. Klik Template dan klik pilih Edit HTML
2. Masukan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>

.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

3. Selanjutnya letakan kode di bawah ini di atas kode </head> atau </body>

<script type=’text/javascript’>
//<![CDATA[
// Show and Hide Comments
function showComm(e){document.getElementById(e)&&(“none”!=document.getElementById(e+”-show”).style.display?(document.getElementById(e+”-show”).style.display=”none”,document.getElementById(e).style.display=”block”):(document.getElementById(e+”-show”).style.display=”block”,document.getElementById(e).style.display=”none”))};
//]]>
</script>

4. Cari kode semua kode  <div class=’comments’ id=’comments’>, (gunakan ctrl+F untuk mempercepat pencarian) dan ganti dengan kode dibawah ini:

<a href=”#” id=”comments-show” class=”showcontent” onclick=”showComm(‘comments’);return false;”>Show comments</a>
<div class=’clear’/>
        <div class=’comments hide-content’ id=’comments’>
<a href=”#” id=”comments-hide” class=”hiddencontent” onclick=”showComm(‘comments’);return false;”>Hide comments</a>
<div class=’clear’/>

5. Save template dan lihat hasilnya.

DEMO Show Hide Komentar di Blog

LIVE DEMO

Show Hide Komentar di Blogger V.2

1. Masuk ke Edit HTML Template Blogger kamu
2. Letakan kode di bawah ini di atas kode ]]></b:skin> atau </style>

a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#222; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;
 }a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:10px solid transparent;border-top-color:#222;
 }a.openpanel.active {background-color:#d32301;}a.openpanel.active em {top:13px;border color:#d32301;
 }div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}

3. Selanjutnya letakan kode di bawah ini di atas kode </head> atau </body>

<script type=’text/javascript’>
 //<![CDATA[
 var panelSelector = ‘#comments’,
 openPanelText = “Show comments”,
 closePanelText = “Hide comments”,
 slideDownPanelSpeed = 800,
 slideUpPanelSpeed = 300;
 //]]>
 </script>
 <script type=’text/javascript’>
jQuery(function() {
    jQuery(panelSelector).hide()
        .addClass(‘hompiPanel’)
            .before(‘<a class=”openpanel” href=”#”>’ + openPanelText + ‘<em></em></a>’)
                .after(‘<div class=”paneline”></div>’);
    jQuery(‘a.openpanel’).toggle(function() {
        jQuery(this).addClass(‘active’).html(closePanelText + ‘<em></em>’);
        jQuery(‘div.hompiPanel’).slideDown(slideDownPanelSpeed);
        return false;
    }, function() {
        jQuery(this).removeClass(‘active’).html(openPanelText + ‘<em></em>’);
        jQuery(‘div.hompiPanel’).slideUp(slideUpPanelSpeed);
        return false;
    });
});
 </script>

7. Simpan template dan lihat Hasilnya

Note:

• Angka 800 kecepatan untuk menutup kotak komentar
• Angka 300 kecepatan untuk membuka kotak komentar
• Silahkan anda atur warna panel kotak show hide sesuai keinginan pada kode CSS

Bagaiman sobat mudah bukan?semoga kamu berhasil membuat dan memasang show-hide komentar di Blogger . Selamat mencoba.

Diposkan oleh

Brando Mewo

You Might Also Like: