Recent Coments Teranyar Dengan Animasi Slide

Karena Screen Shot ini hanya sebuah gambar biasa tentunya agan tidak dapat melihat lansung animasi yang ditampilkan oleh recent coment ini untuk itu silahkan dicoba dulu untuk menerapkan di blog anda dan lihat bagaimana animasinya....

Pada postingan ini saya akan membagikan sutu tips menarik yang saya dapat beberapa waktu lalu ketika berkunjung ke mkr-site.blogspot.com sebuah recent coment cantik dengan animasi slide akan hadir di blog anda dengan beberapa kode tambahan diwilayah  ]]></b:skin>  ok gan dari pada penasaran mending lansung ke tutorialnya saja...

Masuk blog anda
pilih menu template/edit html
kemudian cari kode ]]></b:skin> seperti yang saya bilang tadi gunakanlah ctrl + f
jika sudah ketemu letakan kode dibawah ini tepat diatas tag ]]></b:skin>

.loadingxrcm {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xRDCvR_goHBUkGqlKcbrrBCjtDiKfV-jVECmQvf-EBzp3tE1Isrx2CDa4kT9MFNyE5AtSAIu9Je6oJEylSagBZ-nwRcaQ7LUCVBQm2sW7sf1yzBW1aVJFVyT7X5VxKlCNYYofS8rkfI/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}

Selesai dibagian edit html save template anda terlebih dahulu
dan kita beralih ke menu tata letak/add gadged
kemudian copas kode dibawah ini pada box yang tersedia

 <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:"http://ngeblogbarengbareng.blogspot.com/",
adminBlog:"arieadie"
});
});
//]]>
</script>

Catatan : Untuk kode berwarna kuning anda boleh tidak memakainya jika sudah terdapat
               sebelumnya ditemplate anda
               Untuk kode berwarna merah saya kira sobat paham untuk menggantinya...

Sekian untuk penjelasan Recent_coment nya selamat mencoba semoga bermanfaat.....