Cara Membuat Recent Comment With Avatar Profile

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.

Untuk membuat blog lebih ayu cara membuat recent comments dengan avatar profile, 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 With Avatar.


Tentang Recent Comments with 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 with Avatar ini lebih menarik di bandingkan Recent Commnets biasa yang tidak menampilkan avatar profil komentator.

Sebelum membuat Recent Comments with Avatar ini, sebaiknya anda lihat dulu live demonya di bawah ini agar tidak terkesan membeli kucing dalam karung



Apabila Live demo bermasalah, anda bisa melihat screenshot gambarnya berikut ini :

cara membuat recent comments dengan gambar avatar profil komentator di blogspot
Gambar 1 : Recent Comments With Avatar


Anda tertarik untuk memasang dan menambahkan widget Komentar Terakhir yang ada foto profil komentatornya di blog anda ? Simak tutorialnya berikut ini :


Recent Comments Avatar Profile

Menambahkan widget Komentar Terakhir dengan avatar profil ini sangat mudah. Tidak diperlukan mengedit kode HTML template dan hanya 1 kali Copy Paste kode. Anda cukup melakukan beberapa hal berikut ini :

  • Add Gadget / Widget baru
  • Pilih widget HTML Java Script
  • Masukkan kode Recent Comments Avatar Profil
  • Simpan
  • Selesai...

Berikut kode Recent Comment with Avatar :
<div style="overflow:auto;width:auto;height:250px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;">
<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  = 100,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 200,
 defaultAvatar  = "",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/bloggerbugis/js/Recent_Comments_New_Bloggerbugis.js"></script>
<script type="text/javascript" src="http://www.bloggerbugis.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script>

<div style="font-size:10px; padding:3px;margin-bottom:5px;float:right"><a
href="http://www.bloggerbugis.com/2012/05/recent-comment-komentar-avatar.html" target="_blank"> Get This Widget</a></div>
</div>

Jika anda belum tahu cara menambahkan widget baru ke dalam blog, klik "Cara Menambahkan Widget".

Kode untuk membuat Recent Comments With Avatar di atas masih bisa di edit. Silahkan edit kode yang berwarna MERAH agar tampilannya sesuai dengan yang anda inginkan.
  • 250px adalah tinggi kotak Recent Comments. Ganti 250 dengan angka yang lebih jika anda ingin membuat kotak yang lebih tinggi atau sebaliknaya asala jangan menghilangkan kode px 
  • fff adalah kode untuk background kotak. fff adalah kode warna putih. Apabila ingin mengganti background kotak Recent Comments dengan warna lain, ganti fff dengan kode warna yang anda inginkan. Untuk melihat kode warna, klik "Tools untuk melihat kode warna".
  • 100 adalah jumlah komentar yang akan di tampilkan di dalam kotak Recent Komentar. Ganti 100 dengan angka yang lebih besar atau lebih kecil sesuai keinginan anda.
  • true yang pertama adalah kode untuk menampilan Gambar Avatar profile. Jika ingin menghilangkan Foto Profil / Avatar, ganti true dengan false
  • 30 adalah ukuran / besar foto profil. Sama seperti sebelumnya, ganti 30 dengan angka yang anda inginkan
  • true yang kedua adalah kode untuk membuat foto profil komentator berbentuk bundar. Ganti true dengan false jika anda ingi membuat avatar profil berbentuk kotak
  • 200 adalah jumlah karakter / huruf komentar yang akan di tampilkan. Silahkan ganti angkanya sesuai dengan yang anda inginkan.
  • Ini adalah bagian yang paling penting. Ganti http://www.bloggerbugis.com dengan URL / alamat blog anda agar widget Recent Comments yang ada di blog anda tidak menanmpikan komentar yang ada di blog saya menambahkan widget komentar terakhir di sidebar blog
Kode paling bawah ( kode yang terpisah ) adalah kode credit BLOGGERBUGIS. Jika anda tidak menghapus kodenya, saya ucapkan terima kasih.

Semoga tutorial "Cara membuat Recent Comments With Avatar" ini bermanfaat.
Happy blogging..... 




Label: ,