cara merubah kotak komentar menjadi slide.kotak komentar sangatlah penting keberadaan nya di sebuah blog,karna dengan kotak komentar akan mendekatkan kita selaku pemilik atau admin di blog kita sendiri dengan para pengunjung blog yang kebingungan dengan apa yang kita tulis di postingan ataupun pengunjung blog yang sekedar mengucapkan terima kasih atas postingan dari admin sebuah blog yang sudah membantu dari apa yang mereka cari di internet. dengan kotak komentar juga bisa membuat sebuah blog menjadi hidup dan lebih indah dengan kata kata dari para pengunjung blog nya.
nah sekarang bagaimana cara memodifikasi kotak komentar,agar tampilan nya tidak monoton, supaya para pengunjung menjadi lebih tertarik dengan kotak komentar yang ada di blog kita.
ini adalah sebagian cara untuk mempercantik ataupun mendesign kotak komentar di blog
1. pertama tama login ke akun blogger anda,trus klik template ->edit HTML.
trus cari kode <head> dengan menggunakan F3 atau pun ctrl-F, agar mempermudah pencarian.
trus copy paste kode ini, di bawah kode <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_container").hide();
$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
2. trus cari kode ]]></b:skin>
dan simpan kode ini di bawah kode ]]></b:skin>
/*----- Comment Box by www.MybloggerTricks.com ----*/
h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em; font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}
untuk menyesuaikan ukuran lebar dan tinggi tombol show hide kotak komentar nya.
edit yang 518px.
3. selanjutnya cari kode: <b:includable id='comment-form' var='post'>copy paste
kode ini di bawah kode <b:includable id='comment-form' var='post'>
<h3 class='trigger'>TULISAN TOMBOL ANDA</h3>
<div class='toggle_container'>
<div class='block'>
untuk yang "tulisan tombol anda" ubah sesuai keinginan anda.
4. selanjutnya cari kode </b:includable>
copy paste kode ini di atas </b:includable>
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>
</div>
</div>
lihat gambar untuk tempat meletakan kode ke 4 yang benar.
jika semua kode nya sudah di masukan,terus save template dan lihat hasil nya.
sumber
nah sekarang bagaimana cara memodifikasi kotak komentar,agar tampilan nya tidak monoton, supaya para pengunjung menjadi lebih tertarik dengan kotak komentar yang ada di blog kita.
ini adalah sebagian cara untuk mempercantik ataupun mendesign kotak komentar di blog
1. pertama tama login ke akun blogger anda,trus klik template ->edit HTML.
trus cari kode <head> dengan menggunakan F3 atau pun ctrl-F, agar mempermudah pencarian.
trus copy paste kode ini, di bawah kode <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_container").hide();
$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
2. trus cari kode ]]></b:skin>
dan simpan kode ini di bawah kode ]]></b:skin>
/*----- Comment Box by www.MybloggerTricks.com ----*/
h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em; font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}
untuk menyesuaikan ukuran lebar dan tinggi tombol show hide kotak komentar nya.
edit yang 518px.
3. selanjutnya cari kode: <b:includable id='comment-form' var='post'>copy paste
kode ini di bawah kode <b:includable id='comment-form' var='post'>
<h3 class='trigger'>TULISAN TOMBOL ANDA</h3>
<div class='toggle_container'>
<div class='block'>
untuk yang "tulisan tombol anda" ubah sesuai keinginan anda.
4. selanjutnya cari kode </b:includable>
copy paste kode ini di atas </b:includable>
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>
</div>
</div>
lihat gambar untuk tempat meletakan kode ke 4 yang benar.
jika semua kode nya sudah di masukan,terus save template dan lihat hasil nya.
sumber
9 out of 10 based on 10 ratings. 9 user reviews.