Membuat Komentar Terbaru Pada Blog Dengan Efek Animasi

Halo sob...
Moga yang datang dan baca panjang umur, hehehehe...

Kalo sebelumnya saya posting mengenai Cara Menampilkan Sumber Link Otomatis Saat Tulisan Di Copy Paste, maka kali ini postingannya ga kalah menarik sob terutama buat blogger yang emang suka ngeliat blog nya tampil keren, hehehehe...

Kali ini postingan nya mengenai cara membuat komentar terbaru / recent comments agar bisa tampil dengan lebih animatif bukan sekedar tampilan biasa seperti yang telah disediakan oleh blogger.com.

Cara nya juga gampang kok sob, dan tampilannya kira-kira seperti ini :

Widget ini sendiri saya dapat dan pelajari dari blog MKR- Site (makasih sob udah berbagi widget keren..) dimana di sana terdapat 2 pilihan theme apakah dark atau light. Saya ambil salah satu, yakni yang light dan kemudian saya sedikit kustomisasi dan jadilah tampilan recent comments seperti diatas, hehehehe...

OK langsung aja sob:

1. Login dulu sob ke blogger...:D

2. Pilih Tata Letak - Tambahkan Gadget - HTML/Javascript dan masukkan script berikut :

<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:7,
url_blog:"URL Anda",
adminBlog:"Nama Akun Anda/google+"
});
});
//]]>
</script>

3. Selanjutnya, masuk ke halaman Template dan pilih Edit HTML.

4. Jangan lupa backup dulu template nya sob, setelah itu masukkan kode CSS dibawah ini sebelum ]]></b:skin>.

.loadingxrcm {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbGqD1WO453cBuDIhza10B98BjDA2rZv1dBPCodMA28vfEAPrYDm-EoYPZYUH4ZcXmqXV9eDsIyAhyphenhyphenic7qHr0V3EmUzMGqAPUW_B5cxH6ARpB8je9kx90JzA6cnBKnOKaA2nb-X2me0B8/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:#F5D0A9;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:#F5A9F2;font-weight:bold;overflow:hidden;background:#F5D0A9;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}

5. Nah,kalo udah Simpan Template.

Tadaaaa,, akhirnya recent comments / komentar terbaru nya udah ada sob dengan efek animasi lagi, hehehe...

Oiya sob, kalo mau kustomisasi tinggal edit edit aja tuh kode CSS nya sesuai yang temen-temen mau bisa ganti warna nya dan lain-lain. Untuk ganti warna dengan warna yang temen-temen mau bisa liat kode nya disini.

Oke, terima kasih udah berkunjung sob, jangan lupa kasih komentar dibawah. Happy blogging.....:)