Add a floating recent comment box in your Blogspot/wordpress blog
Adding a floating style recent comments box will not only increase your Blog’s beauty but also it helps you to be in better touch with your blog viewers.
You can add it in any section of your Blog. so don’t wait to add this awesome look Blogger widget.
Also read : How to add cute flying twitter bird in Blogger
 |
| Recent comment box widget in Blogger |
How to add this widget :
- Go to Blogger Dashboard
- Select the blog and click on the layout
- Add a html/javascript widget
- Paste the following code and then after click on save.
<style type=”text/css”>
ul.bh_recent_comments {
list-style: none;
margin: 0;
padding: 0;
}
.bh_recent_comments li {
background: none!important;
margin: 5px!important;
padding: 5px!important;
display: block;
clear: both;
overflow: hidden;
list-style: none;
}
.bh_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;
}
.bh_recent_comments li img {
padding: 0;
position: relative;
overflow: hidden;
display: block;
}
.bh_recent_comments li span {
margin-top: 3px;
color: #666;
display: block;
font-size: 12px;
line-height: 1.4;
}
.bh_recent_comments li {
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
border: 2px solid transparent;
}
.bh_recent_comments li:hover {
border: 2px Solid #1BA1E2;
}
</style>
<script type=”text/javascript”>
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 45,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = “More ?”,
defaultAvatar = “http://3.bp.blogspot.com/-HseCrBm2t_E/URitaAUacjI/AAAAAAAAC0c/Uw4FO3CLyyE/s1600/blogger-avatar-1.png”,
hideCredits = true;
//]]>
</script>
<script type=”text/javascript” src=”http://dl.dropbox.com/u/81212926/bloggerheroe-recent%3Dcomments.js”></script>
<script type=”text/javascript” src=”/feeds/comments/default?alt=json&callback=bh_recent_comments&max-results=5″></script>
How to customize : You can change the default avatar address by changing the address
http://3.bp.blogspot.com/-HseCrBm2t_E/URitaAUacjI/AAAAAAAAC0c/Uw4FO3CLyyE/s1600/blogger-avatar-1.png
Change the digit from numComments = 5, as you want the number of recent comments to show.
Know how to add this is as a wordpress widget
If you have any issue. Let me know in the comment section.
Leave a Reply