Cara Membuat widget komentar dengan efek avatar berputar

Anonim

Sahabat blogger 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.

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 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
Masuk ke pengaturan Tata Letak
Tambahkan Gadget
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://yudhadhesockerz.blogspot.com/feeds/comments/default?alt=json&callback=lavixta_recent_comments&max-results=9999"></script>

    5.Simpan JavaScript dan lihat hasilnya..

Catatan :

    Angka yang berwarna biru adalah jumlah komentar yang akan di tampilkan
    Angka yang berwarna orange adalah ukuran avatar
    Angka yang berwarnakuning adalah jumlah karakter komentar yang akan di tampilkan
    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..

Tag : Tutorial blogspot