Blogger Widget: Show Upto 25 Recent Comments with Summaries

A simple recent comments widget allows us to display 5 latest comments in sidebar. Now you can display up to 25 comments with summaries of the comments.

Steps to Install the Widget

1. Go to Design then Page Elements.
2. Click on Add a Gadget link in your sidebar
3. A new window will open with a list of widgets, chose HTML/JavaScript widget from there.
4. Once that widget is opened, paste the following code in the Content area of the widget:
   

   <ul style="font-style: italic;"><script style="text/javascript">
   function showrecentcomments(json) {
   for (var i = 0; i < 20; i++) {
   var entry = json.feed.entry[i];
   var ctlink;
   
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   ctlink = entry.link[k].href;
   break;
   }
   }
   ctlink = ctlink.replace("#", "#comment-");
   var ptlink = ctlink.split("#");
   ptlink = ptlink[0];
   var txtlink = ptlink.split("/");
   txtlink = txtlink[5];
   txtlink = txtlink.split(".html");
   txtlink = txtlink[0];
   var pttitle = txtlink.replace(/-/g," ");
   pttitle = pttitle.link(ptlink);
   if ("content" in entry) {
   var comment = entry.content.$t;}
   else
   if ("summary" in entry) {
   var comment = entry.summary.$t;}
   else var comment = "";
   var re = /<\S[^>]*>/g;
   comment = comment.replace(re, "");
   
   document.write('<li style="text-align:left">');
   document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
   document.write(' on ' + pttitle);
   document.write('<br>');
   if (comment.length < 150) {
   document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');
   }
   else
   {
   comment = comment.substring(0, 150);
   var quoteEnd = comment.lastIndexOf(" ");
   comment = comment.substring(0, quoteEnd);
   document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');
   }
   }
   document.write('</li>');
   }
   </script>
   <script src="http://bloggerfaqs.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
   </script></ul>

5. Save the widget and see your blog for changes.

Widget Customization

You need to replace http://bloggerfaqs.blogspot.com/ with your own blog address. You can further make customization by changing the value 20 to some higher or lower value. This value is for the number of comments and you can't have more than 25 comments. Last thing you can modify is font-style: italic; which you can change to font-style: bold; or font-style: normal; to change the font styling.

Blogspot Hack: Leave Title Field Blank in Blogger Gadgets

Since the introduction of new Blogger Template Designer, many people have complained about a problem. Blogger no longer allows you to leave the Title field of blank. This is true for any widget/gadget. So, here is a very simple way to trick Blogger and leave the Title field blank.

How to Create a Gadget with Blank Title Field!

Blogger widget titles use h2 heading tags so, whenever you create a new gadget, simply put the following code in the Title field:

<h2></h2>

You will not receive any error and the Title will remain blank. That's it!

Blogspot How To: Remove "Subscribe to: Posts (Atom)" Text

Where does this text appear?

This text appears by default on all Blogger templates under the posts. It is normally annoying for most of the users but you can easily remove it.

How to Remove it???

You can easily remove it by following these simple steps:

Steps!

1- Go to Design and then Edit HTML.

2- Find the following code:

.feed-links {
clear: both;
line-height: 2.5em;
}

3- Simply replace the above code with the following code:

.feed-links {
display:none;
}

4- Check the Preview button to see the result.

Blogspot Tutorial: Add StumbleUpon Button in Posts

StumbleUpon is a popular social bookmarking site where users share their favorite web pages. You can add StumbleUpon button in the footer of each post. This button would make it easy for readers to share your blog content with the rest of the world. This can drive more traffic to your blog.

Lets Add the StumbleUpon Button!

1- Log in to your Blogger account and go to Design then Edit HTML tab.

2- Check Expand Widget Templates option and the page will automatically refresh.

3- Find the following line of code:

<data:post.body/>

The above code might be in this form:

<p><data:post.body/></p>

4- Paste the following code right after the above code:

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; +data:post.url'><img alt='StumbleUpon' border='0' src='http://www.stumbleupon.com/images/small_su_logo.png'/>
</a>

5- Save your template and you're done.

Want More Buttons?

StumbleUpon has introduced many new badges/buttons with clear instructions, feel free to give 'em a try. Here is the link:

http://www.stumbleupon.com/buttons/

Blogspot Tutorial: Add a Twitter Retweet Button in Posts

You can easily add retweet buttons on your Blogger-Blogspot blog. Such buttons allow blog readers to share content on Twitter with others. When people will tweet about your blog, you'll get free marketing and traffic for your blog.

Whoa! We Can Use 2 Buttons Here!

Yes, we can add 2 different type of buttons provided by different sites. twitthis isn't very popular but tweetMeme is really shining out there. Anyways, both buttons will do same thing so it depends on your choice.

Add twitThis Twitter Retweet Button

To add twitthis Twitter button, follow the following steps:

1- Go to Design and then Edit HTML tab.

2- Check Expand Widget Templates.

3- Find this tiny piece of code:

<b:if cond='data:post.title'>

4- Add following code just before the previous line of code:

<div style='float:right; margin-left:14px;'>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='TweetThis Button' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_jsqd551XyOk9cf-o06uV9Sgxx2H_e4W-DdDLYcXacNdYcYWjeQN2oZVEuBfVtuA-ZOTCJwN42gCVy-O9ZUX_p-lRGY2Nymxa3dONMVCQ1iveH72Dn0HrDDYk7ENnf7tSNGl-A7uLUTs/s1600/Twitter.gif'/></a>
</div>

5- Now, we have added our button just below the posts, so save the template and see the result.

Add tweetmeem Twitter Retweet Button

Adding tweetmeme Twitter Retweet button is also very easy. Just follow all the steps of twitthis Twitter Retweet button but the code to add in step 4 will be this:

<div style='float:right; margin-left:14px;'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>

Wanna Add Some More Such Buttons?

I've also written tutorials to add StumbleUpon button, many social bookmarking buttons and Facebook Share button. Feel free to check them out!

Blogspot Tutorial: How to Add Adsense Ads Below Header

Inserting Adsense code in your Blogger-Blogspot header can be really beneficial. When a visitor comes to your site, he or she will definitely look at your header and then it's your turn to cash that first look. Just follow the steps below.

Lets Do Some Coding Work!

1- Go to Design and then Edit HTML tab.

2- Backup your current layout.

3- Don't check Expand Widget Templates.

4- Find the code given below. You can find it just after </head> tag:

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="false" title="Blogger FAQs(Header)" type="Header">
</b:widget>
</b:section></div>

The above code could be a little different but you'll definitely find a similar code in your template. If you're totally confused then feel free to ask for help.

6- In the above code change maxwidgets="1" to maxwidgets="2". Also change showaddelement="no" to showaddelement="yes" and save your template.

7- Now go to the Page Elements tab and there you'll see that you can add another widget in your header.

8- Insert your Adsense code there and make more money.

Wanna Support Beta Templates?

Beta Templates have been helping folks for a while now without asking anything in return. However, if you wanna help us then simply add our link anywhere in your blog. Instructions for adding link can be found at the bottom of this page.

Blogspot Tutorial: How to Remove Labels Post Count

This is a really simple tutorial. I've seen a lot of people wanted to know how they can remove the "Labels Post Count". Just follow these simple steps.

Steps:

1- Make sure you've added the labels widget in your blog.

2- Go to Edit HTML tab.

3- Click on Download Full Template link to backup your template.

4- Then check the Expand Widget Templates.

5- Now search for the following line of code and delete it.

<span dir='ltr'>(<data:label.count/>)</span>

6- Whoa! You're done in a flash, just save your template and enjoy the results.

Love Us? Support Us!

If you want to promote Beta Templates, feel free to give us a back link. The instructions are given at the bottom of this page.

Blogspot Tutorial: How to Remove the Blogger Navbar

A lot of people ask how to remove the navigation bar present at the top of every Blogger/Blogspot blog. We can simply add a tiny piece of code to remove it.

Steps to Follow

1- Go to Design and then Edit HTML tab.

2- Find ]]></b:skin> and place the following code right before it:

.Navbar {display: none !important;}

The result should look something like this:

.Navbar {display: none !important;}
]]></b:skin>

3- Preview your template and then save.