Widget Komentar Terbaru Blogspot Efek Animasi

Widget Komentar Terbaru Blogspot Efek Animasi

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:

Pemasangan Widget

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

Tata letak Blogger
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>.

.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}
.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;padding:0 8px;background:#252525;color:white;border:1px solid black;border-top:1px solid #353535}
ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#020202;border:0;float:left;margin:5px 5px 0 0}
ul#kmtranimasi .ketkomt{overflow:hidden}
ul#kmtranimasi .ketkomt a{display:block;color:black;font-weight:bold;overflow:hidden;background:#ECECEC;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:black}
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.

Satank Mkr Beri Komentar
Design by MKRSite Copyright © 2012 ~ 2017 Powered by Blogger