ShowHide pada kotak Komentar
ShowHide pada kotak Komentar
Tips menghias blog ‘showhide pada kotak komentar’ . Posting terbaruku , untuk membuat tampilan komentar yang menarik Anda bisa memakai cara yang satu ini .
Oke, tanpa basa-basi langsung aja ke stepnya.
PERTAMA
Login ke akun blogger , masuk ke ‘Template’ > pilih ‘cadangkan/pulihkan’ > lalu Download Template lengkap’
KEDUA
Masuk ke edit template > Centang
Expand Template Widget
Lalu cari kode ini
]]></b:skin>
Lalu paste
#comments {
display : none;
}
.show-hide a{
text-align: center;
}
.ramastyle {background: #CCC;
padding: 5px;
}
display : none;
}
.show-hide a{
text-align: center;
}
.ramastyle {background: #CCC;
padding: 5px;
}
Lalu cari kode
</head>
Simpan kode script dibawah ini tepat diatas kode tadi
<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>
<script type='text/javascript'>
$(document).ready(function(){
$(".tombol-komentar").click(function(){
$("#comments").slideToggle("slow");
$(this).toggleClass("active");
return false;
});
});
</script>
Langkah terakhir...
Cari lagi kode dibawah ini
</b:includable>
<b:includable id='comments' var='post'>
<b:includable id='comments' var='post'>
Lalu letakkan kode ini dibawahnya
<center>
<div class='ramastyle'>
<a class='show-hide' 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>
<div class='ramastyle'>
<a class='show-hide' 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>
Save . Dan sekarang lihat hasilnya .
Selamat mencoba
^_^
Weitsss kok masih 0 komentar: