Menunggu...

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..
Advertise Here
By adjieumbara.blogspot.com
300x250

Klik disini untuk berkomentar 19 komentar:

avatar

top markotop sob, boleh dicoba widgetnya, thanks sob.

avatar

Ok, silahkan sahabat Jocker.. :)

avatar

tutorialnya mantabs sobat..sederhana namun mudah dipahami.....luarbiasa....salam :-)

avatar

sob, kalau di buat naik turun komentarnya bagaimana ?

avatar

Mantap sob ... kayaknya saya bakalan pasang nih .........
hehe makasih

avatar

kalo cek komen sih biasa langsung ke menu bloggernya sob, tapi bisa juga seperti itu. Nice share sob :)

avatar

Salam sahabat BlogS Of Hariyanto, thanks atas kunjunganya..

avatar

Di tunggu ya artikel berikutnya, Insya ALLAH.. :)

avatar

Sama2 sob, silahkan semoga bermanfaat.. :>)

avatar

Tanks sahabat Jocker..

avatar

hadir kembali sobat :-)

avatar

Salam Mas Adjie..? kunjungan Pertamax
Artikel yang menarik izin simak dan izin
Saya belajar, juga pasang di blog saya
guna untuk mengetahui pesan yang ada
di form coment saya, script nya sudah valid
Html dan css belum yah Mas..?

terima kasih atas ilmu dan artikelnya salam sukses Mas Adjie.

avatar

Selamat datang sahabat Karrysta, salam kenal semoga artikel2 dari blogger pemula bermanfaat..
kalau valid HTML and CSS sudah pasti, tapi masih versi yang lama mengingat sekarang sudah ada versi terbaru yakni HTML5..

avatar

Ok..siip Mas Adjie.. terima kasih atas sambutan nya yang Ramah
dan bersahabat, saya lihat artikel2 Mas Adjie ini Menarik, dan widget
komentar terbaru ini salah satu nya, benar sekali Mas sekarang sudah
Zamanya html 5, posts saya juga perlu di edit karena banyak yang
Kadaluarsa, saat html masih version 01, 04 dan sekarang sudah html 5

Salam sukses yah Sobat, tetap semangat 45...:h :h :h....

avatar

Asyik juga ya kalau widget recent comment avatar dilengkapi dengan efek berputar-putar. Jadi bisa lebih menarik dan interaktif ya mas. Izin coba mas ^^

Berkomentarlah dengan bijak karena setiap perkataan yang kita ucapkan merupakan cermin pribadi seperti apa diri kita..

Terima kasih atas komentar Anda