Mengganti Kotak Komentar Blog Menjadi Keren

Sebuah blog pada umumnya dilengkapi tempat untuk berkomentar dimana pengunjung dapat memberikan komentar terhadap artikel yang dibacanya. Biasanya didalam form komentar juga terdapat informasi yang penting, karena bisa sebagai salah satu tempat saling berbagi informasi. Serta tempat bagi pemilik blog dalam menjawab pertanyaan diblog mereka.

Untuk melihat ada tidaknya komentar baru, pada umumnya blogger memasangkan widget komentar dibagian sidebar. Nah kali ini saya akan membagikan widget komentar terbaru dengan animasi dan admin kontrol. Berbeda dengan widget sebelumnya, widget kali ini dilengkapi dengan avatar serta saya memberikan efek animasi yang hampir sama dengan widget posting terbaru dengan animasi.
Dalam pemasangan diblog anda ikuti langkah berikut:

DEMO Tampilan

Pemasangan Widget

Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu Tata Letak:

Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ivyth.googlecode.com/svn/js/rckmtr-dgn-animasi.js" type="text/javascript"></script>
<div id="rcentcomnets"><span class="loadingxrcm">Loading...</span></div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
rccommnetsx({
id_containrc:"#rcentcomnets",
animatedRecentcomments:true,
numComments:10,
url_blog:"URL_blogmu",
adminBlog:"nama_akun blogger/google+"
});
});
//]]>
</script>

NB: Jika di template anda sudah ada jQuery library maka kode ini <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> tidak perlu dicopy.

Themes (CSS)

Selanjutnya ke Blogger > Settings > Template. NB: BackUp terlebih dahulu Template Anda lalu klik Edit HTML > Proceed.

Kemudian letakkan salah satu kode CSS di bawah sebelum ]]></b:skin>.

• Light Themes
• Dark Themes

.loadingxrcm {background:transparent url(http://2.bp.blogspot.com/-Hus9BJOr9-8/UOsgyp7_8rI/AAAAAAAAH34/g2TQbl7GcsY/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;}
ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif}
ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative}
ul#kmtranimasi li{text-indent:0;height:90px;background:whiteSmoke;padding:0 8px;border:1px solid #DFDFDF;border-top:1px solid white}
ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#383838;border:0;float:left;margin:5px 5px 0 0}
ul#kmtranimasi .ketkomt{overflow:hidden}
ul#kmtranimasi .ketkomt a{display:block;color:white;font-weight:bold;overflow:hidden;background:#363636;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;}
ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:white}
ul#kmtranimasi p{margin:15px 0 0}

Opsi-Opsi

Opsi

Keterangan

url_blog

Diisi dengan url dari blog contoh: url_blog:"http://mkr-site.blogspot.com".

id_containrc

ID tempat widget akan ditampilkan misal: <div id="rcentcomnets"><span class="loadingxrcm"></span></div> maka id_containrc:"#rcentcomnets".

numComments

Jumlah komentar yang akan ditampilkan, default:6

avatarSize

Ukuran avatar yang tampil, default 50.

animatedRecentcomments

Jika bernilai true maka animasi/efeknya akan aktif, default false.

limitspyrkm

Jumlah komentar yang tampil jika animasi aktif, default 4.

intervalspyrkm

Kecepatan animasi slidedown (dalam milidetik), default 4000

tickspeedrkm

Kecepatan transisi fadeIn (dalam milidetik),default 1000 .

characters

Panjang karakter/jumlah huruf yang ingin ditampilkan, default 100 .

defaultAvatar

Avatar yang muncul jika yang memberi komentar tidak memiliki avatar misalnya pada Anonim, default "http://4.bp.blogspot.com/-AEWksK942OE/UFiyLzXJhiI/AAAAAAAAFKE/jBegaGPClxI/s70/user-anonymous-icon.png".

maxfeeds

Maksimal jumlah feed yang dicari, default 50. NB: Semakin banyak loading widget akan semakin lambat

adminBlog

Jika tidak ingin menampilkan komentar admin blog diisi dengan nama admin blog, contoh adminBlog:"Satank Mkr".

NB: Sebaiknya file JS disimpan di google code anda sendiri. Jika ingin tahu cara menyimpannya di google code silahkan ke tutorial Menyimpan file di Google Code.