- Go to Settings->Formatting (as shown in figure)
- You see a Option Showcase images with Lightbox select No.
- That all.No longer Light box appear in your blog.
How to Disable lightbox in blogger
Posted by Unknown
{ Add comments }
How To Remove Blogger Threaded Comments
Posted by Unknown
The Blogger Threaded commenting system allows a reader to reply to other reader comments on that post. Blogger supports threaded commenting with two levels - the original comment, and the replies to that comment. If you want remove threaded comments from your blogger blog, follow these steps:
Step 1. Go To Blogger Dashboard > Template > Edit HTML (click on Proceed button if needed)
Step 2. Select "Expand Widget Templates" (back up your template)
Step 3. Search (using CTRL + F) for the following code:
Step 4. Now remove it (you'll find this code twice and replace it twice) and paste this code instead:
Step 5. Save Template.
That was all!
More about → How To Remove Blogger Threaded Comments
Step 1. Go To Blogger Dashboard > Template > Edit HTML (click on Proceed button if needed)
Step 2. Select "Expand Widget Templates" (back up your template)
Step 3. Search (using CTRL + F) for the following code:
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
Step 4. Now remove it (you'll find this code twice and replace it twice) and paste this code instead:
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
Step 5. Save Template.
That was all!
{ Add comments }
Add Videos/Images in Blogger/Blogspot Comments
Posted by Unknown
Many of you may have wondered if it is possible to post Youtube videos and images into Blogger comments. Well, after going through this tutorial, we'll be able to do this!
To get these cool features, we just need to add some scripts to our template and use the right tags for the images. For adding youtube videos, pasting their URLs will be enough.
Step 2. Find (using CTRL + F) the following tag:
Instructions
Now each time you want to post youtube videos, just paste their urls in the comment box.
For adding images, use the tags below before and after the address of your image:
Settings
If you want to let your visitors know how to post images in blogger comments, then go to Dashboard > Settings > Posts and Comments and look for the Comment Form Message section, there you need to click on "Add" link and add your text. For example:
If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below.
More about → Add Videos/Images in Blogger/Blogspot Comments
To get these cool features, we just need to add some scripts to our template and use the right tags for the images. For adding youtube videos, pasting their URLs will be enough.
How to add videos/images in Blogger comments
Step 1. Go to Dashboard > Template > Edit HTMLStep 2. Find (using CTRL + F) the following tag:
</body>Step 3. Just above/before the </body> tag, paste this code:
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>Step 4. Save the changes by clicking on the Save Template button.
<script src='http://fe-blogger.googlecode.com/svn/trunk/youtubevideos.js'/>
<script src='http://fe-blogger.googlecode.com/svn/trunk/pics-comments.js'/>
Instructions
Now each time you want to post youtube videos, just paste their urls in the comment box.
For adding images, use the tags below before and after the address of your image:
[img]your-image-url[/img]Note: replace your-image-url with the URL
Settings
If you want to let your visitors know how to post images in blogger comments, then go to Dashboard > Settings > Posts and Comments and look for the Comment Form Message section, there you need to click on "Add" link and add your text. For example:
Need to add an image? Use this code <b>[img]IMAGE-URL-HERE[/img]</b>After you have added your text, click on the Save Settings button on the top right corner... and you're done :)
If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below.
{ Add comments }
How to add Facebook Like/Fan Box to Blogger
Posted by Unknown
A Facebook Fan Box or Like Box is a great plugin that allows blog visitors to subscribe to your blog updates via their Facebook accounts, without leaving your blog. After subscribing (by pressing like button), visitors will receive your most recent blog updates on their Facebook page. This box also displays faces of the "likers" on your blog. Before creating a fan box you should already have a facebook fan page. If you haven't yet created, click here to learn How to Create a Facebook Fan Page.
Add Facebook Like Box to Blogger
1. Find out your Facebook fan page URL by visiting your Facebook fan page and copy the url in the address bar, you can see how your url should look like in my screenshot:
2. Then visit this page: http://developers.facebook.com/docs/reference/plugins/like-box
3. Paste your url into the Facebook Page URL field as it is shown below:
4. Once you are satisfied with the looks of the Like Box, click on the "Get Code" button
5. You'll be given two codes, titled HTML 5, XFBML and IFRAME. You only need the iframe code.
Select it and copy the code generated for your box as it is shown in the example below:
6. Then go to your Blogger Dashboard > Layout > click on the Add a Gadget link
7. From the pop-up window, scroll down and select HTML/JavaScript
8. Paste the code in the empty HTML box.
9. Click Save and you're done.
More about → How to add Facebook Like/Fan Box to Blogger
Add Facebook Like Box to Blogger
1. Find out your Facebook fan page URL by visiting your Facebook fan page and copy the url in the address bar, you can see how your url should look like in my screenshot:
2. Then visit this page: http://developers.facebook.com/docs/reference/plugins/like-box
3. Paste your url into the Facebook Page URL field as it is shown below:
4. Once you are satisfied with the looks of the Like Box, click on the "Get Code" button
5. You'll be given two codes, titled HTML 5, XFBML and IFRAME. You only need the iframe code.
Select it and copy the code generated for your box as it is shown in the example below:
6. Then go to your Blogger Dashboard > Layout > click on the Add a Gadget link
7. From the pop-up window, scroll down and select HTML/JavaScript
8. Paste the code in the empty HTML box.
9. Click Save and you're done.
{ Add comments }
Add Recent Comments Widget with Avatars To Blogger
Posted by Unknown
In the past tutorial, I've shared a simple Recent Comments widget, now you have the option to add a stylish Recent comments widget with round avatars, which comes along with comment excerpts. You also have the option to change default Anonymous Avatar Image.
How to add recent comments widget with avatars
Step 1. Go to Blogger Dashboard, then go to Layout and click on Add a Gadget link.
Step 2. In the popup window scroll down + choose HTML/Javascript
Step 3. Paste in the following code in the empty box:
Note
More about → Add Recent Comments Widget with Avatars To Blogger
How to add recent comments widget with avatars
Step 1. Go to Blogger Dashboard, then go to Layout and click on Add a Gadget link.
Step 2. In the popup window scroll down + choose HTML/Javascript
Step 3. Paste in the following code in the empty box:
<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://fe-blogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>
<script type="text/javascript" src="http://your-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
Note
Replace your-blog with the name of your blog.
Replace the "5" values in red, with the number of comments you want to appear... from:
and
To change the anonymous avatar, replace the following address with your own:
To change the size of the avatar, replace 60 value in green with your own
Step 4. After you've made the changes, click Save... and you're done!
The credit goes to Hrish @ way2blogging.org
Replace the "5" values in red, with the number of comments you want to appear... from:
- numComments = 5
and
- &max-results=5
To change the anonymous avatar, replace the following address with your own:
- http://www.gravatar.com/avatar/?d=mm
To change the size of the avatar, replace 60 value in green with your own
Step 4. After you've made the changes, click Save... and you're done!
The credit goes to Hrish @ way2blogging.org
{ Add comments }
Change Older and Newer posts with Post Titles for Blogger
Posted by Unknown
Add Jquery script
- Copy and paste the below code before </body>
Add CSS code
- Add the following css code before ]]></b:skin> (Add CSS code another way)
.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
#blog-pager{height:100% !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
#blog-pager{height:100% !important;}
{ Add comments }
Add Random Posts Widget to Blogger
Posted by Unknown
The Random Posts Widget will show random posts you have added to your blog. The main advantages of this widget is that it is loading pretty fast and shows thumbnails of your posts too, along with the comments link.
How to add Random Posts Widget to Blogger
Step 1. Log in to Blogger Dashboard, and select Template > Edit HTML (click on Proceed button if needed)
Step 2. Select "Expand Widget Templates"
Step 3. Find (CTRL + F) the following tag:
Step 4. Just above it, paste the code below :
Step 5. Save Template.
Step 6. Go to Layout, click on Add a Gadget
Step 7. Add a new HTML/JavaScript Gadget
Step 8. Paste the following code in the empy HTML box:
Note: Replace no. 5 with the number of posts you want to be show.
Step 9. Press Save and Enjoy!
More about → Add Random Posts Widget to Blogger
How to add Random Posts Widget to Blogger
Step 1. Log in to Blogger Dashboard, and select Template > Edit HTML (click on Proceed button if needed)
Step 2. Select "Expand Widget Templates"
Step 3. Find (CTRL + F) the following tag:
]]></b:skin>
Step 4. Just above it, paste the code below :
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
Step 5. Save Template.
Step 6. Go to Layout, click on Add a Gadget
Step 7. Add a new HTML/JavaScript Gadget
Step 8. Paste the following code in the empy HTML box:
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKXcxYb9gS7M33JkY5XhRx90a8nXLH9DwF-svsoWTOQ32mupnQT4PEN5IjZyMn_Mk2BMDnqXrFTlpT9IMh8-bzmBZ6_ksM_4s3bs-5Pr1wjwrigMUARQRs5Ku3j2y18ERFOQAqWXKiuPg/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
Note: Replace no. 5 with the number of posts you want to be show.
Step 9. Press Save and Enjoy!
{ Add comments }
Remove - Subscribe to: Posts (Atom) from Blogger
Posted by Unknown
In many Blogger templates there is a "subscribe to: Posts (Atom)" link, so that the blog visitors can subscribe to the Atom feeds. Considering the fact that many readers use RSS for their blog feeds, many of you could find this link pretty useless. Moreover it occupies space at the bottom of the template and it doesn't look nice at all. In this case you might want to remove it.
How to remove subscribe to: Posts (Atom) link?
Step 1. Go to your Dashboard > Template > Edit HTML (click on Proceed button if needed)
Step 2. Select "Expand Widget Templates"
Step 3. Find (CTRL + F) this line:
Step 4. Remove it and Save Template.
This should remove subscribe to: posts (atom) link.
More about → Remove - Subscribe to: Posts (Atom) from Blogger
How to remove subscribe to: Posts (Atom) link?
Step 2. Select "Expand Widget Templates"
Step 3. Find (CTRL + F) this line:
<b:include data='feedLinks' name='feedLinksBody'/>
Step 4. Remove it and Save Template.
This should remove subscribe to: posts (atom) link.
{ Add comments }
Add Multi-Colored Popular Posts to Blogger
Posted by Unknown
Popular Posts is a widget provided by Blogger that displays the most viewed posts on the blog in the last 7 days, last month and of all time. It has three displaying modes: display title only, display title with image thumbnail or display title along with the posts snippets.
To customize this popular posts widget, we have to add a new variable and some CSS codes to our blogger template. So let's begin:
How to add multi-colored popular posts to Blogger
Step 1. Login to your Blogger Dashboard, go to Design >> Edit HTML
Step 2. Select "Expand Widget Templates" (make a backup first)
Step 3. Search for the following tag:
Note: If you can't find it, paste it below the autor information that is usually below this tag (CTRL + F):
...and should end up with this symbol:
Step 4. Copy and paste just below/after this tag, the next code:
Step 5. Search for the following piece of code:
Step 6. Just above/before it, add this code:
Step 7. Now find the following code:
Step 8. Delete it until you reach at this tag (delete the </b:widget> also):
Note: Be very careful when removing it. The entire fragment of code should look like this:
Step 9. After you have deleted the above code, paste the following in its place:
Step 10. Save template.
Settings
- Go back to Layout and click on the edit link of Popular Posts widget.
Select to "display up to 5 posts", then Save the widget.
- You can easily change the background color of the popular posts widget, going to Template >> Customize >> Advanced >> PopularPostsBackground and there you can select any color you want.
You're done!
If you are enjoying reading this blog, please like & subscribe for more tutorials.
For any questions or suggestions, leave a comment below.
More about → Add Multi-Colored Popular Posts to Blogger
To customize this popular posts widget, we have to add a new variable and some CSS codes to our blogger template. So let's begin:
How to add multi-colored popular posts to Blogger
Step 1. Login to your Blogger Dashboard, go to Design >> Edit HTML
Step 2. Select "Expand Widget Templates" (make a backup first)
Step 3. Search for the following tag:
/* Variable definitions
====================
Note: If you can't find it, paste it below the autor information that is usually below this tag (CTRL + F):
<b:skin><![CDATA[/*
...and should end up with this symbol:
----------------------------------------------- */
Step 4. Copy and paste just below/after this tag, the next code:
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
</Group>
Step 5. Search for the following piece of code:
]]></b:skin>
Step 6. Just above/before it, add this code:
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
Step 7. Now find the following code:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
Step 8. Delete it until you reach at this tag (delete the </b:widget> also):
</b:widget>
Note: Be very careful when removing it. The entire fragment of code should look like this:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Step 9. After you have deleted the above code, paste the following in its place:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKXcxYb9gS7M33JkY5XhRx90a8nXLH9DwF-svsoWTOQ32mupnQT4PEN5IjZyMn_Mk2BMDnqXrFTlpT9IMh8-bzmBZ6_ksM_4s3bs-5Pr1wjwrigMUARQRs5Ku3j2y18ERFOQAqWXKiuPg/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKXcxYb9gS7M33JkY5XhRx90a8nXLH9DwF-svsoWTOQ32mupnQT4PEN5IjZyMn_Mk2BMDnqXrFTlpT9IMh8-bzmBZ6_ksM_4s3bs-5Pr1wjwrigMUARQRs5Ku3j2y18ERFOQAqWXKiuPg/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
Step 10. Save template.
Settings
- Go back to Layout and click on the edit link of Popular Posts widget.
Select to "display up to 5 posts", then Save the widget.
- You can easily change the background color of the popular posts widget, going to Template >> Customize >> Advanced >> PopularPostsBackground and there you can select any color you want.
You're done!
If you are enjoying reading this blog, please like & subscribe for more tutorials.
For any questions or suggestions, leave a comment below.
{ Add comments }
Recent Comments Widget For Blogger
Posted by Unknown
The Recent Comments Widget for Blogger displays the recent blog comments on your blog's sidebar, showing a snippet of the last comments along with the title of the post to which the comment was made. If you want to encourage your readers in leaving comments on your blog, this is a widget I would recommend.
How To Install The Recent Comments Widget For Blogger
Step 1. Go to your Blogger Dashboard >> Layout >> Add a Gadget
Step 2. From the pop-up window, scroll down and choose the HTML/JavaScript option:
Step 3. Now copy and paste the below code in the HTML/JavaScript box:
<script style=text/javascript src="http://fe-blogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://fe-blogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html>Recent Comments Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>
Step 4. Replace your-blog-name with your blog url.
Step 5. Click Save and you're done.
Hope you'll enjoy it!
{ Add comments }
.jpg)
