Update Terbaru
Loading...
Home » , » Cara Membuat Recent Comment dengan Avatar Image Unik
Published On : Selasa, 16 Oktober 2012
19.58.00 | Admin | No Comments

Cara Membuat Recent Comment dengan Avatar Image Unik


Buat sobat blogger yang ingin menampilkan komentar terakhir di blognya bisa mencoba widget yang satu ini. menurut saya widget recent comments ini cukup unik karena juga menampilkan avatar image. Sobat blogger bisa melihat tampilannya seperti pada gambar di bawah.

recent comments with avatar image


 Caranya....? Masuk ke akun blogger > tata letak > add gadget> HTML/Javascript
Setelah itu tinggal masukkan saja kode widget recent comments dibawah ini;
<style type="text/css">    ul.md_recent_comments{list-style:none;margin:0;padding:0;}    .md_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;}    .md_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;}    .md_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}    .md_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 13px;font-style: italic;line-height: 1.4;}</style><script type="text/javascript">//<![CDATA[    // Recent Comments Settings    var    numComments     = 5,    showAvatar     = true,    avatarSize     = 60,    roundAvatar    = true,    characters     = 40,    showMorelink    = true,    moreLinktext    = "More »",    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",    hideCredits    = false;//]]></script><script type="text/javascript" src="http://julak-project.googlecode.com/files/recent%20comments%20.js"></script><script type="text/javascript" src="http://www.super-gaptek.com/feeds/comments/default?alt=json&callback=md_recent_comments&max-results=5"></script>
Terakhir pratinjau, lalu simpan template.

Modifikasi;

1.  angka 5 (warna biru adalah jumlah komentar terakhir yang ingin ditampilkan)
2.  angka 60 dan 40 adalah ukuran image avatar komentar postingan blog.
3.  Silahkan mencoba bereksperimen sendiri untuk hal-hal lainnya, cobalah.
4.  Ganti http://blogbelajar2.blogspot.com dengan nama blog sobat

http://www.super-gaptek.com/2012/04/cara-membuat-recent-comment-dengan.html


Related Post

0 komentar:

Posting Komentar

Referensi : DTE | MDF Blog | MKR Site
Copyright © 2013. Gembulz Blog's - All Rights Reserved
Template Created by Creating Website Modify by Gembulz Blog's
Powered by Blogger Top