Lama sudah tidak menulis artikel lagi di blog ini, tidak seru juga blog tidak update-update, cari-cari yang sekiranya apa yang belum saya postingkan, saya postingkan hari ini mumpung lagi liburan kuliah.
Sobat Blogger Sudah pernah lihat menu bagian dari komentar blog kita buat tambahan Menu show/hide? atau jelasnya seperti menu dengan tombol untuk membuka dan menutup menu yang kita inginkan, dan untuk sekarang saya coba terapkan pada Menu Form Komentar.
Untuk Demonya bisa dilihat di blog saya
disini
- Login blogger
- Rancangan, Edit Html
- Download Template Lengkap
- Centang menu Expand Template Widgets
- 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(){
$(".tombol-komentar").click(function(){
$("#comments").slideToggle("slow");
$(this).toggleClass("active");
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(){
$(".tombol-komentar").click(function(){
$("#komentardisqus").slideToggle("slow");
$(this).toggleClass("active");
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.
Title : Show/Hide pada Menu komentar dengan jquery
Description : Lama sudah tidak menulis artikel lagi di blog ini, tidak seru juga blog tidak update-update, cari-cari yang sekiranya apa yang belum saya ...