Show/Hide pada Menu komentar dengan jquery

Menu show/hide? atau jelasnya seperti menu dengan tombol untuk membuka dan menutup menu yang kita inginkan, dan untuk sekarang saya jelaskan sedikit caranya :

1. Login blogger
2. Rancangan, Edit Html
3. Download Template Lengkap
4. Centang menu Expand Template Widgets
5. Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya :

#comments {
display : none;
}
.tombol-komentar a{
text-align: center;
}
.stylewadah {background: #CCC;
padding: 5px;
}

6. Berikutnya simpan Script berikut 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(){
    $(&quot;.tombol-komentar&quot;).click(function(){
        $(&quot;#comments&quot;).slideToggle(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;);
        return false;
    });
});
</script>

7. Cari kode seperti dibawah ini (ctrl+F untuk mempermudah pencarian) :

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

8. Jika sudah ketemu simpan kode berikut dibawah kode yang dicari 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'>No Comments be the first<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>

9. Simpan template dan lihat hasilnya. Silahkan dikembangkan sesuai keinginan. Semoga bermanfaat.


Cara pemasangan untuk pihak ketiga (contoh pada disquss)

1. Simpan style berikut diatas kode ]]></b:skin> :

 #komentardisqus {
display: none;
}
.tombol-komentar a{
text-align: center;
}
.stylewadah {background: #CCC;
padding: 5px;
}

2. Simpan Script berikut 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(){
    $(&quot;.tombol-komentar&quot;).click(function(){
        $(&quot;#komentardisqus&quot;).slideToggle(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;);
        return false;
    });
});
</script>

3. Tambahkan kode berwarna biru pada script disquss sehingga seperti ini:

<center>
<div class='stylewadah'><a class='tombol-komentar' href='#disqus_thread'/></div>
</center>
<div id='komentardisqus'>                       
<div id='disqus_thread'/>
<script type='text/javascript'>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
.............................................................................
.............................................................................

<noscript>Please enable JavaScript to view the <a href='http://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>
<a class='dsq-brlink' href='http://disqus.com'>blog comments powered by <span class='logo-disqus'>Disqus</span></a>

</div>

4. Simpan dan lihat hasilnya.