Menambah Tombol Add Comment jQuery

Menambah Tombol Add Comment jQuery - Prosedur ini sangat cocok bagi Blog yang mempunyai komentar banyak. Para pembaca umumnya sangat kesal, karena pembaca harus menarik kebawah slider atau scrool kebawah untuk memulai menulis komentar. Hal ini memang menyebalkan. Tapi tenang saja. Hal tersebut dapat dipecahkan dengan Menambahkan Tombol Add Comment efek jQuery. Berikut langkah langkah untuk menambahkannya.

Lihat screenshot :

Cara menambahkannya :
1. Login ke blogger.com
2. Klik Rancangan / Design >> Klik Edit HTML
3. Centang Expand Widget Template
4. Cari kode ]]></b:skin>
5. Masukkan kode CSS dibawah ini diatas kode ]]></b:skin>

a.add_comment{text-decoration:none;color:#fff}<br /> .add_comment{float:right;padding:6px 10px;margin:20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;text-align:center;display:inline-block;background:#d43131;background:-moz-linear-gradient(top,#ffaa9a,#f8674b 5%,#d54746);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffa493),color-stop(.03,#f8674b),to(#d54746));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746')";-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #d1371c;border-bottom:1px solid #9f220d;color:#FFF;text-shadow:0 1px 1px #6f3a02}<br /> .add_comment:hover{background:#c92929;background:-moz-linear-gradient(top,#ff9986,#ee5f43 5%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fa8772),color-stop(.03,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443')";border-bottom:1px solid #9f220d}<br /> .add_comment:focus{padding:7px 11px;color:#FFF;text-shadow:0 -1px 1px #894906;border:none;background:#bc2323;background:-moz-linear-gradient(top,#d04443,#ee5f43 95%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d04443),color-stop(.9,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43')";box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-webkit-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-moz-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7}

6. Cari kode <b:includable id='comments' var='post'>
7. Masukkkan kode dibawah ini dibawah kode <b:includable id='comments' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='add_comment' href='#comment-form'>Add a comment</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$('.add_comment').click(function(){$('html,body').animate({scrollTop:$(".comment-form").offset().top},1000);});</script></b:if>

Note :
- Ganti Add a comment dengan kata yang ingin ditampilkan. 
- 1000 adalah angka kecepatan Slider jQuery.

8. Klik  SIMPAN TEMPLATE