February 11, 2013

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(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:#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.....:)



14 comments

  1. makasih bang,,,new bie sangat bermanfaat buat q,,,
    lam kenal?

    ReplyDelete
  2. bang minta bantuanya buat review blog ane ,,,
    http:prastypunya.blogspot.com

    ReplyDelete
    Replies
    1. ok sob, saya review sebisa saya... (-.-,)

      Delete
  3. Sudah saya terapkan di blog saya sob.trima kasih.

    BRAVO JUVENTUS....Juve per sempre sara

    ReplyDelete
    Replies
    1. sama-sama sob... :-d
      forza juve... *=p

      Delete
  4. Tutorial yg sangat simple dan perlu diterapkan diblog.trima kasih.

    *FORZA JUVE

    ReplyDelete
    Replies
    1. sama-sama sob...
      wah banyak juga temen-temen blogger juventini yah... :-d

      Delete
  5. http://reader-download.googlecode.com/svn/trunk/images/emo/smile.gif

    ReplyDelete
  6. bermanfaat bgt ne, plagi buat yg lg belajar..
    thank'z yaa..

    ReplyDelete
  7. Terima kasih sukses selalu http://onestoppayment.com dan http://ppobmultipayment.com

    ReplyDelete