Cara Mudah Membuat Show Hide Komentar Dengan jQuery

Gimana kabarnya sob? 'CS yakin sobat pasti dalam keadaan baik. Dalam cuaca terik dan ditemani sepiring rujak, sekarang 'CS mau memberikan trik bagaimana menyembunyikan kolom komentar. Trik ini keren dipasang pada blog, kenapa dibilang keren? Karena masih jarang blogger-blogger lain yang memasangnya, kalo orang jerman bilang "Tampil Beda Gitu Loh....!" Yau udah, daripada kebanyakan cingcong kita intip langsung cara mudah membuat show hide komentar dengan jQuery. Mangga disimak!

Baca juga cara mudah membuat animasi sidik jari scanner keren pada blog

1. Pertama, sobat login dulu ke Blogger

2. Pilih Template ► Edit HTML

3. Cari Kode ]]></b:skin>

4. Pasang kode dibawah ini diatas kode ]]></b:skin>

#comments {
display : none;
}
.stylewadah {background: #none;
padding: 5px;
}
a.tombol-komentar{background: #f4f8fc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIQsWLdf-fIicNbqUdPldndV9b9sOF8JAMkf_sV7kmwFwTIe4NmkWZ0D2Yi19VXa3CUyV8XgbggDfBWg070TIOqYXUAWgTnNGx7dwpu5nXlV_fGro3nUqhyphenhyphenQSj85YlAN3z0IEF-1UzQEmc/z389/copasange+plus.gif) 85% 55% no-repeat;display:block;padding:15px 40px 15px 15px;border:1px solid #000000}
a.tombol-komentar:hover{background: #7FFF00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIQsWLdf-fIicNbqUdPldndV9b9sOF8JAMkf_sV7kmwFwTIe4NmkWZ0D2Yi19VXa3CUyV8XgbggDfBWg070TIOqYXUAWgTnNGx7dwpu5nXlV_fGro3nUqhyphenhyphenQSj85YlAN3z0IEF-1UzQEmc/z389/copasange+plus.gif) 85% 55% no-repeat;display:block;padding:15px 40px 15px 15px;border:2px dashed #000000;}
a.active.tombol-komentar{background: #f4f8fc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuS-rfYGPJXboxxJ-B-t8TF3UomyZlsrFtA1EGJgRhzlgmM9cEZp58lLdbH_6L1a9rhny7Kilr-s2G_q3R6lIVHTkVmEpl0vGSKd2WNFvQ0oytTFtlANz6XcUiiHnYW8dBa1Uzlja9VCWB/z389/copasange+minus.gif) 85% 55% no-repeat;border:1px solid #000000}

5. Kemudian cari kode </head>

6. Pasang kode dibawah ini diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    $(".tombol-komentar").click(function(){
        $("#comments").slideToggle("slow");
        $(this).toggleClass("active");
        return false;
    });
});
</script>

7. Selangkah lagi sob, sekarang cari kode seperti kode ini <b:includable id='comments' var='post'>

8. Jika sudah ketemu, pasangkan kode dibawah ini tepat setelah kode tadi

<center>
<div class='stylewadah'>
<a class='tombol-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>Silahkan Luangkan Waktu Sobat Untuk Berkomentar Disini !<b:else/><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></b:if>
</a>
</div>
</center>

8. Simpan dan lihat hasilnya

Demikian cara mudah membuat show hide komentar dengan jQuery, semoga dapat membantu dan bermanfaat. Terima kasih atas kunjungannya.

► Copas Sange ◄

Sobat sedang membaca artikel tentang Cara Mudah Membuat Show Hide Komentar Dengan jQuery. Jika sobat ada pertanyaan atau pesan mengenai artikel diatas, salurkan pada kolom berkomentar !! Dan untuk mendapatkan tambahan pahala, silahkan LIKE and SHARE ♂

<a href="http://copasange.blogspot.com/2016/04/cara-mudah-membuat-show-hide-komentar.html" target="_blank">Cara Mudah Membuat Show Hide Komentar Dengan jQuery</a>

:: Salam Blogger ! ::