Widget Komentar Terbaru Dengan Avatar Berputar

Sahabat blogger pemula tentunya sering melihat sebuah blog yang memiliki widget komentar terbaru / recent comment, hal ini selain berfungsi sebagai pelengkap blog agar lebih interaktif juga memiliki manfaat di antaranya untuk memudahkan admin atau pemilik blog membalas komentar yang belum sempat terjawab. Admin atau pemilik blog bisa memantau komentar secara berkala sehingga tidak ada komentar yang terlewatkan.

Widget komentar terbaru memiliki banyak penampilan salah satunya sudah pernah blogger pemula bahas di artikel sebelumnaya. Nah untuk melengkapi pilihan penampilan pada kesempatan kali ini saya akan share cara membuat widget komentar terbaru dengan efek avatar berputar, dimana ketika ada komentar masuk maka akan secara otomatis widget ini menampilkan, kurang lebihnya penampilanya seperti gambar disamping.

Keunikan dari widget ini adalah memliki efek avatar yang berputar apabila mouse di arahkan ke salah satu foto komentator, keren kan?

Nah untuk sahabat blogger pemula yang merasa tertarik untuk memasang widget komentar terbaru dengan avatar berputar ini sahabat bisa melakukan beberapa langkah sederhana berikut ini :

• Login ke akun blogger sobat
• Setelah login silahkan sobat masuk ke pengaturan Tata Letak

• Tentukan letak widget dengan mengklik Tambahkan Gadget
• Selanjutnya pilih HTML/JavaScript

• Isi judul sesuai dengan keinginan (misal komentar sahabat)
• Masukkan kode di bawah ini pada kolom konten

<style type="text/css">
ul.lavixta_recent_comments{list-style:none;margin:0;padding:0;}
.lavixta_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.lavixta_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;
border-radius:999px;
-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;}
.lavixta_recent_comments li .avatarImage:hover{
-o-transform: scale(1) rotate(360deg); -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg);
border-radius:1px;
}
.lavixta_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.lavixta_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 50,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://lavixtastar-code.googlecode.com/files/LavixtaStar%20Spining%20Recent%20Comments.js"></script>
<script type="text/javascript" src="http://adjieumbara.blogspot.com/feeds/comments/default?alt=json&callback=lavixta_recent_comments&max-results=9999"></script>

• Simpan JavaScript dan lihat hasilnya..

Catatan :

1. Angka yang berwarna biru adalah jumlah komentar yang akan di tampilkan
2. Angka yang berwarna orange adalah ukuran avatar
3. Angka yang berwarna hijau adalah jumlah karakter komentar yang akan di tampilkan
4. Tulisan yang berwarna merah adalah URL blog yang komentarnya akan di tampilkan

Sekian sedikit penjelasan tentang cara memasang widget komentar terbaru dengan avatar berputar, semoga artikel ini bermanfaat..