Hey my loving friends! How are you? Forget to write a post because went busy with some other works. I will tell them later. Ok How about your blog now? Hope it is going fine. Now today I'm going to teach you about a another essential widget that you should have in your blog. This is about how to add recent comments widget to your blog. This feature is not supplied by blogger and we should add it manually by using a code. This is not hard and you can do it easily. After adding this widget you can see a list of recent comments on your blog and new visitors will also like to add a new comment. ;-) OK Everybody follow me!
1. Got to your blogger dashboard and select your blog
2. Go to Layout
3. Click on Add a gadget
4. Choose html/javascript]
5. Now paste the below code in it
<style type="text/css">
ul.w2b_recent_comments {
list-style: none;
margin: 0;
padding: 0;
}
.w2b_recent_comments li {
background: none !important;
margin: 0 0 6px !important;
padding: 0 0 6px 0 !important;
display: block;
clear: both;
overflow: hidden;
list-style: none;
}
.w2b_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;
}
.w2b_recent_comments li img {
padding: 0px;
position: relative;
overflow: hidden;
display: block;
}
.w2b_recent_comments li span {
margin-top: 4px;
color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>
<script type="text/javascript" src="http://www.bloggingandit.info/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
6. Change www.bloggingandit.info with your blog URL
7. Click save
8. You are done
That's it. after refreshing your blog you will see a nice comment role on your blog like the above picture. Keep in mind you will not see it if you do not have comments on your blog! :-) So it is easy and comment below with your suggestions Thanks for reading See you next time.
Happy Blogging!
No comments:
Post a Comment