17 September 2012

Membuat Recent Comments dengan Avatar

Do you want to share?

Do you like this story?

Recent Comments With Avatar - Setiap blogger menginginkan tampilan blog yang menarik dan secantik mungkin. Selain merupakan sebuah kebanggan tersendiri, blog yang menarik juga merupakan salah satu cara untuk membuat pengunjung lebih betah dan senang berkunjung ke blog.

Cara yang paling baik adalah dengan menambahkan beberapa widget menarik pada sidebar blog. Salah satu widget yang menarik yang sebaiknya menghiasi sidebar blog adalah Recent Comments dengan Avatar.

Recent comments adalah widget yang akan menampilkan beberapa komentar terakhir di blog. Adapun jumlah komentar yang ditampilkan bisa diatur sesuai keinginan. Dengan adanya Avatar atau foto profil komentator di dekat tulisan komentar, membuat Recent Comments dengan Avatar ini lebih menarik di bandingkan Recent Commnets biasa yang tidak menampilkan avatar profil komentator.

Langkah Membuat Recent Comments dengan Avatar
1. Masuk ke account Blogger
2. Klik Layout/ Tata Letak
3. Klik Add a Gadget/Tambahkan element Baru
4. Tambahkan HTML/JavaScript
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_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;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_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 = 30,
roundAvatar = true,
characters = 30,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://indolaron-js.googlecode.com/svn/trunk/Recent_Comments_With_Avatar.js"></script>
<script type="text/javascript" src="http://indolaron.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
5. Ganti indolaron.blogspot.com dengan blog Anda.
6. Simpan

Keterangan:
avatarSize = 30        : Ukuran avatar atau gambar profil
characters = 30        : Jumlah kata pada komentar yang ingin ditampilkan.
jumlah angka 5        : Jumlah komentar yang ingin ditampilkan
SELMAT BERKREASI....

ARTIKEL TERKAIT :

13 komentar :

  1. a suka n a mo cob di blog a ..... mau donk bagi2 komennya buat blog a yang tergolong masih jadul...

    ReplyDelete
  2. a ganti kok kotaknya gk muncul yach? minta sarannya gan!

    ReplyDelete
  3. @nurul hidayati
    Kotakan seperti mana Gan?
    Klo pengen widget-nya di beri kotakan,sepertinya itu setting code fotter/sidebar pd masing2 template.
    Coba agan tambahkan beberapa code CSS berikut; (ini sesuai pd template agan saat ini,)
    * Cari code css: .footer-outer
    tambahkan code: border:1px solid #555;margin:10px 10px 0;padding:6px 0 7px 10px
    * Cari code css: .footer-outer .widget h2
    tambahkan code: border:1px solid #ccc; border-bottom:2px solid #ccc; margin:5px 0
    Lalu save....dan liat perubahan-nya,jika tidak sesuai dengan snang hati saya akan mencoba membantu :)

    ReplyDelete
  4. link sudah terpasang sob, sila di cek :drummer:

    ReplyDelete
  5. wah, keren ne gan, makasih gan udah berbagi ilmunya..
    di tunggu kunjungannya gan di http://ilmunyentrik.blogspot.com/

    ReplyDelete
  6. Terimakasih :) Saya sudah mencoba dan berhasil :)

    ReplyDelete
  7. keren gan, ane pasang di blog aku.. \o/ \m/

    ReplyDelete
  8. gan, kok komentarnya cuma mentok di 5??
    udah ane buat jadi 20, tapi yg muncul tetap 5

    ReplyDelete
  9. Maaf gan ane koreksi Tutorial ini dan yang perlu diubah:
    max-results=5 : untuk menentukan julmah komentar yang akan ditampilkan :-d

    ReplyDelete
  10. makasih gan nfonya,,nambah ilmu ni,, :-d

    ReplyDelete
  11. gan ijin pake Kodenya saja :-d

    ReplyDelete
    Replies
    1. Monggo silahkan sobat.....di otak-atik sendiri sesuai selera agan ^:D

      Delete
  12. cara membuat yang lagi saya butuhkan kang ...thnks ya

    ReplyDelete
SILAHKAN TULIS KOMENTAR ANDA, DENGAN CATATAN :
* Komentator "Anonymous" tidak diprioritas-kan, jadi gunakan salah satu Profile untuk respon lebih cepat
* Jika anda tidak memiliki akun Google anda bisa gunakan Name/URL
   - isi Name dengan Nama Anda
   - isi URL dengan link/url profile Facebook Anda atau Twitter Anda atau yang lainnya
* Mohon jangan menyisipkan Link Hidup..!!!
* Please do not insert Live Links ....!!!

Advertisements

Advertisements

 

Membuat Recent Comments dengan Avatar Oops ! | Error 404