Blogger Flick

Warning ! When you change your blogger template

2010-02-16T22:55:00.001+05:30

Blogger is adding additional features day-by-day and its very important to every blogger to get the new updates being made. So I decided to add a special column in my blog to publish the changes and new updates made by Blogger Team.

Here comes my first post in the category of news, its about the great change made by blogger to warn while you are changing the template. Many of us are bored with routine templates and changes it frequently, during this process we may lost our gadgets/widgets added to our blog.

The warning includes the confirmation message which includes options :

KEEP WIDGETS or DELETE WIDGETS

You can also see this in the below picture..

Anyhow these basic features helps us in many ways.

To republish or change date of your old posts

2010-02-15T22:55:00.001+05:30

I'm writing this post after a long break and here its about 'How to republish your blog posts' or 'How to change the date of your already published blog posts'.

You may be a serious blogger writing about many things in your blog. After sometime all those posts will be added to archives and can be visited through searches only. By using this simple trick you can change the date of your old post and can get it on your home page.

Normally a post editor looks like this :

Now click on post options and it expands like this :

Now, change the date in the 'Set date and time' box to current date and click on publish post. Now this older post will be published as a new one on your blog home page.

Click on images for clear view.Still find any difficulty just post a comment.

To add "Google Buzz" button to every post in blogger

2010-02-14T13:36:00.005+05:30

To add Facebook Share button and twitter retweet button to blog are already posted and now its time for Google Buzz. G-buzz is already competing with twitter and facebook. By adding "Google Buzz" button to your blog users can buzz your posts with a single click of it.

Get this button by following the simple trick. Note that this is not oficially released by google.

Step #1
Go to Dashboard > Layout > Edit HTML and click on Expand Widget Templates.

Step #2
Find this code in template

<div class='post-header-line-1'/>

Step #3
Now, after line that paste this code

For Compact size button

<a expr:href='"http://www.google.com/reader/link?url=" data:post.url "&title=" data:post.title "&srcTitle=" data:blog.title' target='_blank'><div style='text-align:right; margin-top:10px;'><img alt='Buzz It' src='http://i46.tinypic.com/ouprt1.jpg'/></div></a>

For Large size button

<a expr:href='"http://www.google.com/reader/link?url=" data:post.url "&title=" data:post.title "&srcTitle=" data:blog.title' target='_blank'><div style='text-align:right; margin-top:10px;'><img alt='Buzz It' src='http://i45.tinypic.com/2ezjtj9.jpg'/></div></a>

To change the position of the image just change the code in red to your desired values.

Step #4
Save the template. Find any difficulty just post a comment.

Images source : CS

Burn Out Bright : 2 column blogger template

2010-01-12T23:51:00.000+05:30

Burn Out Bright : 2 column blogger template

Demo | Download

This template is designed by Insight. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Left Sidebar
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Calender Date Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Bulletin Board : 3 column blogger template

2010-01-12T23:46:00.000+05:30

Bulletin Board : 3 column blogger template

Demo | Download

This template is designed by Falcon Hive and Theme Craft. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Right Sidebar
Background Images
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Blogger Tube : 3 column blogger template

2010-01-12T23:38:00.000+05:30

Blogger Tube : 3 column blogger template

Demo | Download

This template is designed by Dante Araujo. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Right Sidebar
Gallery Type Template
Content Slider
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Read More Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Blogger Press : 3 column blogger templat

2010-01-12T23:34:00.000+05:30

Blogger Press : 3 column blogger template

Demo | Download

This template is designed by Be-Insight. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Right Sidebar
Content Slider
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Read More Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Arto : 2 column blogger template

2010-01-12T23:30:00.000+05:30

Arto : 2 column blogger template

Demo | Download

This template is designed by Falcon Hive. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Good Comment System
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Black Background

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Arclite : 2 column blogger template

2010-01-12T23:27:00.000+05:30

Arclite : 2 column blogger template

Demo | Download

This template is designed by Deluxe Templates. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Good Comment System
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Background Image

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Glassical : 2 column blogger template

2010-01-11T22:56:00.002+05:30

Glassical : 2 column blogger template

Demo | Download

This template is designed by Cheth. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Good Comment System
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Read More Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Foodiary : 3 column blogger template

2010-01-11T22:47:00.001+05:30

Foodiary : 3 column blogger template

Demo | Download

This template is designed by Anshul. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Right Sidebar
Content Slider
Social Icons Gadget
Ads Ready
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Read More Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Bueno : 2 column blogger template

2010-01-11T22:33:00.002+05:30

Bueno : 2 column blogger template

Demo | Download

This template is designed by Anshul. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Two Menus
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Read More Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Simply 09 : 2 column blogger template

2010-01-11T22:27:00.001+05:30

Simply 09 : 2 column blogger template

Demo | Download

This template is designed by FBT. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Black And White
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Read More Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Maalaga : 2 column blogger template

2010-01-11T22:14:00.000+05:30

Maalaga : 2 column blogger template

Demo | Download

This template is designed by Anshul. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Social Icons Gadget
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Featured Post Gadget

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Maamo : 2 column blogger template

2010-01-11T21:55:00.002+05:30

Maamo : 2 column blogger template

Demo | Download

This template is designed by Anshul. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Social Icons Gadget
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Read More Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Magiting : 2 column blogger template

2010-01-11T21:36:00.000+05:30

Magiting : 2 column blogger template

Demo | Download

This template is designed by Theme Craft. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Social Icons Gadget
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Read More Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Fantastic Flowery : 2 column blogger template

2010-01-11T21:30:00.000+05:30

Fantastic Flowery : 2 column blogger template

Demo | Download

This template is designed by Theme Craft. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
RSS Gadget Ready
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Read More Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Grey Green : 2 column blogger template

2010-01-11T21:24:00.000+05:30

Grey Green : 2 column blogger template

Demo | Download

This template is designed by Theme Craft. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
RSS Gadget Ready
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Read More Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Bright Pink : 2 column blogger template

2010-01-11T21:01:00.000+05:30

Bright Pink : 2 column blogger template

Demo | Download

This template is designed by Theme Craft. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
RSS Gadget Ready
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Read More Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Box Tube : 2 column blogger template

2010-01-01T16:57:00.001+05:30

Box Tube : 2 column blogger template

Demo | Download

This template is designed by Buzz Myworld. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
RSS Gadget Ready
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Black and White Colors

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Birdies Secret Garden : 3 column blogger template

2010-01-01T16:53:00.001+05:30

Birdies Secret Garden : 3 column blogger template

Demo | Download

This template is designed by Blogger Templates Free. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Left & Right Sidebars
Ads Ready
Background Images
Compatible With Mozilla, Chrome and IE7
Search Box Ready

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Aspire : 3 column blogger template

2010-01-01T16:42:00.000+05:30

Aspire : 3 column blogger template

Demo | Download

This template is designed by Blogger Templates Free. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Right Sidebar
Ads Ready
Background Images
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Calender Date Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Compositio : 2 column blogger template

2010-01-01T16:34:00.000+05:30

Compositio : 2 column blogger template

Demo | Download

This template is designed by Design Disease. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Ads Ready
Tabbed Gadget
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Calender Date Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Clean : 2 column blogger template

2010-01-01T16:27:00.000+05:30

Clean : 2 column blogger template

Demo | Download

This template is designed by TNB. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Ads Ready
Clean Template
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Plain Header

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Paper Wall : 2 column blogger template

2010-01-01T16:23:00.000+05:30

Paper Wall : 2 column blogger template

Demo | Download

This template is designed by Blogger Themes. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Background Images
Read More Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Made in Spain : 3 column blogger template

2010-01-01T16:19:00.000+05:30

Made in Spain : 3 column blogger template

Demo | Download

This template is designed by Final Sense. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Right Sidebar
Ads Ready
Fixed Side Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Background Images

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Rock My World : 2 column blogger template

2010-01-01T15:59:00.001+05:30

Rock My World : 2 column blogger template

Demo | Download

This template is designed by Deluxe Templates. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Background Images
RSS Gadget Ready

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Soul Vision : 2 column blogger template

2010-01-01T15:55:00.002+05:30

Soul Vision : 2 column blogger template

Demo | Download

This template is designed by Free Blogger Templates. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Background Images
RSS Gadget Ready

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Water Color : 2 column blogger template

2010-01-01T15:47:00.002+05:30

Water Color : 2 column blogger template

Demo | Download

This template is designed by Template Lite. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Background Images
Calender Date Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

To show only post titles in archive and homepage

2010-01-01T14:44:00.004+05:30

To show specific number of posts in label pages is already posted. If your blog has much content and if not possible to manage, then here a hack. This helps to show only post titles in label, archive and homepage.

To get this hack just follow the instructions below :

Login to Blogger
Go to > Layout > Edit HTML and select 'Expand Widget Templates'
Now follow the below steps carefully.

To show post titles in homepage only

If you want to show post titles in homepage only the search for <b:include data='post' name='post'/> and replace it with this code :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

To show post titles in labels page only

If you want to show post titles in labels page only the search for <b:include data='post' name='post'/> and replace it with this code :

<b:if cond='data:blog.pageType == "item"'>
<h3><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

To show post titles in archive page only

If you want to show post titles in archive only the search for <b:include data='post' name='post'/> and replace it with this code :

<b:if cond='data:blog.pageType == "archive"'>
<h3><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

If you face any problems or the hack does not work properly please do post comments.

To show specific number of posts in label pages

2009-12-23T22:48:00.001+05:30

When you click on any label in your blog the page displays 20 posts by default. If you want to change the number of posts to be displayed based on your template here is a hack.

To add this to your blog just follow these steps

Login to Blogger
Go to > Layout > Edit HTML and select 'Expand Widget Templates'
Now find(CTRL + F) this code :

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>

Now replace this code with below code.

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url "?max-results=5"'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>

Change the value of code in red to your required value. This works well for any template.
If you are using 'Label Cloud' don't use this.

Wordpress Fun : 2 column blogger template

2009-12-22T22:02:00.000+05:30

Wordpress Fun : 2 column blogger template

Demo | Download

This template is designed by Gosu Blogger. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Left Sidebar
Colorful Background
Compatible With Mozilla, Chrome and IE7
Large Footer
Search Box Ready
Beautiful Comment System
RSS Gadget Ready

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Magazeen : 2 column blogger template

2009-12-22T21:57:00.000+05:30

Magazeen : 2 column blogger template

Demo | Download

This template is designed by yFunction. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Good Footer
Search Box Ready
Beautiful Comment System
Read More Hack

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Hybrid Gallery : Gallery style blogger template

2009-12-22T21:52:00.003+05:30

Hybrid Gallery : Gallery style blogger template

Demo | Download

Hybrid Gallery is the blogger template designed by Btemplates. This design has many features included. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Gallery Style
Left Sidebar
Ads Ready
Compatible With Mozilla, Chrome and IE7
Top Menu Bar
Read more hack
3 column footer

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Diggmagg : 3 column blogger template

2009-12-22T21:46:00.000+05:30

Diggmagg : 3 column blogger template

Demo | Download

Diggmagg is the blogger template designed by Googleboy. This design has many features included. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Magazine Style
Right Sidebar
Ads Ready
Compatible With Mozilla, Chrome and IE7
Drop Down Menu
Beautiful Comment System

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Bcute : 2 column blogger template

2009-12-22T21:36:00.000+05:30

Bcute : 2 column blogger template

Demo | Download

This template is designed by Deluxetemplates. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Search Box Ready
Beautiful Comment System
Popular Posts

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Aerodrome : 3 column blogger template

2009-12-22T21:24:00.000+05:30

Aerodrome : 3 column blogger template

Demo | Download

Aerodrome is the wordpress theme converted to blogger by Wordpress2Blogger. This design has many features included. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Colorful Background
Right Sidebar
Ads Ready
Compatible With Mozilla, Chrome and IE7
Navigation Menu
Beautiful Comment System
RSS Gadget Ready

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Auto hide social bookmark gadget for blogger

2009-12-22T20:44:00.000+05:30

How to add 'social bookmark icons' below each post is already posted. Here is another gadget for social bookmark icons, in which all icons are partially hidden and when moves hovers them the icons are visible.

Here is the demo :

To add this gadget to your blog just follow these simple steps :

Step 1 :

Login to Blogger
Go to > Layout > Edit HTML and select 'Expand Widget Templates'
Now find(CTRL + F) </head>
And immediately above it, paste this code :

Step 2 :

<style type='text/css'>
div.beauty-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}
div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}
div.beauty-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}
div.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}
.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important;
}
.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-yahoo {
background-position:-650px top !important;
}
.beauty-yahoo:hover {
background-position:-650px bottom !important;
}
.beauty-blinklist {
background-position:-600px top !important;
}
.beauty-blinklist:hover {
background-position:-600px bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-myspace {
background-position:-200px top !important;
}
.beauty-myspace:hover {
background-position:-200px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-mixx {
background-position:-250px top !important;
}
.beauty-mixx:hover {
background-position:-250px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}
.beauty-syndicate {
background-position:-150px top !important;
}
.beauty-syndicate:hover {
background-position:-150px bottom !important;
}
.beauty-email {
background-position:-753px top !important;
}
.beauty-email:hover {
background-position:-753px bottom !important;
}

</style>

You also change the URL in red to your own image link.

Step 3:

Now find this tag <data:post.body/> and after that, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='"http://del.icio.us/post?url=" data:post.url "&title=" data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='" http://digg.com/submit?url=" data:post.url "&title=" data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='" http://technorati.com/faves?add=" data:post.url "&title=" data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='" http://www.reddit.com/submit?url=" data:post.url "&title=" data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" data:post.url "&title=" data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" data:post.url "&title=" data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" data:post.url "&title=" data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='" http://twitthis.com/twit?url=" data:post.url "&title=" data:post.title' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" data:post.url "&title=" data:post.title' target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/bloggerflick' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='" mailto:?subject=" data:post.url "&title=" data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div>
</b:if>

Change the link in red to your blog feed URL.

Now, save your template. If you face any problems just post a comment.

To remove 'showing posts with label' in blogger

2009-12-21T23:21:00.000+05:30

When you click on any label you can see a status message 'showing posts with label <>' and if your are planning to remove it here is a simple hack.

To add this hack just go to > Layout > Edit HTML and search for :

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/>
</div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Remove the code in red, which leaves out

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Now save your template. Confused ? Just post a comment.

Orkut Share Button without Javascript

2009-12-21T22:58:00.000+05:30

Previous tutorial How to add 'Orkut Share' button to every post requires javascript to work. Here is an updated version of the share button which do not require any script. Simply, add this code to your template and this enables to share every post on orkut.

Updated version of orkut code :

To add this Orkut share button go to > Layout > Edit HTML and search for <div class='post-header-line-1'/> by using Ctrl + F and add the code above this tag.

<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"http://promote.orkut.com/preview?nt=orkut.com&du=" data:post.url "&tt=" data:post.title' target='_blank'><img src='http://code.google.com/apis/orkut/docs/images/share.gif'/></a></b:if>

Now save your template. If you face any difficulties please do post comments.

Blue Magz : 3 column blogger template

2009-12-21T12:10:00.000+05:30

Blue Magz : 3 column blogger template

Demo | Download

Blue Magz is a magazine style blogger template designed by Ipietoon. This design has many features included. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Magazine Style
Right Sidebar
Ads Ready
Compatible With Mozilla, Chrome and IE7
Navigation Menu
Beautiful Comment System
125 * 125 Ad Section

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Revolution Church : 3 column blogger template

2009-12-21T12:01:00.000+05:30

Revolution Church : 3 column blogger template

Demo | Download

Revolution Church is the wordpress theme converted to blogger by Bloganol. This design has many features included. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Magazine Style
Right Sidebar
Ads Ready
Compatible With Mozilla, Chrome and IE7
Drop Down Menu
Beautiful Comment System
RSS Gadget Ready

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Movie Times : 3 column blogger template

2009-12-21T11:44:00.000+05:30

Movie Times : 3 column blogger template

Demo | Download

Movie Times is the wordpress theme converted to blogger by MyHerro. This design has many features included. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Right Sidebar
Ads Ready
Compatible With Mozilla, Chrome and IE7
Top Menu Bar
Beautiful Comment System
RSS Gadget Ready

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Imprezz : 3 column blogger template

2009-12-21T11:39:00.001+05:30

Imprezz : 3 column blogger template

Demo | Download

Imprezz is the wordpress theme converted to blogger by Falconhive. This design has many features included. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Right Sidebar
Ads Ready
Compatible With Mozilla, Chrome and IE7
Top Menu Bar
Beautiful Comment System
Twitter Gadget Ready

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Milano : 3 column blogger template

2009-12-21T11:27:00.000+05:30

Milano : 3 column blogger template

Demo | Download

Milano is the wordpress theme converted to blogger by Falconhive. This design has many features included. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Multi-Tabber Widget
Right Sidebar
Ads Ready
Compatible With Mozilla, Chrome and IE7
Top navigation menu
Beautiful Comment System
Auto Slider Featured Post
Banner advertisement

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Pro Press : 2 column blogger template

2009-12-21T10:52:00.000+05:30

Pro Press : 2 column blogger template

Demo | Download

This template is designed by widgetsforfree. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Right Sidebar
Ads Ready
Top Menu
Compatible With Mozilla, Chrome and IE7
Large Footer
Search Box Ready
Beautiful Comment System
Popular Posts
Banner advertisement

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Irresistible : 3 column blogger template

2009-12-20T23:59:00.002+05:30

Irresistible : 3 column blogger template

Demo | Download

Irresistible is the wordpress theme converted to blogger by anshul. This design is mainly used for personal blogs. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Tabbed Widgets
Right Sidebar
Three Tabber Widgets
Compatible With Mozilla, Chrome and IE7
Multilevel Menu Links
Beautiful Comment System
Show Of Your Favourite Photos And Video
9 Colors Background

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Newzmag : 2 column blogger template

2009-12-20T23:57:00.002+05:30

Newzmag : 2 column blogger template

Demo | Download

Newzmag is the wordpress theme converted to blogger by anshul. This design is mainly used for news blogs with lots of RSS. Just view demo for more info.

Features of the template :

Fixed Width Template
2 column template
Tabbed Widgets
Right Sidebar
Ads Ready
Compatible With Mozilla, Chrome and IE7
Rss Button Ready
Beautiful Comment System
Auto Slider Featured Post
Banner advertisement

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

To hide navbar from blogger layout

2009-12-20T23:03:00.000+05:30

If you are using a default blogger template then it displays navbar at the top of the page. To remove this navbar here is a simple hack.

Here is the navbar with many options :

To add this just go to > Layout > Edit HTML and search for #navbar-iframe and replace it with below code :

#navbar-iframe {
display: none !important;
}

This will hide the navbar from blogger template. Faced any problems please do post comments.

To show list of top commentors on your blog

2009-12-20T21:07:00.001+05:30

This gadget is used to display list of top commentators on your blog. You can include any number of commentors or can exclude anyone from the list. This gadget is useful only if your blog has many number of comments.

To add this gadget to your blog go to > Layout > Add a Gadget > HTML/Javascript and add the below code :

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i )
{
var href = "'" obj.value.items[i].link "'";
if(obj.value.items[i].link == "")
var item ="<li>" obj.value.items[i].title "</li>";
else
var item = "<li>" "<a href=" href ">" obj.value.items[i].title "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=7b5e76fd684f11e94320abd4e00fbbca&url=http%3A%2F%2Fbloggerflick.blogspot.com&num=10&filter=Author" type="text/javascript"></script>

Replace the code in red with your blog url and num=10 indicates the number of commenters to be displayed in the list. If you want to exclude anyone then replace Author with Commenter Name.

Now, save your gadget.

Random posts gadget for blogger

2009-12-20T08:59:00.000+05:30

Random posts gadget is used to display posts from your blog at random. All the posts will be selected from your blog archive. Each time the blog page is refreshed the posts displayed by gadget also changes. This gadget helps in digging your old posts from blog archieve.

To add this gadget go to > Layout > Add a Gadget > HTML/Javascript and add the below code.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=6;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i ]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k ){if(entry.link[k].rel=='alternate'){var item = "<li>" "<a href=" entry.link[k].href ">" entry.title.$t "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

To change the number of posts to be displayed, change the code in red to your required value.

Business Ads Ready : 3 column blogger template

2009-12-19T23:41:00.001+05:30

Business Ads Ready : 3 column blogger template

Demo | Download

This template is Ads ready and is designed by Ipietoon. This design is very clean and it has all the feautres from menu to post summary and also a drop down menu. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Three column at lower section
Right Sidebar
Ads Ready
Top Menu Links
Compatible With Mozilla, Chrome and IE7
Breadcumb navigation
Search Box Ready
Beautiful Comment System
Featured post, that you can wrap your adsense
Easy customize adsense section

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

To display codes [CSS, XML, HTML and Javascript] in posts

2009-12-19T22:54:00.002+05:30

Many of bloggers are not aware of displaying codes [CSS, XML, HTML and Javascript] in blogger posts. If anyone tries to post normally the code is not visible. The code to be posted should be friendly.

It can be customized in two methods

Elliotswan Postable
Firefox Addon

Elliotswan Postable

The code to be posted can be made friendly at Elliotswan.com. Just open the site, post the code and click on make it friendly. Make Code Post Friendly : http://www.elliotswan.com/postable/

Firefox Addon

Install GreaseMonkey https://addons.mozilla.org/en-US/firefox/addon/748
and open this script http://userscripts.org/scripts/source/42696.user.js.

Install the script and you will find "HTML Encode Selection" button by the side of "Publish Now" button in post editor. Now, to make any code postable select the entire code in "Edit HTML" mode and click on "HTML Encode Selection". The code will be automatically generated.

* This method works only in old post editor.

Making the code highlight

After making the code postable, you have to highlight the code in your post for clear view. To do this here is a hack :

To add this go to > Layout > Edit HTML and search for ]]></b:skin> and add the below code before this tag.

.code {
margin : 15px 15px 15px 25px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f2f2f2;
border : 2px solid #dcdcdc;
}
.code li {
font-size : 14px;
line-height : 20px;
font-family : Arial;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

You can customize this code and can change colors to match your template.

Now whenever you create a new post include the code between :

<div class="code">
Insert your code [CSS, XML, HTML and Javascript] here.
</div>

This is the best way to add codes in your blog posts. If you find any difficulty just add comments.

LinkWithin related posts with thumbnails

2009-12-19T20:55:00.001+05:30

If anyone feels difficulty in installing Related Posts with thumbnails gadget that is already published in BloggerFlick, then here is a simple method.

You can also get similar gadget from LinkWithin . There are many features included in this gadget, some of them are :

Show Related stories under each post

LinkWithin is a blog widget that appears under each post, linking to related stories from your blog archive.

Don't Let Your Past Stories Go to Waste!

We retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them.

Increase Pageviews, Keep Readers Engaged

The widget links to stories that are relevant and interesting to readers of a particular post, keeping them engaged with your blog, and increasing your traffic.

Elegant, Unobtrusive Design

Our widget is minimally styled and blends in with your site design.

Free and Easy to Install

The widget is free and ad-free. It takes a minute to get the widget up and running on your blog, no signup required!

All you need is to visit site : http://www.linkwithin.com/learn

Image Hover Effect In Blogger

2009-12-18T21:55:00.002+05:30

Image Hover Effect is used to brighten the image when mouse cursor is pointed over it. This effect is being used in many blogs and sites. Its very easy to use this effect in your blog and can be done by using a CSS code in your template.

Here is the demo of this hack :

Actual Image

Effect Added

To add this Image Hover Effect go to > Layout > Edit HTML and search for </head> and add the below code above this tag.

<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>

After adding code, have a glance at the below trick :

Actual Code

<a href="http://3.bp.blogspot.com/_phTOUKb4VO4/SyujQJA9FPI/AAAAAAAAA5U/RNV35wNVZm4/s1600/ImageHover.jpg">
<img border="0" src="http://3.bp.blogspot.com/_phTOUKb4VO4/SyujQJA9FPI/AAAAAAAAA5U/RNV35wNVZm4/s320/ImageHover.jpg" /></a>

Changed Code

<a class="linkopacity" href="http://3.bp.blogspot.com/_phTOUKb4VO4/SyujQJA9FPI/AAAAAAAAA5U/RNV35wNVZm4/s1600/ImageHover.jpg">
<img border="0" src="http://3.bp.blogspot.com/_phTOUKb4VO4/SyujQJA9FPI/AAAAAAAAA5U/RNV35wNVZm4/s320/ImageHover.jpg" /></a>

Add class="linkopacity" tag to the original code, after uploading the image.

Feed the fish gadget for blogger

2009-12-18T18:45:00.002+05:30

'Feed the fish' is an iGoogle gadget or module created by aBowman. In this gadget you can feed the fishes moving around with simple click of your mouse button.

To add this gadget to your blog go to > Layout > Add a Gadget > HTML/Javascript and add the below code.

<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/fish.swf?" width="300" height="250"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/fish.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

If you want more customization or want more options go to publishers site http://abowman.com/google-modules/fish/

Simple recent comments gadget for blogger

2009-12-18T14:25:00.002+05:30

After posting about 'Recent Posts' here is a similar gadget but this time its about comments. 'Recent comments gadget' is used to show up recent comments on your blog. By using this you can show the title, summary and date of the comment published. Any number of comments can be shown in your sidebar using this gadget.

To add this gadget go to > Layout > Add a Gadget > HTML/Java Script and add the below code :

<script src="http://h1.ripway.com/BloggerFlick/Scripts/RecentComments.js">
</script>
<script>
var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>

<script src="http://bloggerflick.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&callback=rp">
</script>

Replace the code in red with your blog URL and save the gadget.

You can also customize this gadget as :

var numposts = 10; > Shows number of posts to display.
var showpostdate = false; > Used to display the date of post.
var showpostsummary = false; > To display summary of your post.
var numchars = 100; > Lenght of the post summary.

Change the value false to true to display 'Comment Date' and 'Comment Summary' in the gadget.

Simple recent posts gadget for blogger

2009-12-18T14:09:00.001+05:30

'Recent Posts gadget' is used to show up recent posts in your blog. By using this you can show the title, summary and date of the post published. Any number of posts can be shown in your sidebar using this gadget.

To add this gadget go to > Layout > Add a Gadget > HTML/Java Script and add the below code :

<script src="http://h1.ripway.com/BloggerFlick/Scripts/RecentPosts.js">
</script>
<script>
var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>

<script src="http://bloggerflick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>

Replace the code in red with your blog URL and save the gadget.

You can also customize this gadget as :

var numposts = 10; > Shows number of posts to display.
var showpostdate = false; > Used to display the date of post.
var showpostsummary = false; > To display summary of your post.
var numchars = 100; > Lenght of the post summary.

Change the value false to true to display Post Date and Post Summary in the gadget.

To add 'Facebook Share' button with sharecount

2009-12-18T12:54:00.005+05:30

After the launch of Retweet button from Tweetmeme, FBshare had launched a facebook sharecount button. By adding this button to your posts, your users can share the content on their facebook profile. The sharecount button for Facebook displays the number of times the current page has been shared on Facebook and allows visitors to share it themselves.

Features :

Displays the number of shares [displays Facebook logo when 0 shares].
Large or Compact button
Track the shares from the button using your awe.sm API Key or fbshare.me links
Add Google Analytics parameters to fbshare.me links
Configure the colors of the badge in the large button

You can add this in two modes :

Large Size Button
Compact Size Button

Large Size Button

Sign in to your blogger blog and go to Dashboard > Layout > Edit HTML and click on Expand Widget Templates.
Now find <div class='post-header-line-1'> tag and paste the below code after this tag :

<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

If you dont find <div class='post-header-line-1'> then search for <data:post.body/> and paste the above code below this tag.

Save your template.

Compact Size Button

Sign in to your blogger blog and go to Dashboard > Layout > Edit HTML and click on Expand Widget Templates.
Now find <div class='post-header-line-1'> tag and paste the below code after this tag :

<script>var fbShare = {
size: 'small'
}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>

If you dont find <div class='post-header-line-1'> then search for <data:post.body/> and paste the above code below this tag.

Save your template.

You can add this button to any part of the post. If you face any problems please do add comments.
For more installation options visit FBshare.me .

To add 'Retweet Button' to blogger posts

2009-12-18T00:18:00.004+05:30

Twitter is becoming popular day by day. It helps a lot in deriving traffic to your blog. If you use twitter in proper way, you can double your blog traffic. So why not add a retweet button on your posts ? Retweet button let your visitors easily retweet your content on twitter.

Tweetmeme is a service that help you integrate retweet button to your posts. If you want to add it to your posts, just follow these steps.

You can add this in two modes :

Large Size Button
Compact Size Button

Large Size Button

Sign in to your blogger blog and go to Dashboard > Layout > Edit HTML and click on Expand Widget Templates.

Now find <div class='post-header-line-1'> tag and paste the below code after this tag :

<script type=%u201Dtext/javascript%u201D>
tweetmeme_url = %u2018<data:post.url/>%u2019;
</script><script type=%u201Dtext/javascript%u201D src=%u201Dhttp://tweetmeme.com/i/scripts/button.js%u201D> </script>

If you dont find <div class='post-header-line-1'> then search for <data:post.body/> and paste the above code below this tag.

Save your template.

Compact Size Button

<script type=%u201Dtext/javascript%u201D>
tweetmeme_style = %u2018compact%u2019;
tweetmeme_url = %u2018<data:post.url/>%u2019;
</script><script type=%u201Dtext/javascript%u201D src=%u201Dhttp://tweetmeme.com/i/scripts/button.js%u201D></script>

If you dont find <div class='post-header-line-1'> then search for <data:post.body/> and paste the above code below this tag.

Save your template.

You can add this button to any part of the post. If you face any problems please do add comments.

To add 'Orkut Share' button to every post [Java Script]

2009-12-17T23:17:00.005+05:30

Orkut has recently released orkut Share API for its users. Orkut users can now share and promote interesting content from the Internet with their orkut friends easily with just few clicks. The shared content will appear in their activity updates.

Most of the bloggers and webmasters use Facebook share option to share and promote their content on Facebook. Its one of the best methods to promote their content. It seems Orkut is following Facebook in looks and in features too.

Add Orkut Share Button to blogger posts :

To add this button go to Layout > Edit HTML and click on Expand Widget templates, copy and paste the following code above </head>

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load('orkut.share', '1');
google.setOnLoadCallback(function() {
var params = {};
params[google.orkut.share.Field.TITLE] = '<data:blog.pageName/>';
params[google.orkut.share.Field.DESTINATION_URL] = '<data:blog.url/>';
var connection = new google.orkut.share.Connection(params);
document.getElementById('orkut-share').onclick =
function(e) { connection.send('orkut.com', {}); };
}, true);
</script>

Now search for the <div class='post-header-line-1'> tag in your template and add the below code after this tag :

<b:if cond='data:blog.pageType == "item"'>
<span id="orkut-share" style="cursor:pointer; border:1px solid black">
<img src="http://code.google.com/apis/orkut/docs/images/share.gif"/>
</span>
</b:if>

If you dont find <div class='post-header-line-1'> then search for <data:post.body/> and paste the above code below this tag.

That’s all. Save your template and see the changes. If you face any problems please do add comments.

Digital Statement : 3 column blogger template

2009-12-17T19:18:00.003+05:30

Digital Statement : 3 column blogger template

Demo | Download

Digital Statement is the wordpress theme developed by Blog Oh Blog and converted to blogger by rias from techieblogger. This design is very clean and it has all the feautres from menu to post summary and also a tabber with three column. Just view demo for more info.

Features of the template :

Fixed Width Template
3 column template
Tabbed Widgets
Right Sidebar
Ads Ready
Top Menu Links
Compatible With Mozilla, Chrome and IE7
Good Footer
Search Box Ready
Beautiful Comment System
Navigation menu
Banner advertisement

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Comfy Magazine : 2 column blogger template

2009-12-17T15:19:00.000+05:30

Comfy Magazine : 2 column blogger template

Demo | Download

Features of the template :

Fixed Width Template
Post title and blog title swapped
Yahoo Smilies
Right Sidebar
Ads Ready
Top Menu Links
Compatible With Mozilla, Chrome and IE7
Retweet Button
Search Box Ready
Beautiful Comment System
Navigation menu
Banner advertisement

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

For more installation options visit TricksDaddy.

Mahusay : 2 column premium blogger template

2009-12-17T14:37:00.000+05:30

Mahusay : 2 column premium blogger template

Demo | Download

Mahusay blogger template is converted from wordpress theme. Wide and clean layouts with magazine style. Its slideshow featured content is an attractive section. Another feature is RSS feed subscribe. This template is designed ads ready for your adsense needs.

Features of the template :

Fixed Width Template
Automatic thumbnail and Read more
Two Column Blogger Template
Right Sidebar
Ads Ready
Top Menu Links
Compatible With Mozilla, Chrome and IE7
Feed widget
Search Box Ready
Content Slider
Navigation menu
Banner advertisement

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

For more installation options visit Free Blogger Template.

Community : 3 column blogger template

2009-12-17T10:16:00.002+05:30

Community : 3 column blogger template

Demo | Download

Community Blogger Template is designed by Bietemplates . This template is suitable for your portfolio project or magazine blog.

Features of the template :

Fixed Width Template
Automatic thumbnail and Read more
Three Column Blogger Template
Right Sidebar
Ads Ready
Top Menu Links
Compatible With Mozilla, Chrome and IE7
Twitter and feed widget
Search Box Ready
Beautiful Comment System
Navigation menu
Banner advertisement

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

For more installation options visit Bietemplates.

Noteguy : 2 column blogger template

2009-12-17T09:55:00.001+05:30

Noteguy : 2 column blogger template

Demo | Download

Note Guy Blogger Template, white clean layout built to suit your personal and business blog. It was originally designed for wordpress by EZWPthemes and converted to blogger by bloggerthemes.

Features of the template :

Fixed Width Template
Nice Header Image
Two Column Blogger Template
Right Sidebar
Ads Ready
Top Menu Links
Compatible With Mozilla, Chrome and IE7
Twitter and feed widget
Search Box Ready
Beautiful Comment System

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

Guzel Magazine : 3 column blogger template

2009-12-17T08:27:00.003+05:30

Guzel Magazine : 3 column blogger template

Demo | Download

Guzel magazine is another free premium wordpress theme designed by Custom Theme Design team for WordPress community. It is a 3 column white template that has been converted from wordpress to blogger by free blogger template.

Features of the template :

Fixed Width Template
Three Column Blogger Template
Right Sidebar
Ads Ready
Top Menu Links
Compatible With Mozilla, Chrome and IE7
Automatic Thumbnail with read more
Featured Posts support
Search Box Ready
Beautiful Comment System

Installation Instructions :

Download a template and unzip.
Go to the Layout section in your blog [Dashboard → Layout → Edit HTML].
Supports your previous template [Download full Template].
Find and upload your template.
Enjoy your new blog design.

For installation options and customization visit publishers page FreeBloggerTemplate.

To add 'Subscribe to feed' above comment form

2009-12-16T23:59:00.002+05:30

Blog feed can be published through Feed Burner and anyone can subscribe to that feed for free. More the number of subscriptions more the traffic. To make this feature available for users link back to the feed can be added above comment form below each post.

To add this widget search for this tag :

<div class='comments' id='comments'>
<a name='comments'/>

Now add the below code after this tag :

<b:if cond='data:blog.pageType == "item"'>
<div style='padding-right:15px;'>
<h2>Subscribe to our blog</h2>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div style='background: #E3EDF1; border: 0px solid #ddd; padding: 5px; margin: 10px; margin-right:15px; height:65px; '>
<table border='0' cellpadding='0' cellspacing='0'>
<tbody><tr>
<td>
<div style='margin-left:10px'>
<img height='55' src='http://i25.tinypic.com/mt5mzb.jpg' width='55'/></div></td>

<td>
<div style='margin-left:15px'>
<div style='font-size:16px; font:Trebuchet MS;'>
Do you have any <strong>Suggestions</strong>, add your comment. Please don't <strong>Spam!</strong>
<br/>If you like this site >> <a href='http://feeds.feedburner.com/BloggerFlick' target='_blank'><strong>Subscribe to our feed</strong></a></div></div>

</td>
</tr>
</tbody>
</table>
</div>
</b:if>

Replace the link in red with your feed link. You can also add this below each post if the above hack is not working.

Below each post in blogger

To add below each post search for <data:post.body/> and add the below code after this tag.

<b:if cond='data:blog.pageType == "item"'>
<div style='padding-right:15px;'>
<h2>Subscribe to our blog</h2>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div style='background: #E3EDF1; border: 0px solid #ddd; padding: 5px; margin: 10px; margin-right:15px; height:65px; '>
<table border='0' cellpadding='0' cellspacing='0'>
<tbody><tr>
<td>
<div style='margin-left:10px'>
<img height='55' src='http://i25.tinypic.com/mt5mzb.jpg' width='55'/></div></td>

<td>
<div style='margin-left:15px'>
<div style='font-size:16px; font:Trebuchet MS;'>
Do you have any <strong>Suggestions</strong>, add your comment. Please don't <strong>Spam!</strong>
<br/>If you like this site >> <a href='http://feeds.feedburner.com/BloggerFlick' target='_blank'><strong>Subscribe to our feed</strong></a></div></div>

</td>
</tr>
</tbody>
</table>
</div>
</b:if>

Replace the link in red with your feed link. You can also change the image, background color etc directly for this widget.

Simple related posts widget for blogger

2009-12-16T23:41:00.001+05:30

After adding social bookmark icons below your posts the next importance goes to related posts in which the posts related to the label are published below each post. This is also called 'Similar Posts' widget for blogger. By adding this you can make the user stay on your blog. Any number of posts can be shown from the related labels.

To add this for your blog, search for ]]></b:skin> by pressing Ctrl + F and add the below code before this tag.

#related {
font:Arial;
font-size:14px;
font-weight:bold;
line-height:18px;
}
#related ul {
list-style-type:none;
margin-left:15px;
padding:0;
}
#related li a:link, #related li a:visited, #related li a:active {
-moz-background-clip:border !important;
-moz-background-inline-policy:continuous !important;
-moz-background-origin:padding !important;
background:#fff none repeat scroll 0 0 !important;
border-color:#f2f2f2;
border-style:solid;
border-width:1px 2px 1px 27px;
display:block;
padding:5px 0 5px 10px;
}
#related li a:hover {
border-color:#909090;
border-style:solid;
border-width:1px 2px 1px 27px;
display:block;
padding:5px 0 5px 10px;
text-decoration:none;
}

This code can be modified to fit the colors of your blog.

You have to add a script to make this widget work, to add script search for </head> and add below code before this tag.

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i ) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k ) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum ;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i ) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length = 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length = 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j ) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' relatedUrls[r] '">' relatedTitles[r] '</a></li>');
if (r < relatedTitles.length - 1) {
r ;
} else {
r = 0;
}
i ;
}
document.write('</ul>');
}
//]]>
</script>

Now search for <data:post.body/> and add the below code after this tag.

<b:if cond='data:blog.pageType == "item"'>
<div id='related'>
<h2>Related Posts</h2>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" data:label.name "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

This will work for sure and to change number of posts to be displayed change max-results=5 to your required value.

How to add 'social bookmark icons' below each post

2009-12-16T22:54:00.002+05:30

It is very important to maintain the look and feel of you post in the blog. By adding social bookmarking icons below each post, they are very useful for bookmarking your post and to maintain colors of your post. You also change these icons at any instant and can add new icons say brand new ones. Different types of icons are available but here is a set that you will definitely like them because of their simplicity.

Social Bookmark Icons :

It is very easy to add this widget to your blog, search for ]]></b:skin> and add below code before this tag.

.social {
background-color:#F9F9F9;
border:1px solid #DDDDDD;
font-family:Trebuchet MS;
font-size:12px;
margin:5px;
padding:10px 5px 5px;
text-align:center;
}

You can modify this code and can change colors based on your blog template.

Now, search for <data:post.body/> and add the below code after this tag.

<b:if cond='data:blog.pageType == "item"'>
<div class='social'>
<strong>If you like this post then consider sharing it with others.</strong><br/>

<a expr:href='"http://digg.com/submit?phase=2&url="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Digg' src='http://i32.tinypic.com/231aps.jpg' title='Digg this article!'/></a>

<a expr:href='"http://del.icio.us/post?url="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='del.icio.us' src='http://i30.tinypic.com/wtd3jn.jpg' title='Save on Del.icio.us'/></a>

<a expr:href='"http://www.stumbleupon.com/submit?url="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Stumbleupon' src='http://i27.tinypic.com/amr6hf.jpg' title='Stumble this !'/></a>

<a expr:href='" http://www.facebook.com/sharer.php?u="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Facebook' src='http://i29.tinypic.com/4ruomx.jpg' title='Share on facebook'/></a>

<a expr:href='"http://reddit.com/submit?url="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Reddit' src='http://i29.tinypic.com/e83c44.jpg' title='Reddit this !'/></a>

<a expr:href='"http://technorati.com/faves?add="   data:post.url' target='_blank'><img alt='Technorati' src='http://i27.tinypic.com/2w3crkm.jpg' title='Add to technorati'/></a>

<a expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='My Space' src='http://i25.tinypic.com/5umow1.jpg' title='Share on Myspace'/></a>

<a expr:href='"http://twitthis.com/twit?url="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Twitter' src='http://i26.tinypic.com/2d2ek9s.jpg' title='Tweet this !'/></a>

<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t="   data:post.title   "&u="   data:post.url' target='_blank'><img alt='Yahoo' src='http://i32.tinypic.com/o5yirp.jpg' title='Bookmark on yahoo!'/></a>

<a expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="   data:post.url    "&title=" data:post.title' target='_blank'><img alt='Google' src='http://i31.tinypic.com/2j4t5vn.jpg' title='Bookmark on Google'/></a>

<a href='http://feeds2.feedburner.com/micmech' target='_blank'><img alt='Feed' src='http://i25.tinypic.com/2ylrxvc.jpg' title='Subscribe to RSS'/></a>
</div>
</b:if>

Its all over and preview your template, if every thing works fine save it. If there is any problem please do add comment.

Hosting Icons

All these images are hosted by BloggerFlick, please upload them to your own.

iTheme Techno : 3 Column Blogger Template

2009-12-15T19:15:00.004+05:30

iTheme Techno Blogger Template

Demo | Download

iTheme Techno blogger template is the beautiful template with Mac OS interface design, and beautiful mini icons. Originally, this theme is designed by Nick La. Please read the instruction carefully if you don't want to get any problems as some modifications are required.

Installation Instructions

1. Download and extract the zip file.
2. Login to your Blogger Dashboard
3. Go to Layout > Edit HTML
4. Upload XML Template file [Do not copy and paste the code directly to template editor box].
5. Please dont preview. Go to Layout > Page Element.
6. Edit "Top Menu" widget. Add at least one link, for example you can make a link to your blog homepage with “Home” anchor text
7. Edit "Archives" widget. Chose “Flat List” Style and "MM YY" Date Format style, for example “December 2009″
8. Edit "Recent Posts" widget. Change Feed URL to
http://YOURBLOGNAME.blogspot.com/feeds/posts/default

9. Edit "Recent Comments" widget. Change Feed URL to
http://YOURBLOGNAME.blogspot.com/feeds/comments/default

10. Go to Settings > Formatting, choose TIMESTAMP FORMAT style: "Tuesday, December15, 2009"
11. Finish. Preview your blog to see the result.

If you want more iTheme Techno blogger templates visit magznetwork.

Posts and comments : Statistics widget for blogger

2009-12-15T18:27:00.000+05:30

Your blog may contain many number of posts and comments, if you want to show the statistics then you can use this widget. The count for number of posts and number of comments will be displayed. If your blog has hundreds of posts and comments then this will be very useful.

To add this widget go to > Layout > Add a Gadget > HTML/JAVASCRIPT and add below code :

<script style="text/javascript">
function numberOfPosts(json) {
document.write('Total Posts: <b>' json.feed.openSearch$totalResults.$t '</b><br>');
}
function numberOfComments(json) {
document.write('Total Comments: <b>' json.feed.openSearch$totalResults.$t '</b><br>');
}
</script>

<ul><li><script src="http://bloggerflick.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>

<li><script src="http://bloggerflick.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul><noscript><a href="http://bloggerflick.blogspot.com" target="_blank">Blogger Widgets</a></noscript>

Now replace the code in red with your blog URL. Number of posts and comments will be displayed.

Blogger Templates : Free Downloads

2009-12-15T17:55:00.000+05:30

BloggerFlick decided to provide latest and requested blogger templates to all its users. With this idea a section named "Template of the day" is created here. One best blogger template will be added to it everyday. Any one can request for any blogger template here and they will be provided free of cost.

By downloading and using templates, you have to agree with these terms :

- Please do not sell any template.
- A link back to BloggerFlick must be retained in the footer [either modified or unmodified].
- You can use all template for personal or commercial projects.
- You can modify, translate or distribute.

To change size of image in blogger after uploading

2009-12-14T18:44:00.004+05:30

Any image uploaded to blogger will be automatically hosted at Picasa Web Albums and is resized as :

The original image uploaded will be shown only after clicking on this resized image. There are different modes like S1600, S800, S400 and S320 in which the image is automatically generated and resized. Different sizes are :

S1600

S800

S400

S320

If you want to use the original image uploaded instead of resized one, you can do that using this hack. After uploading image click on Edit HTML and you will find code like this :

<a href="http://3.bp.blogspot.com/_phTOUKb4VO4/SyY6pKi-9hI/AAAAAAAAA10/Vsxg_y1U-co/s1600-h/bflick.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/_phTOUKb4VO4/SyY6pKi-9hI/AAAAAAAAA10/Vsxg_y1U-co/s320/bflick.jpg" border="0" /></a>

Change the value in red to s1600. You can also change it to s800 or s400 also.

How to swap blog title with the post title

2009-12-14T13:40:00.003+05:30

Generally, blog title will be displayed for every post on blogger. By using a hack we can change or swap the blog title with post title. This makes your posts SEO [Search Engine Optimisation] friendly.

You can also keep your blog title along with the post title. When you click on any post then post title will be displayed followed by blog title.

Its easy to make this post-tile hack. Just go to > Layout >Edit HTML and search for this tag - <title><data:blog.pagetitle/></title> Replace this tag with below codes :

Post Title followed by blog title

<b:if cond='data:blog.pageName == ""'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Only post title without blog title

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

Check how to add favicon also !

How to add Drop Down List In Blogger

2009-12-14T12:56:00.005+05:30

Drop Down list is a user interface control GUI element, which allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value.

Here is the demo of it :

Its easy to make this drop down list.Just go to > Layout >Add Gadget >HTML/JavaScript and add the below code and save it.

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=1 name=menu>

<option>- Your Title - </option>



<option value="http://Link 1">List Item 1</option>

<option value="http://Link 2">List Item 2</option>

<option value="http://Link 3">List Item 3</option>

<option value="http://bloggerflick.blogspot.com">Free Widgets</option>

</select></form>

Change the text in red and add your links, change text in blue and add link titles.

Additional Features

You can increase the number of option value in code, if you want more links.
Width of drop down menu depends on the length of the titles.
Drop-down lists use far less space due to their show/hide functionality.

How to add favicon to blogger

2009-12-14T10:09:00.004+05:30

Favicon, or Favourate Icon is the little icon that appears before the web address. When you visit the sites or bookmark them, these icons will make those URLs stand out. Check out your Bookmarks. It will be clear from the picture below :

You can add favicon for your blog by choosing an image of smaller size in .ico, .gif, .jpeg or .png formats. After choosing the image upload it to any imgag hosting service you use like photobucket, tinypic or imageshack.After uploading take the url of the image where it's hosted.

Now Browse to Layout > Edit/Html > Press Ctrl+F and Search For <head> and paste the below code after this tag :

<link rel="shotcut icon" href="url of your icon">

Replace url of your icon with url of your image.

Recommended Favicons :

http://www.smashingmagazine.com/tag/favicons/
http://mppierce66.home.comcast.net/~mppierce66/web/fi/index.htm
http://www.deltatangobravo.com/archive/2004/march/favourite

Basic Structure Of a Blogger Template

2009-12-14T08:40:00.004+05:30

Before deigning a template you must have a clear idea about the basic structure of a blogger template. All templates are not same but by knowing this you can easily edit or modify anypart of your blog.

Some parts of the template structure are obvious from what you can see on most blogs: the headers, footers, and posts sections. But a blogger template can be categorised as below :

- Body - Outer Wrapper - Content Wrapper

Body

The outer most block is the Body of your template (basically everything that the computer screen covers). Background color or image and the font for your blog can be defined here.

Outer-wrapper

This container covers your whole template [the body is more like the outside part of your template]. In general, its a wrapper to place multiple smaller blocks inside. The most common blocks inside this Outer-wrapper are the Header, Content, and Footer.

Header-wrapper

This block is the top most part of your blog. But inside the Header you will have other sub-blocks too - the Header Title block, the Header Description block and others etc. So, to wrap all these sub-blocks inside one large container, the largest container in the Header section is usually a Header-wrapper that wraps everything inside.

Menu

This part is where you can add links in a horizontal block. Different types of menus with different colors can be added to your blog. This section appears just after the header.

Content-wrapper

Below the Header is the Content-wrapper - basically the most important container block of all. Immediately inside this wrapper are the Sidebar containers (1,2 or any number of sidebars) and the Main container (which contains your posts, comments, or some ads).

Main-wrapper

It is the outer most container in the Main section which goes inside the Content-wrapper. Inside this Main-wrapper are the Post block, Comment block, Date Header, and other widgets created from the Add Gadget option.

Blog Post

This block contains the important stuff - your Posts Titles, Post, Post Author, Labels, etc.

Sidebar

It is the block that contains all your widgets like About Me, Labels, Archive, Text, HTML, Adsense, etc. In a standard Blogger template, you will usually find only 1 sidebar as it is 2-column template (Main and Sidebar). But it's actually easy to add multiple number of sidebars. The most common ones are 2 sidebars in the 3-column template.

Footer

It is the bottom most container of your template. As in the Header section, you'll also need a Footer-wrapper to contain other sub-blocks in the Footer section.

One other way to see this structure is from the hierarchical point of view . Starting from the largest container to its sub-containers, the structure looks like this:

Body

Outer-wrapper

Header-wrapper

Blog Title
Blog Description
Menubar

Content-wrapper

Sidebar
Main-wrapper

Posts
Comments

Footer-wrapper

Footer text
Other widgets

Conclusion

Once you understand this basic structure, it'll be easier to start learning about the structure of the Blogger template code. Learning the code structure is not about learning HTML or CSS, but more about how the template code is organized, which is pretty much like how the container structure is organized. It's surprising that even with little knowledge on web programming, you can customize your template quite a lot just by understanding the basic structure and some CSS language.

About Blogger - Complete Guide For Beginners

2009-12-13T22:39:00.012+05:30

Blogger, is a blog publishing system. It was created by Pyra Labs, which was bought by Google in 2003. The service itself is located at www.blogger.com, and blogs published are hosted by Google at subdomains of blogspot.com.

Blogger holds an alexa rank of 7 and this itself explain how popular blogger is !

Getting Started With Blogger

You can use blogs for everything from updating your friends and family about your life, giving your own advice column, discussing your political views, or relating your experience in a topic of interest. You can host blogs with multiple contributors, or you can run your own one.

Setting Up Your Blog

Setting up a Blogger account takes three easy steps. Create an account, name your blog, and choose a template.You can choose your blog name by checking its availability. You can also host multiple blogs with the same account name.

Hosting Your Blog

Blogger will host your blog for free on blogspot.com. You can also use Blogger by redirecting from any web hosting service with your own domain name or you can also get a custom domain from blogger. It can be shifted to another domain at any instance. FTP server can be published through blogger.

Posting

Once your blog is set up, Blogger has a basic WYSIWYG editor and an Updated editor with many options like text formatting, hyperlinking etc. You can add pictures, videos and links directly from the editor itself. Numbering and bulleting are also provided. You can edit and re-publish you posts at any time.

Email Your Posts

You can optionally configure Blogger with a secret email address, so you can email your posts to your blog. This feature is very helpful to update blog while using a pocket PC or a mobile device. Posts can also be added through third-party services.

Pictures

Blogger will let you upload pictures from your desktop and post them to your blog. You can choose the basic layout and size of your images, and they’ll be uploaded to Picasa Web Albums, so you don’t have to host the pictures on a different website. If you have direct links of the pictures, then also you can post them to blogger.

Templates

You initially pick one of several templates for Blogger. You can switch to a new template at any point. The template controls the look and feel of your blog.You can also customize and create your own template, with some basic knowledge of CSS and web design.The arrangement of most of the elements within a template can be changed by dragging and dropping.

Making Money

You can make money directly from your blog, by using Google AdSense to place ads automatically onto your blog page. The amount you earn depends on your subject matter and the popularity of your blog. Guest authors can also use their adsense to earn revenue.

Privacy

If you want to make blog posts, but you only want to keep a private journal or you just want your friends or family to read them, you can choose to make your posts either private or restricted to approved readers. Invited people can only see the posts by logging in.

Labels

You can add labels to blog posts, so that all of your posts about anything can be grouped. This makes it easier for viewers to find posts on specific topics. Any number of labels can be given to a post based on the category it belongs to.

Feeds

You can publish feeds for your blog by using feed burner, another service by google. You can also get a vanity url for your feed, which can be shared with others. Users of your blog can subscribe to your feeds and can get updates through email.

Comments

Blogger provides an effective comment system through which you can get responses and feedbacks from users. Comments are displayed below each post. Blogger profile link of the user who makes a comment is also displayed. Comment moderation can also be done.

Permissions

This is the special feature provided by the blogger. You can invite your friends, family or any one to write for your blog. The invited persons are called guest authors and you can also grant them 'Admin' privileges to manage your blog.

Blog Tools

By using blog tools, you can import, export or delete your blog. Posts and comments published on one blog can be easily imported to another. Date and time of the posts remains unchanged. By using this feature you can backup your blog at any time.

With all these Blogger is an excellent place to share any thing.

Suggested Reading

http://www.blogger.com/about
http://en.wikipedia.org/wiki/Blogger
http://google.about.com/od/googleblogging/

About Me

2009-12-13T19:58:00.001+05:30

I'm Bharath Mandava, a Mechanical Engineering Student from India. With lot of passion and Interest towards web design and blogging ever since from my college days, I have choosen Blogger to learn CSS and HTML. Now with more than 4 years experience in using blogger I got a chance of writing complete blogger solutions which includes Widgets, Hacks, Templates, Tutorials, Freebies, Tips, Tricks, SEO and Adsense through Blogger Flick.

Blogger Flick is a blog dedicated to all blogger users and learners. Any one who are interested in some design or blogging can subscribe. I promise you to present this blog in an efficient manner by updating and replying to comments everyday.

So enjoy the posts at Blogger Flick and please do drop comments as your feedback is important to us. Finally, I appreciate users like you who utilizes some time to read "About" Section.

If you want to know more about me just do follow me of twitter @MandavaBharath.

Blogger Flick

Warning ! When you change your blogger template

To republish or change date of your old posts

To add "Google Buzz" button to every post in blogger

Burn Out Bright : 2 column blogger template

Bulletin Board : 3 column blogger template

Blogger Tube : 3 column blogger template

Blogger Press : 3 column blogger templat

Arto : 2 column blogger template

Arclite : 2 column blogger template

Glassical : 2 column blogger template

Foodiary : 3 column blogger template

Bueno : 2 column blogger template

Simply 09 : 2 column blogger template

Maalaga : 2 column blogger template

Maamo : 2 column blogger template

Magiting : 2 column blogger template

Fantastic Flowery : 2 column blogger template

Grey Green : 2 column blogger template

Bright Pink : 2 column blogger template

Box Tube : 2 column blogger template

Birdies Secret Garden : 3 column blogger template

Aspire : 3 column blogger template

Compositio : 2 column blogger template

Clean : 2 column blogger template

Paper Wall : 2 column blogger template

Made in Spain : 3 column blogger template

Rock My World : 2 column blogger template

Soul Vision : 2 column blogger template

Water Color : 2 column blogger template

To show only post titles in archive and homepage

To show specific number of posts in label pages

Wordpress Fun : 2 column blogger template

Magazeen : 2 column blogger template

Hybrid Gallery : Gallery style blogger template

Diggmagg : 3 column blogger template

Bcute : 2 column blogger template

Aerodrome : 3 column blogger template

Auto hide social bookmark gadget for blogger

To remove 'showing posts with label' in blogger

Orkut Share Button without Javascript

Blue Magz : 3 column blogger template

Revolution Church : 3 column blogger template

Movie Times : 3 column blogger template

Imprezz : 3 column blogger template

Milano : 3 column blogger template

Pro Press : 2 column blogger template

Irresistible : 3 column blogger template

Newzmag : 2 column blogger template

To hide navbar from blogger layout

To show list of top commentors on your blog

Popular Posts gadget for blogger

Random posts gadget for blogger

Business Ads Ready : 3 column blogger template

To display codes [CSS, XML, HTML and Javascript] in posts

LinkWithin related posts with thumbnails

Related Posts with thumbnails for blogger

Recent Posts with thumbnails gadget

Image Hover Effect In Blogger

Feed the fish gadget for blogger

Simple recent comments gadget for blogger

Simple recent posts gadget for blogger

To add 'Facebook Share' button with sharecount

To add 'Retweet Button' to blogger posts

To add 'Orkut Share' button to every post [Java Script]

Digital Statement : 3 column blogger template

Comfy Magazine : 2 column blogger template

Mahusay : 2 column premium blogger template

Community : 3 column blogger template

Noteguy : 2 column blogger template

Guzel Magazine : 3 column blogger template

To add 'Subscribe to feed' above comment form

Simple related posts widget for blogger

How to add 'social bookmark icons' below each post

iTheme Techno : 3 Column Blogger Template

Posts and comments : Statistics widget for blogger

Blogger Templates : Free Downloads

To change size of image in blogger after uploading

How to swap blog title with the post title

How to add Drop Down List In Blogger