34 Pasang Widget Recent Comments Dengan Avatar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Alhamdulillah bisa kembali update blog setelah hampir sepekan monotise blog karena baru saja berganti domain baru. InsyaAllah pengalaman custom domain baru ini akan saya share diwaktu yang lain. Pada kesempatan kali ini saya ingin berbagi lebih dulu cara memasang widget blog yang apik berikut.

Recent Comments With Avatar 2

Ya… widget recent comments atau widget komentar terbaru. Sebagaimana widget blogger yang lain yang memiliki banyak versi ataupun modifikasi maka widget recent comments ini juga merupakan versi kesekian kalinya disamping widget serupa yang pernah saya posting. Perbedaaan widget ini dengan pendahulunya, widget recents comment ini dilengkapi dengan avatar atau pic profil komentator dan bisa dimodifikasi lagi dengan penambahan CSS rounded pada avatar.

Baiklah berikut tutorial step by step cara memasang widget recents comments with avatar seperti pada tampilan image diatas.

1. Loggin ke blog anda

2. Pada dasbor >> Pilih Tata Letak >> Add Gadget >> HTML/JavaScript

3. Copy kode berikut dan paste kedalam kolom HTML/JavaScript:

<div style="overflow:auto;width:300px;">
<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: none;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 100,
defaultAvatar = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://tipstrikblogging.googlecode.com/files/RecentComment-W-Gravatar.js"></script>
<script type="text/javascript" src="http://www.tipstrikblogging.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
<small><div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2012/09/pasang-widget-recent-comments-dengan.html" target="_blank" title="Widget Recent Comment">Get This Widget</a></div></small></div>

Sebelum anda save perhatikan kode diatas yang berwarna biru

width:300px; (sesuaikan dengan lebar, supaya mudah ubah saja jadi 100%)
numComments (jumlah komentar yang ingin ditampilkan)
avatarSize (ukuran avatar atau gambar profil)
characters (jumlah kata pada komentar yang ingin ditampilkan)

URL feed comment blog ini ganti dengan blog anda!

4. Klik simpan/ save.

Demikian tutorial membuat recent comment with avatar pada blog. Semoga bermanfaat!

Update, silahkan lihat cara menghiangkan atau menyembunyikan komentar admin pada widget recent comments dengan avatar disini


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

34 komentar :

  1. Terima kasih, sudah berhasil saya praktekkan.

    BalasHapus
    Balasan
    1. Terima kasih juga ats kunjungan dan apresisinya!

      Hapus
  2. Keren banget widgetnya..cuma lagi bingung, mau di taruh disebelah mana widget bagusnya?
    Thanks selalu sharing yang bagus-bagus, sis :)

    BalasHapus
  3. visit this site world-of-sight.blogspot.com

    BalasHapus
    Balasan
    1. Fifs Thanks for visit my blog! Keep share the best and happy blogging!

      Hapus
  4. Balasan
    1. Sama-sama, terima kasih pula atas apresiasi anda!

      Hapus
  5. ini pasti berhasil, soalnya dah pernah nyoba.
    o ya,kalau biar koment admin ga ikutan tampil gimana tuh kak?

    BalasHapus
    Balasan
    1. InsyaAllah nanti pada kesempatan lain anaa posting ya de', untuk sll dpt update terbaru jangan lupa follow ya! Thanks kunjungan dan apresiasinya!

      Hapus
  6. di terapin ke web aku kok ga ada pengaruhnya kk,
    gimana ini...apa ada kaitannya juga dengan tempalte yg saya pake ?

    http://www.sditwidyacendekia.sch.id/

    BalasHapus
    Balasan
    1. Kalau pada template kayaknya tidak ngaruh tp coba cek pengaturan feed blog.
      Terimaksh apresiasinya.

      Hapus
  7. Balasan
    1. Ternyata stlh anaa coba mmg bnr itu krn t4 hosting script w2b mgkn brmasalah tp sdh anaa update dgn mmindahkn script kehosting anaa sndiri, silahkan dicoba kmbali smg brhsl.

      Terimaksh dah mngingatkn!

      Hapus
  8. Wuih, keren banget. 100% sukses! Tks ya.

    BalasHapus
    Balasan
    1. Say Alhamdulillah klu berhasil. Bisa dicek juga updatex, search aja diblog ini widget recent comments dengan avatar non admin. Terimaksh tuk apresiasinya.

      Hapus
  9. informasi yang bagus... kunjungi juga web kami
    www.kebayagayatex.com

    BalasHapus
  10. siiipp kawan sudah saya praktekkan,,,
    saya tunggu kunjungan balasannya,,

    BalasHapus
  11. Saya jg pgn psg dan coba yg ini, tp klu recent comment sprti diblog ini bgm buatx? yg pakai tooltip tp jgn yg warna pinklh :)

    BalasHapus
    Balasan
    1. Silahkan search diblog ini tutorial membuat recent comments dengan avatar dan tooltips, backgroundnya disana bukan pink kok.

      Hapus
  12. terima kasih kawan, bagus hasilnya.

    BalasHapus
  13. this is very interesting, thanks.

    BalasHapus
  14. kalo ditambah scrool gmn cara nya mbak?

    BalasHapus
    Balasan
    1. Silahkan search diblog ini tutorial cara membuat menu scrolling!

      Hapus
  15. tollog follow masih baru di blog pasti gw follow back
    http://trik-internet-indonesia.blogspot.com/?m=0

    BalasHapus
  16. terimakasih ilmunya. sangat bermanfaat :)

    BalasHapus
  17. gan, kalo pasang yang no admin/ no avatar admin gmna? thanks
    http://english.sambudy.com

    BalasHapus
  18. saya lagi nyoba mbak heheh..makasih infonya ;)

    BalasHapus
  19. blognya apik
    menginspirasi .. :)

    BalasHapus
  20. It is a good blog and nice to know about this blog and thanks for sharing here with us.

    parking management system

    BalasHapus
  21. terimakasih untuk artikelnya, salam kenal

    BalasHapus
  22. Trimakasih banyaaakk... Sangat membantu (o)

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!