Cara memasang tombol "Show hide" pada komentar Blog

HaiSob apa kabar? pada kesempatan ini haisob.com akan berbagi tutorial cara membuat dan memasang efek show hide pada komentar blog Blogger. Mungkin sobat ingin merapikan tampilan blog sobat, atau mungkin saja ingin blog terlihat lebih wow, atau mungkin saja sobat melihatnya di blog orang dan tertarik ingin memasangnya juga, atau alasan lainnya sehingga ingin memasang efek "Show hide" pada komentar blog sobat.

Dengan menambahkan fungsi ini pada komentar dapat menghemat ruang yang terpakai ketika nantinya banyak komentar yang masuk pada postingan di blog, misalnya komentar Blog yang banyak dan memanjang kebawah, dengan menambahkan ini setidaknya blog bisa terlihat lebih rapi.

Cara memasang tombol Show hide pada komentar blog Blogger


Cara memasang tombol Show hide pada komentar di Template Blogger
Show hide


Sebelumnya usahakan sudah terpasang jQuery di template blog kamu, misalnya:
<script src='http://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.




Efek Show Hide V1


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.

Efek Show Hide V2


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 kamu atur warna panel kotak show hide sesuai keinginan pada kode CSS
Bagaimana sobat mudah bukan?. Selamat mencoba.
Join This Site