I wrote a lot of Blogger (blogspot.com) gadgets and howto's and so i decided to make a list for easy access to all these tips & hacks. The list will be updated as i write more such articles. Some of them were previously written by other people but i customized and optimized them. Gadgets For Blogger - is a blog that contains about a variety of widgets or gadgets specifically for the platform blogspot / blogger platform. Where we know the Blogger platform has been chosen by the blogger as the House blog.

---

Blogger Tabbed Navigation (Menu) - you can see the tabs menu in the right side of my blog.

Blogger: Recent Posts Widget Using Ajax - again, you can see my recent posts widget in the right side of my blog - the first tab.

Send Trackbacks from Blogger (blogspot.com) - Blogger doesn't automatically send trackbacks, but you can do it using this hack.

Blogger: Publish Code in a Stylish Box with Scrollbars Using CSS - besides adding a CSS box to your Blogger posts, it comes with a Greasemonky script which will add a new button to your new post page for easy code insertion.

Post HTML / CSS / JavaScript (and other) Code As Plain Text In Blogger - This encodes the code in plain text so you can post it on your blog with the click of a button.

3 Alternatives to Blogger's Default Comment System - 3 ways to get comments with gravatars, multiple pages, threated comments, etc etc for Blogger.

Use Drop-down Menu For Blogger's Labels - blogspot.com labels are a real pain to display if you have a lot of them, so why not put them in a drop-down list using this Blogger hack?

Blogger - current date on every post, even if it's posted on the same day - by default, Blogger only display a day's date once on the main page so if you have more than 1 post in a day, the date will only be displayed once. Now you can change that using this howto.

Blogger (blogspot.com) SEO optimization - reverse your page name with blog name so that a post appears like: "post title ~ blog name" in search engines, and also add auto meta description and keywords, etc.

Related posts (articles) for Blogger - best way to display related posts for blogspot.com blogs under each post.

New Blogger templates broken comments - how to fix them - most blogger themes you install have the comment system broken. Read on about how to fix them.

See Detailed Stats About Your RSS Subscribers Using a Tracking Image in Your Feed - this one isn't necessary for Blogger but it includes detailed howto for blogspot.com

Customize Technorati Top Tags Cloud Widget - the same as above: it's not necessary for Blogger but it's a nice widget to add to your blogspot.com blog.

Post Views HitCounter Using an Image Counter - it shows a counter to each post, displaying the number of views for that post (so it displays individual stats for each post). (you can see one at the end of this post)

Update 30 March 2009:

Read More (Excerpts) on Blogger's Home Page - show only excerpts on Blogger's home page, label pages and searches, with a "Read More" at the end of the posts. Update:how to add selective "read more", meaning that the "read more" link will only show up on the posts you want too, not all.

Update 22 April 2009:

How to Make a Blogger Contact Page - add a contact form and delete some page elements such as comment box, tags and so on to make a post really look like a contact page.

Update 04 May 2009:

Implement AdSense Depening on Post Author for a Wordpress / Blogger (blogspot.com) Blog - show Adsense ads depending on the user who posted a certain post, using channels with no need of multiple Adsense accounts or manually adding the code for each post.

Update 05 May 2009:

Breadcrumbs for Blogger (blogspot.com) - two types of breadcrumbs: based on a post's category (looks like this: Browse » Home » Tutorials » Breadcrumbs for Blogger) and based on a post's date (looks like this: You are here: Home > Year > Month > Post Title)

Today's tutorial is about ‘How to add page number widget in Blogger’.
Page number Navigation is really an awesome feature in Blogger.


Okay let’s start…………..
First of all…….who are bad at HTML they can easily add page number widget blogger. Just click the link and add your page navigation. :) It’s easy.

Now the complicated part for the advance users.

If you installed the widget you shouldn’t be here.. Scroll down to the label fix..

• Login to your Blogger Dashboard.
• Go to design>Edit HTML
• Keep unchecked “Expand Widget Templates”
• Now search

]]></b:skin>

and replace it with

.showpageArea a {

text-decoration:underline;

}

.showpageNum a {

text-decoration:none;

border: 1px solid #cccccc;

margin:0 3px;

padding:3px;

}

.showpageNum a:hover {

border: 1px solid #cccccc;

background-color:#cccccc;

}

.showpagePoint {

color:#333;

text-decoration:none;

border: 1px solid #cccccc;

background: #cccccc;

margin:0 3px;

padding:3px;

}

.showpageOf {

text-decoration:none;

padding:3px;

margin: 0 3px 0 0;

}

.showpage a {

text-decoration:none;

border: 1px solid #cccccc;

padding:3px;

}

.showpage a:hover {

text-decoration:none;

}

.showpageNum a:link,.showpage a:link {

text-decoration:none;

color:#333333;

}

]]></b:skin>

This is the CSS part if want you can modify it according to your need.

• Now the java script Part now find
  

</body>

and replace it with

<!--Page Navigation Starts-->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<script type='text/javascript'>

var pageCount=5;

var displayPageNum=5;

var upPageWord =&#39;Previous&#39;;

var downPageWord =&#39;Next&#39;;

</script>

<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>

</b:if>

</b:if>

<!--Page Navigation Ends -->

</body>

As you can see,there are some customizable parameters in this code

var pageCount=5;

This code determines the number of posts that would be displayed per page.

var displayPageNum=5;

This code determines the number of additional page navigation numbers that will be displayed on the page.

var upPageWord =&#39;Previous&#39;;

var downPageWord =&#39;Next&#39;;

These two lines determine the text that would be shown for the previous page and next page respectively.

Label Fix

Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template

How to Edit the template to cut short the posts per page?

Go to the Edit HTML page and expand the Widget Templates

Now find each occurrence of

'data:label.url'

(including the quotes) and replace each of it with

'data:label.url + &quot;?&amp;max-results=5&quot;'

Here 5 is the number of posts to be displayed per page.

Now if you are using the label cloud widget by phydeaux3,then find

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

and replace it with

a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;

Here also 5 is the number of posts to be displayed per page.

Now you should have the Blogger Page Navigation workng perfectly on your blog. :)

Courtesy http://www.bloggerplugins.org

This Widget will Display Recent comments on Blogger Blog.

Step 1: Go to your Blogger account.

Step 2: Next you have to go Dashboard > Layout > Page Element > Add a Gadget > HTML/JavaScript

Step 3: Copy and paste the code below:

<br /><script style="text/javascript" src="http://www.freewebs.com/filer/blogger/rc.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://YourOwnB1og.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments" ></script><div;><small>↑ <a href="http://www.madtomatoe.com/recent-comments-widget-for-blogger/">Grab This </a><a href="http://www.madtomatoe.com/" target="_blank" title="Recent Comments Widget">Widget</a></small></div> <br />



Step 4: In this code Look for the line:

<br />…src=”http://YourOwnB1og.blogspot.com/feeds/comments/default… <br />



Step 5: And replace the blog address (indicated in color blue below) with your own blog address.

Step 6: Add title and save it.
That's it !


Options:
Number of Comments
This widget is set to display 5 recent comments. If you want to change that number, just look for the number 5 in the code and replace it with the number of comments you want to be displayed. I recommend setting it between 4 and 8.

<br />… a_rc=5;var m_rc=false;var n_rc=true;var… <br />




Number of Characters (Excerpt)
This widget is set to display an excerpt of 100 characters of each comment. If you want to change that number, just look for the number 100 in the code and replace it with the number of characters you want to be displayed. *

<br />n_rc=true;var o_rc=100; <br />

*Recommended setting: 50 to 100.

Blogger [Blogspot] is a place where we can blogging for free. Most of the blogger template is not necessary widget ready. Recent post widget is one of the most important things for blogger(hosted in blogger). When a visitor come to your site he wants to know what are the most recent post of your blog.I have discussed much buzzing.I've also written "How add Related post widget in blogger?"


Now come to the point "How add Recent post widget in blogger?"
Here’s the procedure on how to install the widget on your blog :

Step 1: First Login to your Blogger account.
Step 2: Go to Layout > add a gadget
Step 3: Now copy the code paste it in to javascript/HTML widget
<br /><script style="text/javascript" src="http://scraptoall.googlepages.com/recentposts.js"></script><script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://yoursitename.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script> <br />
Also, don’t forget to add your sitename in the last line of HTML code where I’ve mentioned “http://yoursitename.blogspot.com”.
I mean just replace it with your sitename and you are done.

The above code refers to recent 10 postings from your blog. But if you want to change it you change it by changing the number of "numposts" in the given code

Example - If you want to show 5 posts instead of 10 then simply change numposts to 5 which will become :- numposts = 5

Now every thing has done.
I wish your Happy blogging.

Twitter is one of the best microbloggig site. If you want increase the number of twitter follower in Your blogger blog you can visit Twitterbutton.

They have some cool button and easy to install in your blogger blog.

If your Blog title appears first followed by Blog post title in search engine ,then just keep reading the post to solve this problem. Before going to solution, I will explain you how this event can make a bad effect on your Blogs or sites traffic.
Now come to solution. You can do two things:

• Blog Post Title+Blog Title
• Only Blog Post Title

Determine which one you will follow. I prefer second one (Only Blog Post Title). But I will show you the both process.

Step 1: Login to Blogger.com

Step 2: From Dashboard select Layout then click on Edit HTML.

Step 3: Then search for this tag <title><data:blog.pageTitle/></title> . Normally it is located in <head> section.
Now if you want to show only Blog Post Title then replace the above tag with following code:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Or If you want to Show Blog Post Title First + then Blog Title, replace the <title><data:blog.pageTitle/></title> tag with the following code.


<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

I hope this tips will help you to increase traffic in your blogger blog. Post a comment if you have any query.

The related posts widget will show a new related posts section below your post page.The related posts are fetched from the those posts having the same label as the current post.

1. Sign in to your blogger account.Go to the dash board.

2.From there goto Template &gt; Edit HTML and expand your widget templates(option on the right)

3.Now Search for this Code
</head>

4.Reaplace it with


<!--Related Posts Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;


}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib9ikwlymii9dZNDSnVP2g59qYHhLy7xo4Y74E8OCAtKwFViSmSwtCDb4TExvVAz8cgSY4lCcNal9LsufhalkiopTSMThPxNvJDW6TfNpLQR_cinWEZX9fYz_549IXHgnxA0fxL0lXSGc/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://files.bloggerplugins.org/related/related.js' type='text/javascript'/>
</b:if>
<!--Related Posts Scripts and Styles End-->
</head>
5.If you want to change the title of your widget you can edit this line of the above code

var relatedpoststitle="Related Posts";

6.If you want you can edit the blue and black colors present in this code
7.Now find this line of code

<div class='post-footer-line post-footer-line-1'>

Or

<p class='post-footer-line post-footer-line-1'>

8.Now immediately after any of these lines(whichever you could find) place this code snippet


<!-- Related Posts Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html' style='display:none'>Related Posts Widget</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts Code End-->

this line determines the number of related posts that are displayed..and by default 6 posts are fetched from each label.