Memasang Show Hide pada Komentar Blog

Memasang Show Hide pada Komentar Blog - Sahabat hanya blogger pada postingan sebelumnya saya telah membahas mengenai cara Membuat Efek Loading di Blog, nah pada hari ini saya akan kembli berbagi sedikit ilmu yang saya dapat hari ini yakni tentang cara Memasang Show Hide pada Komentar Blog, untuk lebih jelasnya lagi silahkan lihat sepert pada gambar di bawah ini pada blog saya :
Memasang Show Hide pada Komentar Blog
Nah dengan Memasang Show Hide pada Komentar otomatis form komentar dan komentar yang telah ada akan tersembunyi, namun ketika gambar di klik form dan komentar akan kembali seperti semula. baiklah jika anda ingin Memasang Show Hide pada Komentar blog ikuti langkah langkah berikut ini. 

Pertama pastikan di template blog anda telah disisipkan jquery, jika sudah letakkan code dibawah ini tepat di atas </head>
   <style>
    #comments {display : none;}
    .comment_container {background: #none;padding: 0;}
    #comments {display : none;}
    .comment_container {background: #none;padding:0;}
    a.show_comments{font-weight:bold;text-shadow: 0px 1px #fff;background:#d3d3d3;color:#444;box-shadow:inset 0 1px 0 0 #fff;border:1px solid #888;padding:2px 10px;-moz-border-radius:1px 1px 1px 1px;-khtml-border-radius:1px 1px 1px 1px;-webkit-border-radius:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;display:block;padding:10px;margin-bottom:10px;text-align:center;}
    a.show_comments:hover{background: #d4d4d4 ;display:block;padding:10;color:#777;}
    a.active.show_comments{background: #d4d4d4}
    </style>

    <script type='text/javascript'>
    $(document).ready(function(){$(".show_comments").click(function(){$("#comments").slideToggle("slow");$(this).toggleClass("active");return false})});
    </script>

Kemudian temukan code  <b:includable id='comments' var='post'> lalu letakkan script di bawah ini tepat di atasnya :
    <div class='comment_container'>
        <a class='show_comments' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
            <b:if cond='data:post.numComments == 0'> Belum ada komentar untuk &quot;<data:blog.pageName/>&quot;<b:else/>
            <b:if cond='data:post.numComments'> <data:post.numComments/> komentar untuk &quot;<data:blog.pageName/>&quot; </b:if></b:if>
        </a>
    </div>
Jika semua langkah sudah di lakukan simpan template untuk melihat hasilnya.