16 Widget Recent Comments Dengan Avatar Dan Tooltip

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

Widget Recent Comments With Avatar And TooltipAlhamdulillah 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.


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

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

16 komentar :

  1. Mantab gan, ijin untuk mencoba... :)
    hmm.. untuk bahasan tooltip sendiri ada gak gan??

    BalasHapus
    Balasan
    1. Ini sementara mau dibuat tutorial request anda kemarin khn? Sabar ya! Karena sebelum membuat tutorial anaa buat live demonya dulu.

      Terimaksh tuk apresiasinya.

      Hapus
  2. aku kok gagal yah? pdahal aku cuma ganti yg URLnya saja kan mb?
    duh.. help me mngkin ada yg kurang.

    BalasHapus
    Balasan
    1. He he, iya ukhty anaa yang sering sekali keliru pada bagian seperti ini. Maksud ana URL feed pada kode src tambahkan kode petik jadix "http://www.tipstrikblogging.com/feeds/comments/default?alt=json&callback=tampilkankomentar"

      Gitu aja, coba lg deh. Afwan ya, anaa yg krg teliti!

      Hapus
    2. aduh tambah pusing, seblah mana atuh. ini saya ulang kok gagagl lagi?

      Hapus
    3. Bagaimana carax agar anaa bisa bantu ukh?

      Hapus
    4. ukht caranya biar dibantu jika boleh minta script thml yang sudah ada link ana. bisa?nnti dikirim ke email.
      cahaya_wanita@ymail.com

      Syukron ukht jika bisa.

      Hapus
  3. informasi nya bagus, kyk jd sering berkunjung nie

    BalasHapus
    Balasan
    1. Terimaksh tuk kunjungan dan apresiasinya ukh, tp dah dicoba blm, bs apa tdk?

      Hapus
  4. kalo recent comet kaya gini di tambah scrool gmn sob cara nya?

    BalasHapus
  5. Menyimak....dan Nice Blog...

    BalasHapus
  6. makasih banyak gan.. sudah ane coba di blog ane http://diploma1pajak.blogspot.com maen2 yaa =p~

    BalasHapus
  7. Like this lah,
    makasih atas infonya...

    BalasHapus
  8. gan tolong minta code yang udah ada URL saya donk, saya coba masukin dr kemarin gagal terus.. bisa tolong di emailkan ke ithienez@gmail.com

    terimakasih banyak

    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!