- Home>
- Tips & Trick Blogger , Widget & Gadget >
- Cara Membuat Widget Recent Comment Dengan Avatar Berputar/Spining Style 1
Posted by : ANS-Home
Jun 3, 2013
Cara Membuat Widget Komentar Terbaru Dengan Avatar Berputar Keren Indah SEO terbaru Oke Punya
SELAMAT DATANG DI -LAVIXTA STAR~BLOG-
Hi sobat-sobat ku dimanapun anda berada.
Berjumpa lagi di Lavixta Star Blog, blog sederhana saya.
Kali ini saya akan mengshare satu tips yang sangat membantu yaitu "Cara Membuat Widget Recent Comment Dengan Avatar Berputar/Spining".
Widget Recent Comment atau Komentar Terbaru(Ind) adalah salah satu widget yang dibutuhkan para admin-admin blog untuk mengetahui siapa saja yang baru berkomentar diblognya beberapa saat yang lalu. Widget ini diakui sebagai widget pembangun Blog User Friendly, yang artinya blog yang menggunakan widget ini akan lebih mudah digunakan karena widget ini menjadikan blog kita menuju Full Content.
Dengan adanya widget Recent Comment/Komentar Terbaru ini maka lebih memudahkan kita untuk melihat-lihat artikel/posting mana yang baru saja dikomentari oleh para visitors/pengunjung blog tersebut.
Widget ini sudah saya modifikasi sedemikian rupa, sehingga widget ini tidak mencolok dengan kata lain sangat elegant dan dinamis.
Penasaran? Berikut ulasannya untuk anda.
►View Demo
Kali ini saya akan mengshare satu tips yang sangat membantu yaitu "Cara Membuat Widget Recent Comment Dengan Avatar Berputar/Spining".
Widget Recent Comment atau Komentar Terbaru(Ind) adalah salah satu widget yang dibutuhkan para admin-admin blog untuk mengetahui siapa saja yang baru berkomentar diblognya beberapa saat yang lalu. Widget ini diakui sebagai widget pembangun Blog User Friendly, yang artinya blog yang menggunakan widget ini akan lebih mudah digunakan karena widget ini menjadikan blog kita menuju Full Content.
Dengan adanya widget Recent Comment/Komentar Terbaru ini maka lebih memudahkan kita untuk melihat-lihat artikel/posting mana yang baru saja dikomentari oleh para visitors/pengunjung blog tersebut.
Widget ini sudah saya modifikasi sedemikian rupa, sehingga widget ini tidak mencolok dengan kata lain sangat elegant dan dinamis.
Penasaran? Berikut ulasannya untuk anda.
Feature
screenshot & Demo
- Membantu pengunjung untuk mengetahui posting/artikel yang baru dikomentari.
- Membantu blog agar lebih Full Content
- Memungkinkan Alexa blog semakin menurun.
- Memungkinkan jumlah visitor/penunjung bertambah
- Widget Recent Comment ini dilengkapi Efek :
- Round Image
- Dinamic Color and Style
- Spining Image Hover, etc.
requirements
- Koneksi yang lancar
- Internet Browser yang memadai
- Berpengalaman dalam mengedit HTML/CSS atau sejenisnya
- Sediakan minuman segar dan cemilan ringan untuk merilekskan pikiran
Screen Shot General Mode |
Screen Shot Hover Mode |
- Loggin di blogger.com
- Tentukan blog yang akan dimodifikasi
- Dari Dasbor, pilih "Tata Letak"
- Pastikan terlebih dahulu dimana widget akan ditampilkan.
- Jika sudah, klik "Tambah Gadget"
- Pilih "HTML/JavaScript"
Lihat gambar untuk lebih jelas :
Gambar 1 : Pilihan menu "Tata Letak" pada dasbor |
Gambar 2 : Pilihan "Tambah Gadget" pada halaman Tata Letak |
Gambar 3 : Pilihan "HTML/JavaScript" pada halaman Tambah Gadget, klik kotak biru tsb untuk menambah Widget/Gadget baru. |
- Copy dan letakkan kode dibawah ini pada kotak kontennya
Code
<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://lavixtastar.blogspot.com/feeds/comments/default?alt=json&callback=lavixta_recent_comments&max-results=9999"></script>
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://lavixtastar.blogspot.com/feeds/comments/default?alt=json&callback=lavixta_recent_comments&max-results=9999"></script>
- numComments = 5 → untuk menentukan jumlah komentar yang ditampilkan, sobat bisa mengganti angka 5 dengan sesuka sobat. Untuk hal ini saya sarankan maximal 7 saja, agar widgetnya tidak terlalu tinggi/panjang.
- avatarSize = 50 → untuk menentukan ukuran gambar avatar, sobat bisa mengganti angka 50 dengan sesuka sobat. Untuk hasil yang sempurna, code ini tidak perlu diubah.
- characters = 60 → untuk menentukan jumlah karakter yang akan ditampilkan pada setiap komentar, sobat bisa mengubah angka 60 dengan sesuka sobat. Saya sarankan maximal 100.
- lavixtastar.blogspot.com → untuk menentukan blog/web mana yang akan ditampilkan komentar terbarunya, sobat bisa mengganti lavixtastar.blogspot.com dengan URL/Alamat blog/web sobat.
- Selanjutnya, klik "Simpan" untuk menyimpan widget/gadget yang sudah dibuat.
- Coba, lihat blog sobat, jika widgetnya sudah muncul, berarti misi sudah selesai.. ^_^
Kerusakan Template atau teknis lainnya tidak menjadi tanggung jawab Lavixta Star ~ Blog's. Silahkan berkomentar jika widgetnya berjalan dengan baik maupun jika widgetnya bermasalah.
Sekian dulu pemberitahuan dari saya..
See you in my next pages..
Bye gan..!!
*jangan lupa komentarnya ya gan.. :D
See you in my next pages..
Bye gan..!!
*jangan lupa komentarnya ya gan.. :D
{ 10 comments... read them below or Comment }
Peraturan yang harus diikuti ketika membuat komentar :
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon Hide Emoticon
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon Hide Emoticon
Subscribe to:
Post Comments (Atom)
haiiii, makasih yah, berkat tutorial ini akhirnya recent commentku bisa update, alias bisa muncul lagi. dulu ada tp akhir-akhir ini nggak muncul, hehe..
ReplyDeletehappy blogging, salam kenal :)
iya, terima kasih kembali..
Deletesalam kenal juga :)
ini baru jelas
ReplyDeletehehehe.. thanks gan.. :)
Deletemantaap
ReplyDeleteThanks :)
DeleteDesainnya simple dan dinamis gan..thank's codenya
ReplyDeleteterimakasih kembali gan.. :)
DeleteThank's bro ats codenya
ReplyDeleteKEREN BANGET BRO!!! THANKS YA! 8-)
ReplyDeleteJOS998.blogspot.com