Cara memasang tombol Show hide pada komentar Blog Versi 1

Hai Sahabat, saya disini akan berbagi tutorial cara membuat dan memasang efek show hide pada komentar blog Blogger. Mungkin sobat ingin merapikan tampilan blog sahabat, atau mungkin saja ingin merapikan tampilan, atau mungkin saja sahabat 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.

langsug saja berikut ini adalah langkah-langkahnya :

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.

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

.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#3498db;font-weight:700;font-size:19px Arial;padding:16px 0;background:#fff;border:1px solid #3498db;text-align:center;margin-top:17px;margin-bottom:10px; letter-spacing:1px;transition:all .13s;overflow:hidden;box-shadow:0 2px 2px #999;}
#comments a.hiddencontent {background:#3498db;color:#fff;transition:all .13s}
a.showcontent:hover{background:#3498db;color:#fff;font-size:19px Arial;padding:16px 0;}
#comments a.hiddencontent:hover{background:#fff;color:#3498db;}

3. Selanjutnya letakan kode di bawah ini di atas kode </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>

5. Save template dan lihat hasilnya.

Bagaimana sobat mudah bukan?. Selamat mencoba.

By Brando Mewo

Untuk versi yang ke dua sahabat bisa melihatnya di link berikut,

source :http://www.haisob.com

Baca Juga