Cara Membuat Show Hide komentar dengan jquery

Masih di Variasi Blogger share Cara Membuat Show Hide komentar dengan jquery cekidot

Silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik Edit HTML >> centang Expand Template Widget , kemudian tekan ctrl + F paste script ]]></b:skin> jika sudah ketemu silahkan Copy Paste script dibawah ini dan simpan sebelum kode tadi

#comments {
display : none;
}
.stylewadah {background: #none;
padding: 5px;
}
a.tombol-komentar{background: #f4f8fc  url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif) 85% 55% no-repeat;display:block;padding:15px 40px 15px 15px;border:1px solid #000000}
a.tombol-komentar:hover{background: #7FFF00  url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif) 85% 55% no-repeat;display:block;padding:15px 40px 15px 15px;border:2px dashed #000000;}
a.active.tombol-komentar{background: #f4f8fc url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/minus.gif) 85% 55% no-repeat;border:1px solid #000000}

Kemudian silahkan cari kembali kode script </head> jika sudah ketemu silahkan simpan kode di bawah ini sebelum </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(){
    $(&quot;.tombol-komentar&quot;).click(function(){
        $(&quot;#comments&quot;).slideToggle(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;);
        return false;
    });
});
</script>

Satu langkah lagi sobat cari kembali kode script di bawah ini

</b:includable>
<b:includable id='comments' var='post'>

jika sudah ketemu silahkan tambahkan kode di bawah ini sesudah kode script 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 Di Artikel Ini<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>

Simpan Template , oia sobat bisa utak - atik kembali tampilannya sesuai selera sobat , semoga berhasil dan bermanfaat

Share to

 â