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.
This will definitely be great for blogger blogs i am currently on WordPress, hope to use it when i create a blogger blog soon.
VERY cool…..need to go over and do some editing. Thanks 😉
When I had a blogger blog I was really in search for this
Actually I blog on WordPress But I’ll share it for blogger folks 🙂
thanks for sharing 😀
Thank you Nwosu for liking my post. M happy for this.
Thanks Ryan for your valuable comments. I am gald to see you here
thank you Anis for your valuable apprciation. Its nyc to see your awesome comment. Be in touch
I search for this long ago, but initial it thought this is not possible on blogger but finally am convinced that it’s possible. Thanks for sharing!
Adesanmi thanks for your comment. M happy to help you.
Thanks serven for your comment. stay in touch for more tips and tricks
Asif happy to know my post is useful for you. I wish you to help you more. Keep connection with me. tk cre