Widget Recent Comments Dengan Avatar Dan Tooltip

Alhamdulillah dapat kembali hadir menyapa anda dan berbagi lagi dengan tutorial membuat widget keren recent comments dengan avatar dan tooltip. Sebelumnya saya pernah mengetengahkan dua versi widget recent comments dengan avatar, yang pertama menampilkan semua komentar komentator, dan yang kedua menyembunyikan komentar admin, maka sebut saja ini adalah versi ketiga dari widget recent comments dengan avatar karena adanya penambahan tooltip didalam widget ini.

Tampilan widget akan seperti screenshot yang anda lihat disamping atau untuk lebih jelasnya, silahkan tekan butthon demo berikut untuk masuk keblog eksperimen dan melihat hasil dari tutorial ini:

View Demo

 

Nah jika anda tertarik untuk menambahkan widget recent comments dengan avatar dan tooltip ini ke blog anda, silahkan ikuti langkah-langkah berikut:

1. Loggin ke akun blogger anda

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

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

<style type="text/css">
#komentar {background: #fff; border:1px solid #8181F7;-moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;margin:5px 0;padding:5px;}
#komentar ul{margin:0;padding:0px;list-style: none;}
#komentar ul li:first-child {border-top:none;}
#komentar ul li {height:46px; background: #A9D0F5; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border:1px solid #8181F7;-moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;margin:5px 0;padding:5px;}
   
#komentar ul li:last-child {border-bottom: none;}
#komentar ul li:hover {background: #CCFFFF;
-moz-border-radius-bottomright:10px;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;margin:5px 0;padding:5px;}
#komentar a, #komentar a:link, #komentar a:visited {clear:both;color:#222;display:block;text-decoration:none;}
#komentar .gamen {display: block;float: left;height: 42px;left: 4px;margin-right: 15px;position: relative;width: 42px;}
#komentar .gamen>img { border: 2px solid #ffffff;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;box-shadow: 0 1px 2px #222222;background: url(http://tipstrikblogging.googlecode.com/files/Avatar%20Blogger%20Comments.jpg)repeat-x;}
#komentar ul li div.ismen {color:#333;text-shadow:-1px -1px 1px #ccc;}
#komentar .ismen {display: block;font-size: 1em;font-style: italic;line-height: 1.2;padding: 2px 4px 2px 0;}
#komentar .gamen>span{width: 150px;height: auto;line-height: 20px;padding: 5px;left: 115px;margin-left: -64px;font-size: 1em;font-weight:bold;color: #212121;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);text-align: center;border: 4px solid #5858FA;background: rgba(255,255,255,0.7);text-indent: 0px;border-radius: 5px;position: absolute;pointer-events: none;bottom: 100px;opacity: 0;box-shadow: 1px 1px 2px rgba(0,0,0,0.2);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#komentar .gamen>span:before, #komentar .gamen>span:after{content: '';position: absolute;bottom: -15px;left: 50%;margin-left: -9px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid rgba(0,0,0,0.1);}
#komentar .gamen>span:after{bottom: -14px;margin-left: -10px;border-top: 10px solid #5858FA;}
#komentar .gamen:hover>span{opacity: 0.9;bottom: 55px;}
</style>

<div id="komentar">
<ul>
<script type="text/javascript">
//<![CDATA[
var jmlkomentar = 5;
var jmlkarakter = 60;
//]]></script>
<script src="http://tipstrikblogging.googlecode.com/files/RecentComment-W-Gravatar-Tooltip.js" type="text/javascript"></script>
<script src="http://www.tipstrikblogging.com/feeds/comments/default?alt=json&amp;callback=tampilkankomentar" type="text/javascript"></script>
</ul>
</div>
<small></small><br />
<div style="font-size: 90%; text-align: right; text-shadow: 2px 2px 2px #adadad;">
<small><a href="http://www.tipstrikblogging.com/2012/10/widget-recent-comments-dengan-avatar.html” target="_blank" title="Widget Recent Comment">Get This Widget</a></small></div>

Catatan: perhatikan tulisan berwarna biru diatas, kode warna background bisa anda ganti dan sesuaikan dengan keinginan anda atau agar sesuai dengan desain template anda. Jangan lupa untuk mengganti URL feed blog ini dengan URL feed blog anda!

4. Simpan dan lihat hasilnya diblog anda.

Demikian tutorial cara membuat widget recent comments dengan avatar dan tooltip. Semoga bermanfaat.

Cara Menghilangkan Komentar Admin Pada Widget Recent Comments Dengan Avatar

Postingan kali ini menjawab pertanyaan dan juga tuk menepati janji kepada teman kita LIZWANA yang bertanya pada kolom komentar postingan tutorial menambahkan widget recent comments dengan avatar.

Pada postingan tersebut hasil dari widget recent comment masih menampilkan avatar dan komentar dari admin, jadi jika dalam sehari admin menjawab sekaligus komentar yang masuk maka bisa dipastikan widget recent comment tersebut hanya akan menampilkan avatar admin sehingga tampilannya…? Menurut anda bgm? Presepsi org khn berbeda-beda tapi buat saya sendiri tidak mengapa sih, mang masalah buat lu? He, menurut saya sih justru lebih bagus dengan begitu pengunjung bisa segera mengetahui jika komentarnya segera mendapatkan respon dari admin.

Tapi bagi yang tidak ingin menampilkan komentar admin pada widget recent comment dengan avatar silahkan ikuti langkah-langkah berikut.

1. Seperti biasa login ke akun blogger anda
2. Pada dasbor klik menu tata letak >> Tambah gadget
3. Pilih HTML/JavaScript dan pada form yang tampil, letakkan kode berikut:

<style type="text/css">

ul.sakahayang_recent_comments{list-style:none;margin:0;padding:0;}
.sakahayang_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;}
.sakahayang_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;}
.sakahayang_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.sakahayang_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 11px;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  = 60,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
 maxfeeds=100,
adminBlog='Amatullah';
//]]>
</script>

<script type="text/javascript" src="http://tipstrikblogging.googlecode.com/files/RecentCommentsWGravatar.NonAdmin..js"></script>

<script type="text/javascript" src="http://www.tipstrikblogging.com/feeds/comments/default?alt=json&callback=sakahayang_recent_comments&&max-results=100"></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>

Catatan: Perhatikan tulisan berwarna biru

numComments = 5, (Jumlah komentar yg ingin ditampilkan)

showAvatar = true, (Menampilkan avatar)

avatarSize = 40, (Ukuran Avatar)

roundAvatar = true, (Membuat Avatar Round/Bulat)

characters = 60, (Jumlah karakter komentar)

Jangan lupa mengganti nama admin blog dan Tulisan tebal berwarna biru http://www.tipstrikblogging.com ganti dengan nama blog anda. Max result feed juga samakan jumlahnya!

4. Simpan dan lihat hasilnya diblog anda!

Semoga bermanfaat.

Script from wy2blogging.com. Modifikasi CSS sakahayang.com

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.

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