Membuat Show Hide Komentar di Blog Ala Mas Yoga

Hay Sahabat MY Blog

Membuat Show Hide Komentar di Blog Ala Mas Yoga, Siang ini Mas Yoga akan membagikan Tutorial buat artikel di blog sobat. Tahukah sobat dengan Komentar? komentar merupakan sebuah fitur blog yang di gunakan untuk melakukan Apresiasi (penilaian) yang di berikan oleh pengunjung blog sobat. Pasti fitur Komentar sangat penting buat blog. Tapi pernahkah komentar blog sobat sangat banyak, sampai ke bawah hingga ratusan meter :D,, pasti di bilang tidak rapi kan?? jadi Pas sekali, Mas Yoga akan memberikan tutorialnya, dan menjawabnya di sini, agar komentar blog sobat tidak sampai ratusan-ratusan meter, bahkan kilometer. hehehehe

Yuk kita ke tutorialnya :)

1. Masuk ke blogger, setelah itu ke menu template, kemudian klik edit HTML.
2. Selanjutnya, Pastikan di blog sobat sudah terpasang kode Jquery-nya ya,,, supaya proses pembuatannya lancar, tapi jika di blog sudah terpasang Jquery-nya. sobat blogger boleh loncat ke tutorial selanjutnya :)
pasang kode jquery ini di atas </head> ataupun </body>,,, tapi lebih baik </body> aja

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

3. Setelah kode jquery terpasang di blog sobat. lanjut ke langkah 3, yaitu memasang kode CSS di blog sobat, biar tampilan show hide jadi keren.
Taruh kode di bawah ini sebelum 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:#34495e;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s} #comments a.hiddencontent {background:#34495e;color:#acb3b8;transition:all .3s} a.showcontent:hover{background:#fff;color:#34495e;} #comments a.hiddencontent:hover{background:#34495e;color:#fff;}

4. Jika kode CSS sudah terpasang, lanjut ke langkah 4, yaitu pasang kode di bawah ini sebelum tag penutup </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>

5. Sampai di sini, Java script, CSS, dan jquery semuanya sudah terpasang. Yuk lanjut ke langkah 5, yaitu cari kode <div class='comments' id='comments'>, lebih cepat gunakan CTRL+F untuk mencarinya. jika sudah ketemu, ganti dengan kode di bawah 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'/>

6. Proses pemasangan sudah selesai, dan jangan lupa di simpan ya sobat blogger. Dan jika sudah selesai, maka akan menjadi seperti ini ;

Membuat Show Hide Komentar di Blog Ala Mas Yoga

Selamat Mencoba sobat,,, praktekan dulu lalu bertanyalah jika merasa kesulitan.
Mohon Maaf jika ada kesalahan dalam penulisan kata, Terima Kasih juga sudah menunggu selalu updetan dari Mas Yoga.
lihat demonya juga bisa sobat blogger ;

• Demo

Tunggu updetan selanjutnya sahabat MY Blog :)
Sampai Jumpa