Home » » How to make recent comments widget with avatars and tooltip

How to make recent comments widget with avatars and tooltip

Posted by Ran Dreamer on 22 Apr 2015

Previously I had posted an article about making widgets recent comments with avatar.
In this article I add the "Tooltip". Would like widget view screenshots you see in addition to or for more details. Read : Make Flat UI Label Cloud

 recent comments widget
Well if you are interested in adding widgets recent comments with avatar and tooltip to your blog, please follow the steps below:
1. Loggin to your blogger account
2. On the dashboard >> Select Layout >> Add Gadget >> HTML / JavaScript
3. Copy the code below and paste it into the form field 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://labston.blogspot.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> 
Note: note the word blue above, the background color code can be changed and customized to your liking, or to fit the design of your template. Do not forget to change the URL of this blog feed with the URL of your blog feed!
4. Save and see the results of your blog.
Thus tutorial how to make recent comments widget with avatars and tooltip. Hope it is useful.
Read Also : Popular Posts Widget With Multi Colored Style

Share This Post :
 
Copyright © 2015 LABSTON | Adsense, Blogger, Android, Backlink, SEO, Template. All Rights Reserved
Template Johny Wuss Responsive by Creating Website and CB Design