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)

We always attract a great design layout or content when you click on the website, but rarelynoticed textures and patterns used. If only the background color, many websites are not asimpressive as today.

Patterns can be simply repeating the stipes simple or dots, others may be more difficultwith a complex combination of images and colors. The employer must go with the overall style of the website, or it could be something distractvie and annoying.

We gathered another 80 exciting new models. Best of all, they are free to use. What are you waiting for? Use it on the website and put your brand new visitor !!




Click here and Get 80 free Blogger Pattern. 

Meta Tag has significant important of a website. If you don't know about adding meta tag in Blogger, here a detailed information about adding meta tag in your blogger website.

Importance of Meta Tag 
Meta Tags are such things by which the search engine find out the web  site. In web search the meta description will be shown. Meta key words also important in Search Engine Optimization. It also increase the  PR of webpage.


How to Add Meta Tag in Blogger (Blogspot):

• Sign in to Blogger.com
• Goto Template > Edit Html
• Click Proceed 
• Ctrl + F 
• find <head>

Copy and Paste the following after <head> :

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='AUTHOR NAME HERE' name='author'/>

Here the procedure 

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

In my previous article I talked about Link building Tips for blogger. Toady I’ll try to discuss about 5 basic steps for off page search engine optimization (SEO). It’s totally basic technique and result from my own experience.

I’ll discuss for who have no experience about off page search engine optimization. Off page seo technique is similar to Link building method. If you search in google for “song download” you’ll find 122,000,000 website in search engine result page (SERP). But main thing is which one in first place. First place acquired website has done on page and off page seo.

Here is popular off page seo techniques:

1. Directory submission:
Its one of the most popular and most practiced way to submit website in directory and get a quality backlinks. I have talked in my previous post about a list of directory where you can submit your site. These web directory offer free links or paid links. If you have a good amount of money for directory Submission, you may choose high traffic directories. They start charging from $15 to $ 100 for a certain period. Search engine bots frequently visits well known directories. So there is a chance to get quality back links.

2. Article/ Blog submission:
This is very popular and appreciated technique. Suppose you have a site about “Football accessories”, you may write article your product related web site about your product, service, price etc. You can open a new section of your web site which is Blog section. You may write article daily, weekly or monthly write about your products , service etc. This will help your pages to be indexed soon and come up in SERP.

3. Signature posting in forum:
Internet is a place where always someone to help you. This concept is created Forums. Forums are off different kinds of – computer forums, fashion forums, doctors’ forums etc. If become a member of forum related to your website’s niche. Most of the forum allows you to keep your website’s link after certain amount of posting. It allows to get a quality back link from related topics.

4. Link Exchange:
Link Exchange has lost it’s popularity. Link Exchange means Site A will place Site B link in it’s website and Site B will place Site A link it’s website. Now a days, new means of Link exchange is taking place – 3 ways Link exchange, so that Google and other search engine have little idea of link exchange. According to that Site A will place Site B link, Site B will place site C link, Site C will place Site A link!

5. Social Bookmarking :
Social Bookmarking gaining popularity now a days. Its not only a means of backlinks but also generates huge number of potential web traffic. Digg, Stumbleupon, Technorati, Del.icio.us are very well known bookmarking sites. So you may try other dofollow bookmarking sites if you are looking for backings; link Spurl, Mister Wong, Backflip, Bibsonomy etc. Otherwise you should use previously mensioned bookmarking sites for traffic.

If you have different views, please feel free to post comments.

Today i'm showing How to optimize image in blogger(Blogspot). Its another quick seo Tips for blogger. 8 things always keep in mind when you put image in a blog.

• Include the keyword in your image name:
  Example: Instead of "DSC5548.jpg ", Its better to name it as "seo-tips-for-blogger.jpg".
  
  Never use characters/spaces in filenames as they will be encoded. Ex: – Instead of "DSC%25644cat.jpg" it’s better to name it "DSC-25644cat.jpg"

• Use the ALT tags:
  ALT tags are recommended, though their usage is debated. Let’s put it this way. It may not give you a good push in the SERPS, but definitely, you don’t want to lose an opportunity.
  Example:<br /><img src="SEO-tips-for-blogger.jpg" width="257" height="329" alt="Snowing - Seo tips, Iseoblogger" /><br />
  

• Use the "Title" attributes:
  Title attributes are a great way to add meaningful information about the images. Use it. Example:- Title="White cat sitting on the wall." P.S – Don’t forget the image search traffic.

• Place the image within ample text:
  So that, engines can crawl the text and make out what the image is about, if at all the ALT tags, filenames and TITLE attributes aren’t available.

• Do not use the same ALT tags for two or more images on the same page.

• Do not use the same TITLE attributes.

• If possible, place the image amidst the textual content.
• Name the folders with your keyword variants in place.

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.

The tips of link building give you a guarantee that you will get link from established website. This differs from content-oriented development strategies which hope to gradually attract natural editorial links.

These link building tips focus more on targeted link placement or link insertion, whereby you are likely to control the specific anchor text used.

• Submit your site to Web Directories: This is a pretty monotonous process that can get you several hundred backlinks if you have the time. An alternative would be to hire a manual directory submitter. Here’s a list of web directories you can use. You can also find some blog directories here.
  
• Submit Press Releases to PR sites: A basic press release about your website’s launch can be released to several PR websites, who will distribute it to various online news outlets. A good way to get a free link. I recommend using PRWeb and PRLeap
  
• Reciprocal Links with Similar Websites: Its important to pick sites that are of high relevance so you’ll not only get links but traffic. Reciprocal linking can be useful from the beginning but don’t overdo it. You can find link partners by emailing them directly or searching through webmaster forums.
  
• Article Submissions. Create a short article on your niche topic and submit it to article directories for a backlink and some traffic. You might get more links if your article is picked up and published on other websites. Here is a list of article directories, sorted by Alexa and PageRank.
  
• Social Media Profiles: There a whole bunch of social websites online which allow you to insert a link to your website on the profile page. Sign up for some of them, preferably using a username and avatar that brands your business or you as a person. This might come in useful when you decide to promote your site via the social website in the future.
  
• Social Bookmarking/Voting Websites: Certain social voting websites like Netscape or Digg are often crawled by search engines and their links do help to get a website indexed. 3spots has the biggest list of social voting and bookmarking websites I’ve seen so far.
  
• Forum Signatures: Sign up for some forums in your niche and start contributing to ongoing discussions. Insert a link to the homepage or some inner pages of your site.
  
• Create a Tool, Theme or Widget: Pay a designer to come up with an add-on application or template that is related to a specific social network, popular website or platform. Include a credit link that points back to your designated website.
• Blogs on Other Blog Platforms: Use existing blogs you have on other blog networks. Or set up different versions of your blog on different blog networks like Wordpress.com, Blogger and Xanga. Link to specific webpages on your website.
  
• Comment on Other Blogs: Start commenting on relevant and popular sites in your niche. Don’t just spam for links but focus on building a relationship with other bloggers as well. Write a relevant comment and try to avoid using keyword names or signature links.

Post a comment if you feel something Wrong.

Continued from my previous post | Part-1 | Part-2 |

Welcome to Blogger seo tips - Part 3

• Do not link to link-farms or other search engine frosty areas.
• Title tags for text links. Add the title tag within the HTML of your text link to add weight to the link and the page where the link resides. This is like the alt tag for images.
  
  My site contains navigation menus on the left and right of the page. The menu consists of links not images. When you hover over the link with your mouse, the title of the link emerges. View the source of this page to see how to add this tag to your links.
• Do not use entrance pages. Entrance pages are designed for robots only, not humans. Search engines like to index human friendly pages which enclose content which is related to the search.
  
• Describe your images with the use of the alt tag. This will help search engines that index images to find your pages and will also help readers who use text only web browsers.
• Submit to the search engines yourself. Do not use submission service or submission software. Doing so could get your site penalized or even banned.
  
  Here is the submission page for Google AddURL

Submit only once. There is no need to submit every two weeks. There is no need to submit more than one page. Robots follow links. If your site has a nice link trail, your entire site will get indexed.

Google Analytics is a great tool for anyone looking to do SEO. It allocates you to track your visitors, see where they come from, how they got there, how much time they spend on your site and much more. Just follow these easy steps to add it to your blogger account.

1. First of all you have to go Sign up for Google Analytics.At time of your signing up process you have to enter Google account information and Blog URL.
2. After the initial signup is complete you'll get some javascript code to add to your Blog, choose the "New Tracking Code (ga.js)".
3. Copy the javascript code to clipboard.
4. Go to your Blogger account. Head over to the Layout Tab and Select "Edit HTML". Here you will see the HTML code for your template (be carefull here so you don't mess up your blog).
5. 1. Scroll down all the way to the bottom until you find the <br /><body> <br /> tag. Paste the JavaScript code just before the body tag.
6. Wait a couple of hours, then log back into the Google Analytics website and click on "Check Status" button. If it says that it can't find the code just try again latter, sometimes it takes a while.
7. Now every things has Done !!!!!!
   

In my First post about seo i discussed about Blogger setting haw to set up the blogger template.Today I will discussed about blogger seo part- 2.

Welcome to Blogger seo part - 2

• Introduce keywords within the title tag so that search engine robots will recognize what your page is about. The title tag is positioned right at the top of your article within the head tags. Introducing a keyword or key phrase will greatly develop your chances of fetching targeted traffic to your site.
  
  Confirm that the title tag includes text which a human can relate to. The text within the title tag is what shows up in a search result. Care for it like a headline.
• Use the similar keywords as anchor text to link to the page from different pages on your site. This is particularly useful if your site contains many pages. The more keywords that link to a specific page the better.
• Make sure that the text within the title tag is also within the body of the page. It is unwise to have keywords in the title tag which are not contained within the body of the page.
  
  Adding the exact same text for your h1 tag will tell the reader who clicks on your page from a search engine result that they have clicked on the correct link and have arrived at the page where they planned to visit. Robots like this too because now there is a relation between the title of your page and the headline.
  
  Also, sprinkle your keywords throughout your article. The most important keywords can be bolded or colored in red. A good place to do this is once or twice in the body at the top of your article and in the sub-headings.
• Do not use the exact same title tag on every page on your website. Search engine robots might determine that all your pages are the same if all your title tags are the same. If this occurs, your pages might not get indexed.
  
  I always use the headline of my pages as the title tag to help the robots know exactly what my page is about. A good place to insert the headline is within the h1 tag. So the headline is the same as the title tag text.
• Do not spam the description or keyword Meta tag by stuffing pointless keywords or even spend too much time on this tag. SEO pros all agree that these tags are not as important today as they once were. I just place my headline once within the keywords and description tags.
  

Those who are using Blogspot (hosted in blogger) they can use many template like wordpress.
Today i'm discussing about the best places where you can find best seo template for your blogger web site.


bTemplates
bTemplate is a great site. You can find more than 1,060 template from here. Including 4 column template.


Blogger Buster
Blogger Buster one of the best site to find out template.You can find here some tutorial how install blogger template.

Jack Book
Jcak Book is also a good place to find out blogger template.Highly popular template has been released by Jack book.

eBlogtemplate
One of the largest collections of themes available for Blogger, with conversions and reviews of themes that have been released by other authors. Detailed and clear instructions have been provided with each theme released by the site’s author.

Blogger-Template
This is a place where the oldest template resource you find.All these templates are in xml format.


GosuBlogger
Beautiful templates are showcased here, along with designs that readers can submit to be converted to Blogger templates, typically from other platforms, such as WordPress.


BlodAndWeb
BlogAndWeb is a Spanish website that offers a huge collection of free Blogger Templates converted from popular Wordpress Themes. Except for a few, most of the Blogger templates are pefectly working.

Okey, There are many tools for checking site rankings, backlinks And social popularity. KPMRS is one of them. You can check your site rankings, backlinks And social popularity by using this tool. Its a free tool to use.



Its feature:

• Iphone Application Check your website rankings instantly from your iphone.
• Social Popularity Tool Find out how popular is your site on social media websites
• Website Discovery Tool It shows you the list of new keywords for which your website was found on search engines.
• Get Email Alerts Receive email notifications whenever your website rankings change.
• Track Backlinks Know the number of websites linking back to your website.

Try KPMRS here

1.Follow Me On Twitter Badges

- Different Badges You can choose

- Non customizable

2. Twitter Custom Text button generator. – Giving A Tweet

- Customizable

- Not so Well design

3. Custom Twitter Signature Badge – Twignature

- Different sized button

- Customizable signature style badge

4. Twitter Follower Count Badge – Twittbadges

- More than one style to choose from
- Customize colour, text etc

5. Cool Twitter “Follow me” badges-Sweet Tweet

-No customization here, but a good collection of “Follow me” badges, suitable for all type of blogs here

6. Twitter Social Media Profile Karma badge-Duck Duck Go

This badge actually pulls off data from any social network of yours and displays the data in numbers. It can also be used with other popular social networks.

7. Twitter Follower Ratio Badge-Tff Ratio

Shows off your vital twitter stats and a brief comment about how you’re doing with it. Not customizable, but nice !

8. Twitter Counter

And the obvious, Twitter counter. Displays follower number with basic customization.

Another way to help people find your Blog besides Organic Search and SEO is to submit your blog to Blog Directories. There are tons of them out there. Some are paid, some are free, here is a top 20 list:

1. Best of the Web Blog Search La Crem de la Crem, Best of the Web’s Blog Directory is very selective and only lists aged and valuable blogs. A link from here is majestic and well deserved.

2. EatonWeb Blog Directory is a real jewel with many aged inbound links and a blog rating system. You may have to pay a fee for your blog to be reviewed, but like Yahoo, the review fee is well worth the few dollars.

3. Blog Hub offers a drop down category and member blog list. With its “new blogger” list and hot topics, Blog Hub is a great directory to list your site.

4. Upon visiting Bloggernity, you find a crisp, clean, and easy to navigate site. Scrolling down, you find the new blogs. As there is little advertising on the home page, it is pleasant to the eye of the reader as well.

5. Blogarama has an impressive listing of over 65,000 blogs. The site is well designed and follows the same content categories as many other sites.

6. One of the most selective Blog Directories on the web (and Wordpress powered), Blog Search Engine is owned by Performancing’s parent company and serves search results powered by IceRocket.

7. Blog Catalog features a vast directory of categories, from academic to writing, while offering the ability to search by country, language, or user. It has a no frills design, but offers convenient member access through simple blog registration.

8. Globe of Blogs has too many features to list. In order to be listed on the site, the blog must not be commercial. The site may appear to be busy, but I like the features of being able to search by title, author, or subject. Narrowing the search becomes easier on this blog.

9. The ultimate directory of British blogs connotes all things British. It is not directed by location, but by the culture! It is asked that bloggers be genuinely “britished.” Being listed in this blog reaches readers all the way across the pond!

10. Blog Universe is the perfect place to promote your video or podcast themed blog. Its layout is easy to navigate. Although the content is limited, it is an all around good directory site worthy of submission.

11. Bigger Blogs is a relatively new blog directory with only a few blogs registered. The blog is intertwined with a business directory. The blog section is difficult to find, and it is located through a link on the right side of the business directory page. However, the benefit is that the earlier you are accepted on a blog directory, the more exposure your blog will obtain. In addition, a back link is indeed a back link, so this can help with your search engine placement.

12. Bloggeries has the best categories and subcategories home page on the internet. The layout is clear and concise, and readers are able to find what they are looking for in a snap!

13. Bloggapedia has an interesting and eye catching homepage. Readers are easily connected to the top blogs and newest posts. Innovative categories and a colorful design make this blog directory a hit.

14. Spillbean is a well-designed blog directory site with categories such as health, society, internet, and personal. The site is aesthetically pleasing, but there are not many listings yet.

15. Blogging Fusion is a blog with over sixty categories. These categories include photo blogs and family focused blogs. Blogging Fusion has an good amount of blog listings within the directory, and it also has visitor stats available.

16. Blogflux is not only a tool for bloggers, but a directory that has the listings in alphabetic order. The blog listings are organized and clear. It is definitely an effective blog directory in which to be listed.

17. The blogs on the top listings of Bloglisting are fun, colourful, and catch the attention of the reader. Bloglisting displays the page ranking blogs, which is a helpful tool when determining with whom you want to exchange links.

18. Blogio may be a small blog directory with few listings, but it worthy of a submission. Despite its small size, there are quality blogs and a solid ability to search on this site.

19. Blog Explosion claims to be the largest blog promoter on the internet. They have a vast directory but do not seem to have direct links. However, the listing in the directory can still show up in SERP’s, so keep this in mind.

20. Super Blog Directory is a great site that offers tools to posters that others do not. You can see the latest submitted links and blogs on the site, which is a perk that draws traffic into the directory.

Thanks to Loren baker for the info...