Membuat Komentar Terbaru Pada Blog Dengan Efek Animasi

Advertisement

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/AVvXsEg2BF9aAlh3mityf7bb2WirYCjtnc4ZnDWiGnC83JvqiNJ6iIUmrDVXOX7epzwxWQclZ7RSw23R_PjYyHlDBG85liBVYCWbJ89IcSDPfybxYXXrTsnn9keG8DkaDQkK_27CNsOuPQ7InR4/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.....:)