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. 

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.

If you want to show your blog professional look you have to remove the Navbar. It is a easy tactics. While this one isn't necessarily an SEO tip it will make your blog look more professional and will enhance the overall user experience, so in the end it will serve the same purpose.

So you want to hide that ugly navbar at the top of your blogger blog?. Easy, just go to the Layout tab and click on Edit HTML, this will bring up the XML source of your template (be careful here). Then just insert this CSS code and save:
<br />#navbar-iframe {<br />height:0px;<br />visibility:hidden;<br />display:none<br />}<br />
Now everything has done!!!

Seo(search engine optimization) is one of the most important thing to get traffic in your website. Some people want to earn money by blogging but they have no idea about search engine optimization. Blogger is one of the best blogging platform for those who want blogging without any cost. Blogger.com is the one who started it all, hosting more blogs than any service or personal blogs combined.Everyone has analyzed and optimized Wordpress to boost their rankings in every aspect, but left blogger/blogspot users looking for tips.

Welcome to Blogger seo tips - Part 1

Here i am showing about the setting of your blogger template.

Blogger settings:

1. Title: The title of your Blog should be simple and shot with out any preposition.
2. Description: The description should include your keywords that you are aiming and should be a complete sentence.
3. Add your Blog to our listings?: YES
4. Show Email Post links?: NO
5. Send Pings: Yes
6. Date Header Format: Choose the one with the less text, Ex: “8.9.07″
7. Comments: Show, but delete the unrelated/short comments.
8. Backlinks: Hide, no need to share your PageRank value.
9. Enable Post Pages?: YES,
10. Archive Frequency: Weekly. Its better to have the least number of posts on a single page.

On my next post i will show how to optimize your blogger template to increase your Blog's seo potential.

xHighlighter is a script which is written in javascript. It can insert colored code snippets on a web page using client-side javascript only. It is ideal tool for users of BLOGGER because we do not have server side resource to parse and highlight the code. And we are lazy, we do not want to write a lot of CSS to just post a code snippet.

Its a little twisting to make it properly.


Step 1: Download SyntaxtHighlighter From Here

Step 2: Extract the rar file. Upload Script and Style folder's file to any host or website which can be linked from your blog.

Step 3: Login to your Blogger account go to Setting> Template > Edit HTML make the following changes. Paste this code after <!-- end outer-wrapper -->

<link href='http://[YOUR HOST]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> <br /><script src='http://[YOUR HOST]/shCore.js' type='text/javascript'/> <br /> <br /><script src='http://[YOUR HOST]/shBrushCpp.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushCSharp.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushCss.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushJava.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushJScript.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushSql.js' type='text/javascript'/> <br /><script src='http://[YOUR HOST]/shBrushXml.js' type='text/javascript'/> <br /> <br /><script class='javascript'> <br />//<![CDATA[ <br /> function FindTagsByName(container, name, Tag) <br /> { <br /> var elements = document.getElementsByTagName(Tag); <br /> for (var i = 0; i < elements.length; i++) <br /> { <br /> if (elements[i].getAttribute("name") == name) <br /> { <br /> container.push(elements[i]); <br /> } <br /> } <br /> } <br /> var elements = []; <br /> FindTagsByName(elements, "code", "pre"); <br /> FindTagsByName(elements, "code", "textarea"); <br /> <br />for(var i=0; i < elements.length; i++) { <br />if(elements[i].nodeName.toUpperCase() == "TEXTAREA") { <br /> var childNode = elements[i].childNodes[0]; <br /> var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n')); <br /> elements[i].replaceChild(newNode, childNode); <br /> <br />} <br />else if(elements[i].nodeName.toUpperCase() == "PRE") { <br /> brs = elements[i].getElementsByTagName("br"); <br /> for(var j = 0, brLength = brs.length; j < brLength; j++) { <br /> var newNode = document.createTextNode("\n"); <br /> elements[i].replaceChild(newNode, brs[0]); <br /> } <br />} <br />} <br />//clipboard does not work well, no line breaks <br />// dp.SyntaxHighlighter.ClipboardSwf = <br />//"http://[YOUR HOST]/clipboard.swf"; <br />dp.SyntaxHighlighter.HighlightAll("code"); <br />//]]> <br /></script> <br /> <br /></body> <br /></html> <br /> <br />
Step 4: Now you can post code snippet on BLOGGER using either "pre" or "textarea" tag.
Step 5: You can also See tutorial HERE how to use "textarea" or "pre" tag.

Now everything has done !

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.