Cara Membuat Widget Recent Comments dengan Avatar di Blog

Cara Membuat Widget Recent Comments dengan Avatar di Blog

Cara Membuat Widget Recent Comments dengan Avatar di Blog

Widget Recent Comments adalah widget yang menampilkan komentar terkahir yang masuk. Widget ini sangat bermanfaat bagi pengunjung untuk mengetahui komentar terakhir yang masuk. Ini juga bisa menjadi alternatif bagi Anda yang ingin cek komentar tanpa harus masuk ke akun blogger Anda.


Cara Membuat Recent Comments Widget dengan Avatar di Blogger
1. Buat widget baru HTML/JavaScript
2. Simpan kode dibawah ini pada widget, berikan judul terserah anda.
<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 http://cidoshare.blogspot.com
    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="https://mzaini30.github.io/library/js/rcwa.js"></script>
<script type="text/javascript" src="http://cidoshare.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
3. Perhatikan kode diatas, kode yang berwarna merah bisa disesuaikan dengan selera Anda :
numComments  = 5, (jumlah komentar yang ditampilkan)
showAvatar  = true,
avatarSize  = 30, (ukuran avatar dalam pixel)

roundAvatar = true,
characters  = 30, (jumlah karakter yang ditampilkan)
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm", (url avatar)
hideCredits = true;
4. Ganti cidoshare.blogspot.com dengan blog Anda, ganti max-results=5, sesuai jumlah komentar yang ditampilkan.
5. Simpan.

Demikian tutorial Cara Membuat Widget Recent Comments dengan Avatar di Blog ini bisa membantu mempercantik blog anda. Semoga bermanfaat

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Blogger
Disqus
Pilih Sistem Komentar Yang Disukai

8 Comments Add Comment

Ijin pasang di blog ane gan :-d thnks

Balas

oke, silahkan diterapkan di blognya ;)

Balas

Terimakasih infonya, sungguh sangat bermanfaat dan bisa diterapkan di blogger saya nantinya :)

Balas

sama-sama gan. bookmark dulu dan nanti bisa diterapkan langsung ke blog agan :-d

Balas

Bagus gan, apa ini berpengaruh buat SEO

Balas

lom nyoba.. tp mmpir dlu dh ;)

Balas
Add Comment

Berkomentarlah dengan baik, Kepribadian anda tercemin saat berkomentar.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like CIDOSHARE? Keep us running by whitelisting CIDOSHARE in your ad blocker.

This is how to whitelisting CIDOSHARE in your ad blocker.

Thank you!

×
×
×

Advertisement