Widget Recent Comments Dengan Avatar Dan Tooltip -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Widget Recent Comments Dengan Avatar Dan Tooltip, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger Comments, Artikel Blogger Tutorials, Artikel Blogger Widgets, Artikel Recent Comments, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Widget Recent Comments Dengan Avatar Dan Tooltip
link : Widget Recent Comments Dengan Avatar Dan Tooltip
Gambar dibawah ini

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.

Demikianlah Artikel Widget Recent Comments Dengan Avatar Dan Tooltip

Sekianlah artikel Widget Recent Comments Dengan Avatar Dan Tooltip kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Widget Recent Comments Dengan Avatar Dan Tooltip dengan alamat link https://trikmitos.blogspot.com/2012/10/widget-recent-comments-dengan-avatar.html