Blogger Templates

We Have Moved!!

2008-06-04T14:53:00.000-07:00

Hi guys,I wanna inform you that we have been moved to Techodia.

New Black 3 Column Blogger xml Template

2008-02-15T03:25:00.000-08:00

This is The New 3 Column Adsense Blogger or Blogspot xml Template or Skin.It is originally Created by Dzelque.It is The 3 Column Template speciall Optimized for Adsense.You Can View the Demo of this template Here or the screenshot Below:

FEATURES:

3 Column Template.
Cool Black Background.
Black Template.
Adsense Friendly.
Fixed Layout.
For Beta Blogger.

~DOWNLOAD NOW~

I am sure you will like it:)
Blogger Templates,Widgets and Hacks!

Curved 2 Column White Xml Blogger Template

2008-02-13T06:10:00.000-08:00

This Template is clean and white color.Looks so Descent and you will really love it.This template is originally converted to blogger by Blog and Web.You can see the Demo of this Template Here or View the Screen shot below:

FEATURES:

2 Column Template.
Clean and White color.
Cool Header.Optimized for Adsense.
You can edit the colors.

If you really like this template,you can Subscribe for future cool templates:)

Techblog 3 column Xml Blogger Skin

2008-02-12T06:07:00.001-08:00

It is The Technology 3 column blogger template especially for tech blogs or technology blogs.I not the auther of this template but got this template from Here.This template has no demo sorry for this!By the way you can view its Screen shot below:

(Click the image for clear Preview)

FEATURES:

3 Column Template.
Blue Color.
Adsense Optimized.
Good for tech blogs.

...And the Other features you will see when Install this Template;)

Plantilla Blogy Glass 2 Column Blogger xml Template

2008-02-11T22:33:00.000-08:00

The very Fresh blogger template I've seen!The Plantilla Blogy Glass is fresh and clean blogger template which is originally designed by Blog and Web.This template looks very clean and beautiful.You can view the Demo of this Template Here or the screen shot below:

FEATURES:

Clean white Background.
Awesome Header image.
2 Column Template.
Dominant Colors.

~DOWNLOAD NOW~

[Via etechblog]

Earthling 2 Column Blogger Xml Template

2008-02-10T23:45:00.000-08:00

So...Here is the earthling Blogger Template!It is very beautiful and you will really like it.Specially its Header image is awesome.And got attractive colors.
You can View the Demo of This Template Here or View the Screenshot Below:

This Template is originally designed by free css templates and converted to blogger by blog and web.

FEATURES:

2 Column Template.
Fixed Width.
Dominant Colors.
Beta Blogger Version.

~DOWNLOAD NOW~

I Think You Will like it!

[via etechblog]

Clean Box 3 Column Blogger Xml Template

2008-02-09T23:42:00.000-08:00

It is originally created by dzelque.It is clean and white.It is specially made for Adsense to Boost your Adsense earnings!You can view the Live Demo of This Template Here or View the Screen Shot below:

Features:

3 Column Template
Clean and White Color
Specially for Adsense
Fixed Width
Pre Build Search Engine

~DOWNLOAD NOW~

Tell me Wether You Liked or Not!!
[via etechblog]

How to Add Smileys on/to Blogger Posts

2008-01-25T02:37:00.000-08:00

In this episode I will explain to you "how to make your blog more expressive with smile icon" without copy an image and put to your blog, but with only little code and then it will be smile icon image automatically. For example, if you type this code :) it will atomatically change to this image , this code :p will be like this and etc. Do you interest? if no, go from my blog
here's the trick:

1. Login to blogger then chose "layout --> Edit HTML"
2. Find this code ]]></b:skin>, if you found it then put the code below under it.

<script src='http://www.geocities.com/kendhin_x/blog/smile/smile.js
' type='text/javascript'/>

3. Save your editing.

* Before you type the code you have to press "space" first"

here is the code to show smile icon

:) -->
:( -->
:p -->
:D -->
:$ -->
;) -->
:@ -->
:# -->
:k -->
:x -->
:o -->
:O -->
:L -->
:r -->
:s -->
:y -->
:~ -->
:v -->
:f -->
:d -->
:c -->
:z -->

New WOW Smashing 3 Column XML Blogger Template

2008-01-21T02:23:00.000-08:00

Introducin New WOW Smashing Xml Template!You Will Really Like And Appreciate it.It Is Designed Uniquely and Converted From Wordpress to Blogger.
Enjoy!

Always backup your current template first before installing the template!

DEMO HERE
DOWNLOAD HERE

New 3 Column Flowers Blogger Template

2008-01-21T02:22:00.002-08:00

This 3 column blogger template is brought to you by Blogger Templates-free online source of Blogger templates and Blogging tips.

DEMO HERE
DOWNLOAD HERE

New Plantilla Blogy Blue Web 2.0 3 Column Blogger XML Template

2008-01-21T02:22:00.001-08:00

First of All HAPPY NEW YEAR 2008 to all my Visitors and may This Year Brings Happiness and Beautiful Moments In Your Life.My Prayers Are With You!

Plantilla Blogy Web 2.0 Template Specially for Blogger!Look Very Cool.Please Check it Out!
I am Waiting For You Reviews!

DEMO HERE
DOWNLOAD HERE

New iPlantilla Blue Web 2.0 3 Column Blogger XML Template

2008-01-21T02:21:00.002-08:00

New Blue PlantillaWeb 2.0 Blogger XML Template From Word Press.Looks Decsently!

DEMO HERE
DOWNLOAD HERE

NOTE:The original site is in Spanish, required a TRANSLATOR

New 3 Column Blogy Stylicious Blogger XML Template

2008-01-21T02:21:00.001-08:00

New Plantilla Blogy Stylecious Blogger Template having 3 Columns and i Think it Will Fulfill You Needs;)

DEMO HERE
DOWNLOAD HERE

New 2 Column Blogger xml Templates:Technology

2008-01-21T02:20:00.001-08:00

Download Template

New 2 Column Blogger xml Templates:Wedding

2008-01-21T02:19:00.001-08:00

Download Template

New 3 Column Blogger Hawaii XML Template

2008-01-20T07:32:00.000-08:00

Minyx template for blogger
Converted from wordpress theme created by Mauricio Caballero

DEMO HERE
DOWNLOAD HERE

New 3 Column Blogger Hawaii Blue XML Template-2 Types

2008-01-20T07:29:00.000-08:00

1st Type:2 Columns on Right Side
New 3 Column Blue Hawaii Template-Cool Look!
Check Out!

DOWNLOAD HERE

2nd Type:1 Column on Right & other On Left

DOWNLAD HERE

New 3 Column Blogger XML Template:GOLD-FISH

2008-01-20T07:28:00.000-08:00

Features:

Two sidebars
A label cloud in the widebar
Styled blockquotes
Custom favicon

Download:

New 3 Column Blogger xml Templates:Simple

2008-01-20T07:26:00.000-08:00

Sand Dolla r

Herbert

New 3 Column Blogger xml Templates:Rounders Series

2008-01-20T07:23:00.000-08:00

Rounders(01)

Rounders(02)

Rounders(03)

New 3 Column Blogger xml Templates:Thisaway Series

2008-01-20T07:20:00.000-08:00

Thisaway

Thisaway Blue

New 3 Column Blogger xml Templates:897-565

2008-01-20T07:19:00.000-08:00

897

565

New 3 Column Blogger xml Templates:Denim Series

2008-01-20T07:18:00.000-08:00

Denim

Denim Washed

Denim Light

New 3 Column Blogger xml Templates:Tic Tac Series

2008-01-20T07:05:00.000-08:00

TicTac

Tic Tac Blue

New 3 Column Blogger xml Templates:Dots Series

2008-01-20T07:03:00.000-08:00

Dots

Dots Dark

New 3 Column Blogger xml Templates:Moto Series

2008-01-20T07:02:00.000-08:00

Son of Moto

Ms.Moto

Cool 3 Column Blogger xml Templates:Minima Series

2008-01-20T06:59:00.000-08:00

Minima White

Minima Black

Minima Blue

Minima Ochre

New Blog Bus 3 Column Blogger XML Template

2008-01-20T06:54:00.000-08:00

This is blogbus, formerly is a wordpress template.

But now has been ported to blogger platform.

DEMO HERE
DOWNLOAD HERE

New She Got Style Blogger 3 column XML Template

2008-01-20T06:51:00.000-08:00

Introducing New She Got Style Blogger 3 column XML Template!
You will like it!

(Click image for Preview)

DOWNLOAD HERE

New MP3 Player Blogger 3 column XML Template

2008-01-20T06:50:00.000-08:00

Introducing New MP3 Player Blogger 3 column XML Template!
You will Like it!

(Click image for Priview)

DOWNLOAD HERE

New Fangled Blogger 3 column XML Template

2008-01-20T06:47:00.000-08:00

Intoducing New Fangled Blogger 3 column XML Template!
You will Appreciate it!

(click image for Priview)

DOWNLOAD HERE

New 3 Column Adsense Black Blogger xml Template:Bloggerized Adsense

2008-01-20T06:45:00.000-08:00

3 column blogger template optimized for adsense or other online earning programs.

Demo Here

Download template .XML

Notes: You can use your own picture as header image. Image Size: Width: 870px, Height: 180px

New 3 Column Adsense Blogger xml Template:Nyoba 780

2008-01-20T06:44:00.000-08:00

Download Template

Note: You can use your own picture as header image. Image Size: Width: 780px, Height: 180px

New 3 Column Adsense Blogger xml Template:Nyoba

2008-01-20T06:43:00.000-08:00

Download Template

Note: You can use your own picture as header image, Image Size: Width: 300px, Height: 130px

New Black Delicious 2 Column Blogger XML Template

2008-01-20T06:42:00.000-08:00

This black beautiful template is really so delicious, originally created by web2themes.com for wordpress.org. Now it’s available for you blogger / blogspot users.

DEMO HERE
DOWNLOAD HERE

New Black Flowers 2 Column Blogger XML Template

2008-01-20T06:41:00.000-08:00

Want to have a rocking template? here it is. Flowers Blogger Template!This template is originally a beautiful wordpress themes created by DezinerFolio (go there and give thanks to them for creating such a really great design).

DEMO HERE
DOWNLOAD HERE

2 Column softlight template for Blogger

2008-01-20T06:40:00.002-08:00

Here is a new free Bloger template

Softlight is a simple 2 column template created especially for personal blog

DEMO HERE
DOWNLOAD HERE

2 Column Underground Blogger Template

2008-01-20T06:40:00.001-08:00

This is a new Blogger Template as you can see,It is a two column with black/red color scheme
This template was ported from original design by styleshout

A lightweight, fixed width, 2 column template. This design uses a black/red color scheme, very easy to customize and fast-loading.

DEMO HERE
DOWNLOAD HERE

DFire black blogger template

2008-01-20T06:39:00.002-08:00

dFire is a dark but viewable theme vying for a slightly different style.

Author: Tracy Ou (aka Viitoria L.)

DEMO HERE
DOWNLOAD HERE

Solipsus template for blogger

2008-01-20T06:39:00.001-08:00

solipsus, originaly created for wordpress by nuwen

state-of-the-art semantic personal publishing platform, I give you AE’s first downloadable Wordpress Theme, Solipsus.
Its main colors are black, shades of brown, and blue. Solipsus was inspired by the wacky style of Adult Swim. I made sure to included the hanging head :lol:. (Click here to view theme.) Your opinions matter. All feedbacks are welcome.
DEMO HERE
DOWNLOAD HERE

Greenery Blogger Template

2008-01-20T06:38:00.001-08:00

Greenery is a theme designed originally for Wordpress by LEMONed

The top menu is a Link List (google element).

i hope that you like this template.

DEMO HERE
DOWNLOAD HERE

New Alvin And The Chipmunks Blogger Template

2008-01-20T06:36:00.000-08:00

The New New Alvin And The Chipmunks Blogger Template!Hope You Will Like it!

have watched the movie :) ?
Try to use this template, it comes with Quotes section to show you a dynamic random quote (just like Planet Blog Template's quote) and Page Peel on the top left corner.
Easy to modify.

DOWNLOAD

New 2 Column Blogger xml Template:BLOGY-DEAD

2008-01-20T06:35:00.000-08:00

You can use it for personal or business with the sole condition that they respected credit, returning a link to Solo Templates

Features

Defining colors on the panel.
Two columns.

Download

New 2 Column Blogger xml Templates:Hot

2008-01-20T06:34:00.000-08:00

New 2 Column Blogger xml Templates:Cool

2008-01-20T06:33:00.000-08:00

Blue Polka Dot Blogger Template

Download Template

Japanesse Girl Blogger

Download

Show Me Blogger Template

Download

Great Portfolio Blogger Template

Download

Little Princess

Download

Rainbow Blogger Template

Download Template

New 2 Column Blogger xml Templates:Sunset

2008-01-20T06:32:00.001-08:00

Download

Sunset in Grey

Download

New 2 Column Blogger xml Templates:Kids

2008-01-20T06:31:00.000-08:00

Download

New 2 Column Blogger xml Templates: Valentine's Day

2008-01-20T06:30:00.000-08:00

Download Template

New 2 Column Blogger xml Templates:Flowers

2008-01-20T06:29:00.001-08:00

Sun Flower Blogger Template

Download

Rice Field Blogger Template

Download |Alternative images for header Image 1 - Image 2 or you can use your own header images with 750px width and 200px height, just replace the image code with your own.

Another Flower Template

Download

Flowers

Download

Chocolate 2 Column Blogger Xml Template

2008-01-20T06:27:00.001-08:00

Get Template Code

New 2 Column "Second Thing" Blogger XML Template

2008-01-20T06:25:00.001-08:00

Here is The New 2 Column "Second Thing" Blogger XML Template

(Click The Image For Preview)

DOWNLOAD HERE

New 4 Column xml Blogger Template

2008-01-20T06:24:00.001-08:00

4 Column Blogger XML template optimized for adsense or other online earning programs.

DEMOHERE
DownloadHERE

New 4 Column xml Blogger Dragon Template

2008-01-20T06:22:00.000-08:00

This is the Wide 4 column template for Blogger. Whole Wide Looks for Blogger.Simple Blogger Looks.Download XML template:

New 4 Column xml Blogger Blue Template

2008-01-20T06:21:00.001-08:00

This is the Green template for Blogger. Whole Green Looks for Blogger.
Download XML template:-

New 4 Column xml Blogger Wide Blue Template

2008-01-20T06:19:00.000-08:00

This is the Wide 4 column template for Blogger. Whole Blue Wide Looks for Blogger.Simple Blogger Looks.
Download XML template:-

Directly Go to Your First Post

2008-01-20T06:17:00.000-08:00

Here is a simple blogger hack to immediately forward a user to the first post in your blog.

Put the following code between the <head> and </head> tags in your blogger template:

<blogger><Mainpage>
<script language="JavaScript">

</script>
</Mainpage></blogger>

Enjoy!

Add a Favicon to Your Blog

2008-01-20T06:16:00.000-08:00

You have to create one first. You can create a favicon in an icon editor software or generate one online. One useful free program to create it in is IconEdit32. Search for it in Google and download and install it. It can create 16x16 icons and 32x32 icons. The first is very small and so it is better to create one of the latter size.

A Favicon is actually short for "Favourite Icon" and serves as a sort of symbol for the site. You can have a text Favicon made up of the first letters of your site or a symbolic favicon which denotes the subject of your site. It also serves to markout your site in your bookmark list. You can also make an animated favicon and a scrolling favicon which scrolls your blog title one letter at a time.

To make one online a free favicon generator is available at :
http://www.html-kit.com/favicon/

After downloading the favicon to your PC upload the icon file to a freeserver like Googlepages. Copy down the URL of the icon at Googlepages. Then login to Dashboard of your blog and go to Edit Html subtab under the Template tab. Copy the following code just below <title>...</title> tags

<link rel="shortcut icon" href="URL OF YOUR ICON AT GOOGLEPAGES" />

Save Template. Republish if necessary. Refresh Cache and view blog.

If you want to add an animated favicon add the following code in the same position :

<link rel="shortcut icon" href="URL OF YOUR ICON AT GOOGLEPAGES" />
<link rel="icon" href="URL OF YOUR ICON AT GOOGLEPAGES" type="image/gif" />

Save Template.

Another site to make a favicon is :
My Favatar

Change or Swap the Title of blogger posts for better SEO

2008-01-20T06:15:00.000-08:00

Yes, Now you can change the Title of the blogposts on individual post-view. You might have seen that I've changed the Title of my homepage to "Tech blog for Blogger tricks, widgets, templates, adsense tips and much more." This trick can help in boosting your search engine rankings.

By default, your Blogger's title on the top left displays your blog title, and if it's in the items page, it'll include your post title as well.eg, Blogger TTT:Change the blog title for blogposts. By copying the coding from below, you can change the default behavior of the title tag.

Step 1-Goto Blogger Dashboard>>Layout>>Edit Html
Step 2-Backup your template
Step 3-Follow the instructions below

Find this code in your XML template{in header}

<title><data:blog.pagetitle/></title>

Now replace it with


<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='comments' var='post'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> ~ <data:blog.title/></title></b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='nextprev'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='post' var='post'><data:post.title/></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>


Further more you can add a very good keyword in homepage's title by just adding Keyword + Blog Title by finding this line in the above code{3rd last}-

<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

and adding keyword here

<b:else/>
<title> <data:blog.pageTitle/>Keyword</title>
</b:if>

Be creative in writing Keyword, it will surely help your blog grow and also for search engine optimization.
I would like to thank Webtalks for sharing such a great trick with us.

A calender Archive Widget for Blogger

2008-01-20T06:14:00.000-08:00

Here is a New Way of Showing Archive!

A calendar archive widget :D

Just click the image to view a working example & get the instructions.

[via Purple Moggy]

13 more built in online bookmarks for blogger

2008-01-20T06:13:00.002-08:00

Here is 13 more built in bookmarkers you can use on your blogger / blogspot blog. There are Furl.net, ma.gnolia.com, blinkbits.com, meneame.net, simpy.com, myweb2.search.yahoo.com, digg.com, del.icio.us, ocio.fresqui.com, reddit.com, blinklist.com, netvouz.com, and of course technorati.com

here is the demo:

I have created 2 different version of this trick for you. that is the one for bookmarkers inside your post, and the another one is bookmarkers for outside of your post.on the download zip below, you will find 2 separated files, there are

blogger-bookmark-inside-post.txt
blogger-bookmark-outside-post.txt

What is the different?

1. blogger-bookmark-inside-post.txt is only applicable inside of a post widgets. while the blogger-bookmark-outside-post.txt is applicable anywhere.

so the outside-post is better then the inside post? well it depends. the outside codes will grabs the current link, and the current title of the browser. What does that means? It means, on default configuration, the title would be something like this: Your Blog Title Here : Then Your Post Title Here.

While on the inside code, it will just Your Post Title Here.

Are you confuse now? Good. then just download this codes below, and try it your self, so you’ll understand. Don’t forget to backup your template first. thanks!

DOWNLOAD HERE

[via Jack Book]

"Talk the Talk" - Participating in Discussions to Increase Traffic

2008-01-20T06:13:00.001-08:00

Just a quick thought today, and its something I recently posted on 43Things and it has to do with being a part of the conversation that blogs facilitate. I'm calling it "Talk the Talk."

Blogs from the onset, were created as a tool for communication. They allow people (like you and I) to speak their mind and in turn the entire world has access to their thoughts, although for most bloggers very few ever read what they write. But blogs aren't just about one person talking, blogs are more of a discussion as evidenced by the ability to leave comments on your and other people's blogs.

So if you're looking to increase the amount of discussion taking place on your blog (and thus increase traffic to your blog) then first take your thoughts to where the people are. Go find other blogs about similar topics to your own and participate in discussions on those blogs. Don't just go to post a comment and hope someone clicks back to your blog, be genuine, thoughtful and courteous. If you add to the discussion happening on another blog then it is much more likely that someone would clickthrough to come read more about what you have to say.

Running a blog is about having your voice heard, in order to do that, first let your voice be heard where the people already are, if they like what you have to say, then they'll come.

Attract Non-English Traffic to English Site-Increase Traffic

2008-01-20T06:12:00.000-08:00

I have previously published adding site translator to blogs (and normal websites as well) at Add translator to your blog (or website) (click BACK button to get back to this page). One reader also wants to know if she publish a blog in English, how can she attract non-English visitors. The only thing I can think of is to ping non-English as well as English servers each time the blogger creates a new post or updates an old one.

My favorite is Pingoat which includes non-English services. See screenshot below:

Pingoat

Amazon products on SEO (increase visitors)

Unfortunately, for the past few weeks, I have got the error message "Warning: mysql_connect(): Too many connections in /var/www/pingoat.com/web/db_mysql.php on line 34. Too many connections." I have contacted Pingoat about the problem and now waiting for a response from them. When I get that problem I have to resort to Ping-O-Matic. However, as you can see from the screenshot below:

Ping-O-Matic

they do not include as many services as Pingoat and they don't ping non-English servers. That is unfortunate as they were the first to start this pinging service. I think I will contact them and suggest they add that to their list

There is one more pinging service and that is Blogflux Pinger. This one include non-English blog pinging services as you can see below:

Blogflux Pinger

Unfortunately, my screen is not big enough to display the other non-English services. You can just see "Japanese" at the bottom of the screenshot. The other non-English service that is not shown is Spanish. It seem to be faster than Pingoat and Ping-O-Matic, but there is no provision to include the feed URL for your blog. I will have to think about which one may be better, Ping-O-Matic or Blogflux Pinger.

There are many other pinging services I have yet to check. When I find the time, I will either update this post or more likely post about a different aspect of pinging to include those pinging services.

Place Google AdSense Ads below post's title in Blogger

2008-01-20T06:06:00.000-08:00

use Google AdSense to add some income from my site, but if you use the option show ads between posts, default position where ads are placed (below te post), isn't a good place for a good result in terms of revenue.

So I have decided to change the position of AdSense and in my Blogger Template, I have find this "suspect" code in the post's footer:

<b:if cond="'data:post.includeAd'">
<data:adend/>
<data:adcode/>
<data:adstart/>
</b:if>

... that is what I'am searching: the AdSense code, placed on template, from Blogger when I have selected show ads between posts option. After some tentatives I have find a good position where to place AdSense, below the title's post, before this line's code (check expand widget in your blogger template):

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

So, I have changed AdSense code position above this line, adding an if statement (on bold) to show sponsored links only into the single post, not when an user visits my home page, or browse categories (over 96% of my actual clicks cames from internal pages):

<b:if cond='data:blog.pageType=="item" '>
<b:if cond="'data:post.includeAd'">
<data:adend/>
<data:adcode/>
<data:adstart/>
</b:if>
</b:if>

In this way, AdSense is more visible and in just two day I have improved the number of clicks and my CTR for the most visited pages. If you use Blogger platform for your blog, I suggest to try it.

How to Create Thumbnail images-Blogger Hack

2008-01-20T02:44:00.001-08:00

In a nutshell, the hack takes advantage of the Page Element's Link List and turns it into a Thumbnail Picture List element. As you might know, the link list allows the page owner to quickly add a bunch of urls for quick links to other interesting sites. My hack takes advantage of the GUI interface to quickly add/erase/arrange these links but pushes it further to upload image addresses instead.

Here are the steps to setup this hack. You are also required to know some HTML & CSS to further enhance this hack to make it your own unique version of it.

First, go to Template->Add Elements, then select sidebar's Add Page Elements. Select Link List option at top right corner:

Next, add some sample pictures:

Then, drag-n-drop the newly created link-list from sidebar to post body area. (You can always move it back later.)

Go to Template->Edit HTML. Make sure to check the Expand Widget Template check box. Then look for the LinkList1 widget. It should be in front of all the other widgets, and right after the CSS portion of the code.

Then replace that widget with this one, make sure they have the same name (LinkList1):

<b:widget id='LinkList1' locked='false' title='Random Pics' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<div class='hoctro_spacer'>
<b:loop values='data:links' var='link'>
<a expr:href='data:link.target' onblur='try {parent.deselectBloggerImageGracefully();} catch(e) {}'><img alt='' border='0'
expr:src='data:link.target' height='100' style='display:inline; margin:0px auto 10px; ;cursor:pointer;' width='100'/></a>
</b:loop>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

As you can see, I use the same code that Blogger provides when it successfully upload an image as a mean to show the image itself. You can use whatever it best fits your purpose.

<a expr:href='data:link.target'
onblur='try {parent.deselectBloggerImageGracefully();} catch(e) {}'>
<img alt='' border='0'
expr:src='data:link.target' height='100'
style='display:inline; margin:0px auto 10px; ;cursor:pointer;'
width='100'/>
</a>

Feel free to change this portion of code to anything you like. Just make sure the src and href parameters must be written as expr:src and expr:href respectively. This is an undocumented coding element, but I think that's the way the Beta's interpreter knows that it is an expression (to evaluate.)

Hope you will enjoy this new hack. Please give me your feedback.
[Thanks Hoctro.]

Add Background Images to Adsense Ads-Blogger Hack

2008-01-20T02:43:00.002-08:00

Wanna add background image to yourr adsense ad so that it looks better..
Ok then here is the trick..

<table align="center" width="your_image_width" height="your_image_height" border="0" background="your_image_path">
<tr><td width="your_image_width" height="your_image_height">
<div align="center">
Put_Google_Ads_code_here
</div></td></tr>
</table>

Edit the above code properly as below..

Replace Put_Google_Ads_code_here with your adsense code.
Replace your_image_width with the width of your image
Replace your_image_height with the height of your image
Replace your_image_path with your image file's url

After editing put this code in the place you need your ads to appear(with background image)

When you choose the background colour and border colour in Adsense for content setup please try to use colours matching with your back ground image..

How to Add 3 Columns to Footer Section-Blogger Hack

2008-01-20T02:43:00.001-08:00

Adding extra columns to your footer section will provide more valuable space for blog widgets, and also contribute a modern "Web 2.0" appeal for your blog design.

There are only four main steps to this tutorial, and I'm sure you'll agree that the overall process is quite simple. I have taken into account that different blogs have different widths and styles, and so have designed a fluid solution which should work in any Blogger layouts template.

Creating the new columns

Here are the four steps needed to transform the footer section of your blog template:

Back up your existing blog template!

Before making any modifications to your blog template, it is essential that you make a back up of your existing template. Then if you make any mistakes, or decide you don't like the new look, you can easily revert back to this design.

To back up your existing template, go to Template>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link near the top of the page. You can then save your existing XML template file to your computer.
Move all existing widgets from the existing footer section

In the Layouts section of your Blogger dashboard, move all widgets which are present in your footer section into your sidebar (or other section) instead. This is only temporary, as you can move them back later once we have finished adding your new footer section. Most importantly, this ensures that you don't lose these widgets during the modification, and makes it much easier to complete.
Add extra code to your footer section.

Go to Template>Edit HTML in your Blogger dashboard, and do not check the "expand widget templates" box (this simplifies the process).

Now you need to find this section in your template:

Please note that this particular section may be called something slightly different in your template, eg: "footer-wrap" or "footer". In the case of Rounders templates, you may notice that there are in fact two DIV sections around the footer section. In any case, all we need to change is the line highlighted in GREEN.

Replace the entire line highlighted in GREEN with the code below:

is a good idea to save your template at this stage, before we add just one small section of code to style the new footer section and ensure that the widgets don't get pushed beneath each other when you add them later.

Adding style for the new footer section

Once again, open the Edit HTML section in your Blogger dashboard. This time, you need to find the closing "</b:skin>" tag, which is where the style section of your template ends.

Immediately before this line, add the following lines of code:

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

And save your template again. The style in these lines of code ensure that the footer column don't get too bunched up, or slide beneath each other in the layout of your template.

Now you have finished adding these new sections to your footer, go to the Layout section of your Blogger dashboard (Template>Layout), and you will see the three new column, plus a lower section which spans the width of all three column, to which you can now add new widgets!

I added a horizontal line to the footer section to ensure that there is a clear distinction between content in the footer columns and content in the wider section beneath. If you would like to change the color of this line, you can do so by replacing the hex color values in the line below (highlighted in red) with a different color:

<hr align='center' color='#5d5d54' width='90%'/>

If you are unsure of the hex value for the color you prefer, you can refer to the Color Calculator in the tools section of this site.

If you would prefer to remove the line altogether, simply delete the whole line.

I hope this tutorial enables you to customize your footer section with ease, so you can add more widgets and content to this area of your blog template.

For Future Updates,Please Subscribe!

How to Add a Signature to Your Blogger Posts-Blogger Hack

2008-01-20T02:42:00.004-08:00

If u Want to Pretty Up Your Post,There Are many Things,But to Add Signiture to your Blogger Post is Much Fun.Well,Below i am Showing a Tutorial How to Add a Signature to Your Blogger Post!

You must first have a signature that you want to have at the bottom of your post. This signature will be in the form of an image. To get that image, you can look online for sites that help create signagtures, or you can make your own using GIMP as I did. If you need help making a signature, read some of my posts on design and graphics. After you have your signature, upload it to your web host...I use Ripway.

Open your Dashboard/ Settings/ Formatting/ Post Template. Put this code in the Post Template box:

<p><image class="centered"alt="post signature" src="SIGNATURE URL" /></p>

Replace SIGNATURE URL With The Image URL!
Enjoy!!

Super Peek-A-Boo Posts-Blogger Hack

2008-01-20T02:42:00.003-08:00

In This Hack you can expand Posts from summary to full post, collapse them, and if you don't have a post summary in a particular post, the "Read More..." and "Collapse" links will not show up in your post.

This is how to implement it.

Step 0:
Back-up your template before modifying it.

Step 1:
Add the following javascript code to the head of your template. You can place it just above the </head>-tag.

<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />

Step 2:

Find the includable named 'post' in your template, and change it so that it is exactly as shown below (the code in red has to be added):

<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>

<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
<div style='clear: both;'/> 
</div>
</div>
.... rest of template code ....

Save your template.

Step 3:
In the Settings - Formatting tab go to the bottom and enter the following post-template:

Type your summary here.
<span id="fullpost">
Type the rest of your post here.
</span>

Now every new post you start will have a fullpost-span by default. If your post is short, you can delete the <span>-tags from the post. The post will be displayed in full, and no links with "Read more..." or "Summary only" will be displayed for that post.

How it works (skip this if you don't like tech stuff).
The changes you made to the code make that every post-body consists of at least 3 span's: the fullpost-span that you entered in the post-template, a span for the 'Read more'-link, and a span for the 'Summary only'-link. Because there might be other spans in your post, each of these 3 spans have a unique id ('fullpost', 'showlink' and 'hidelink' respectively).
When you open your blog on the main page, the post is displayed as follows:

* Summary is displayed (always)

* Full text is hidden (first div, set to display:none)

* Read more is shown (second div)

* Summary only is hidden (third div, set to display:none)

The post is given a unique id, and this id is passed to the javascript-functions showFull and hideFull respectively. These functions use the getElementsByTagName-methods to obtain handles to the spans, and then toggle the way they are displayed.
A third function, checkFull, checks if the Fullpost-span exists. If not, both links are hidden.

How to Write HTML,Source or Java Script Codes in Blogger Posts

2008-01-20T02:42:00.001-08:00

You want to know how to display html code / source code in your blog posts for the latest stuff you have created or want to show.

Here is an easy solution -

Go to the Encode/Decode HTML entries converter at Centricle

Just copy your entire html code / source code in the box at the above website and press encode/decode.

Now copy it back to your blog post (edit html / compose mode) and get your code displayed as you want people to see.
It is Sooo Easy!Try it!
Enjoy!

How to Add a Tooltip to Your Label links in Blogger

2008-01-20T02:41:00.003-08:00

Another polish-and-shine hack: add a tooltip to the labels-links. Hovering your mousepointer over the link in your posts footer will show a tooltip saying "More posts on this topic".

Insert the red code into your template.

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' title='More posts on this topic' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

Easy!!

Post update Hack in Blogger-Blogger Hack

2008-01-20T02:41:00.001-08:00

My Recent Posts Widget now and then leads to discussions with other Bloggers about the order in which recent posts appear. Updated posts appear at the top of the recent posts list, even if their publishdate is somewhere far in the past. From a technical point of view, this is quite logic: people subscribe to a feed to be informed about changes in the blog, so if an old post is updated, it should appear in the feed immediately. But many times changes are just cosmetic: correcting a typo, repairing a dead link, or assigning a new label. In that case, appearance of the post in the feed is a little bit annoying or confusing.

Some readers suggested that I should change the coding of the widget, and leave out updated posts. I think that is not a very good idea, because an updated post could contain relevant new information. So I came up with an interesting trick.

Add the following styling definition to your blog's template:


.updateinfo { display:none; }

Now, whenever you update a post, at the beginning of the post insert update-information, using the following html:

<span class="updateinfo">UPDATE:
Repaired some dead links. Content has not be changed.</span>

If you publish your post, the update info will not be displayed on your blogpage, but the feed, and therefor also the Recent Posts Widget, will show the update-text.

How to Create Drop Down Menus in Blog-Blogger Hack

2008-01-20T02:40:00.002-08:00

Blogger Beta provides an easy way to create link lists even for those who don't know HTML. But, there is no such functionality for drop-down menus. I had a few people ask me how to create drop-down menus and where to add them in the template. I thought this is something which can be simplified using a third-party widget. I have created an interface, similar to that of Beta, with which you can easily create drop-down menus and add them to your blog with one-click!

Just goto my Drop-down menu creator page and add your menu items one by one by providing a name and URL for each item. The updated menu will be shown to you. Once you are happy with the menu that you created, click the button to add it to your blog. You will see a page (like the one shown below) where you can select the blog (if you have more than one), provide a title for your menu and then click "Add Widget". You will see the widget getting added to your sidebar which you can move around to wherever you want. All this can be done without touching the template code!

How to Show Table of Contents in Blog-Blogger Hack

2008-01-20T02:40:00.001-08:00

A little while ago I thought it would be nice to have a Table of Contents on my Blog. So I experimented a bit on how this could be done without a lot of hacking, and also without outside help such as del.icio.us.

Ramani has some interesting hacks, and 2 of them I combined into a new one.

If you want to list all your posts in one page, you can use the following url:
http://yourblog/search/label/?max-results=100
Is it as simple as that?
Yes it is!
The max-results is limited to 100 results. This is a Blogger server-side restriction. So it will give a TOC for only the 100 latest posts.

If we want to display only post titles we have to do a little more hacking, but Ramani has explained how to do this on archive pages. I just applied this to label pages.

Edit your template, find the Blog widget, and replace the entire main-includable with this txt-file. Save your template.

Add the url to a convenient place in your menubar or sidebar, and ready you are.

How to Display A list of all posts in your Blog-Blogger Hack

2008-01-20T02:38:00.000-08:00

One of my visitor Hitesh Kulkarni sent a letter to me.
Here is the letter

Hi

I always wanted a list in my blog of the titles of all my post. Recently, I saw one in your blog. Can you please reveal, how do you do that? Is it that you just type in the links or you have done some of the coding work .Also I wanted to know that you are using old or the new blogger? Will the list function work in all blogging platforms?

Sincerely
Hitesh

Hello Hitesh, you forgot to mention your blog’s URL. This blog is using the new blogger XML template. To type in the links for blog posts was a very lengthy process, also it needed to be updated every time you post.But the method I use is very simple and works within seconds.Which ever blogging platform you are using, this method should work. All you require is a feed of your blog. Blogger has an inbuilt feed option for you. Your RSS feed URL should be http://www.yourblog.blogspot.com/rss.xml .Now you need to convert this into a simple javascript coding. You can get one converted here. Fill in all the details you want.

After you had that converted, Go to Dashboard > Layout > Page Elements > Add a Page Element > HTML / Javascript. Paste the javascript code you obtained in it. Click on save . Now give your blog a look . It worked !

This method can also be used for displaying recent posts list after posts or in the sidebar.
For this, you have to change the number of post titles to be displayed.
To add a recent posts list after each post , you need to parse the Javascript code. It can be done here. Then paste the parsed javascript in your XML template in this line “post footer line 2” paste it there and see the results.

Note:: This will only give recent posts and not the previous posts.

How to Add a Menu Bar To your Blog-Blogger Hack

2008-01-20T02:37:00.002-08:00

Missing a real menubar on you Blog? This hack explains how you can add a simple menubar to the top of your Blog. It is in fact a simple link list, and that is a standard page element of Blogger Beta. I have added a new section at the top of the Blog Page, and the link list is inside that section. Of course there are some tricks to play, such as hiding the link list title, and showing the links list elements side by side. Here is how it is done.

In this Page Layout you can see where I have added the Menubar. The code of this section is highlighted in red:
<div id='header-wrapper'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Beautiful Beta (Header)' type='Header'/>
</b:section>
</div>

To the CSS-part of your template, add coding for the menubar-id:

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}

#menubar a:hover {
background-color: $headerCornersColor;
}
The menubar title is hidden, so that only the options are visible.
The list-elements are set to none, so that there are no bullets in front of the menu options. And if a menu-option is hovered over, it is highlighted.

Post Rating Widget for Blogger or Wordpress

2008-01-20T02:37:00.001-08:00

This tutorial will show you how to add ratings on your blog. not just blogger, wordpress, typepad, movable type but any kind of HTML file as long it’s able to embed Javascript inside the code. you can see the demo first here. or view the screenshot below.

How to implement it on blogger/blogspot?

here are the steps;

1. Go to your template editor under your dashboard. Tick the “Expand Widget Template”

2. Find this code

<data:post.body/>

3. Put the codes below right after that line above (or download it here),

4. Save your template, and done!

Please be creative. you can move the code as long it still inside the include=’post’ under the blog widget.

How to Implement this to Wordpress

Do you want to put this ratings on the post page only? or to your homepage and custom page too?

well, basically it’s all have the same steps. if you want to put this on your homepage, then you have to install this codes on your index.php file. if you want to install this on custome page, go to your page.php file. and if you want to install this code on your post page, go to single.php file.

Now, here is the steps.

1. Go to your Theme Editor.

2. Click on the Single or Index or Page on the file list on right.

3. Find this code below,

<?php the_content(â��Read the rest of this entry Â»â��); ?>

4. Put the codes below right after that line above (or download it here),

5. Save your theme. and done.

Notes: this services is provided by outbrain.

How to Add a Digg Button to Blogger Posts-Blogger Hack

2008-01-20T02:36:00.002-08:00

This post is for my fellow friends who asking for digg button display in their post. Digg button will show up on every single post you have in your blog.

1. STEP
Go to your blog template> Edit HTML> expand the widgets> and check for this line:

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

2. STEP
replace with this code:

<p>

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<data:post.body/>
</p>

3. STEP
Click on Save Template. Done!

So do you love this digg button? lol

Add Weather Report Widget for Blogger to your Blog

2008-01-20T02:36:00.001-08:00

Widgetizing your Blog is the new thing to explore here on Blogger TTT. Ramani shows how to add random Einstein quotes to your Blog. Phydeaux3 started all this showing Flickr Puppies, and even Hoctro now shows a Flickr Zeitgeist widget. So it is time that Beautiful Beta follows these fellows, with a useful Weather Forecast Widget. And ofcourse a tutorial on how to create this widget on your own Blog and make it easy-to-install for your readers.

You have to follow 3 easy steps:

Create the widget
Add it to your Blog
Add an Install-button to your Blog

Step 1: Create the Widget

Go to WeatherReports.com, scroll down and click Add WeatherReports To Your Site.
In the next screen, enter your city, select the colors and style of the weatherbox. After entering all your selections, you will go to the next screen automatically. Take a look at the preview, and select and copy the HTML-code.

Step 2: Add the Widget to your Blog

Add an new HTML page element to the sidebar of your Blog. Paste the code that you copied into the page element, and set its title to "Weather Report".

Don't save it yet, but go to step 3.

Step 3: Add an Install-button

Now we are going to add a button, that installs the widget on your visitors blog when it is clicked. In fact, we'll add a form with several input fields, but only the button will be visible. Here we go.

<form action="http://beta.blogger.com/add-widget" method="post">
<input value="Weather Report" name="widget.title" type="hidden"/>
<textarea style="display:none;" name="widget.content">
<script type="text/javascript" language="javascript1.2" src="http://weatherreports.com/jscript.html?width=125&height=125&theme=brand&location=Amsterdam%2C%20Netherlands&units=c"></script><div><a href="http://www.weatherreports.com/"><small>Free Weather Reports</small></a></div>
</textarea>
<input value="Install to Blog" name="go" type="submit"/>
</form>

The text between the <textarea>-tags is the html of your widget. Please notice that each <> is replaced with >.

Now save the page element and view your Blog.
If you want more information on how to add third-party widgets to your blog, take a look at these help pages.

How to Install Invisible Music Player-Widget For Blogger

2008-01-20T02:35:00.003-08:00

For an example of a blog with an invisible music player, go to Invisible background music player with your speakers turned on.

I don't recommend this, but there are bloggers who want it, so I will describe how first and explain why I advice against it later.

How to install an invisible music player to your blog

The very first thing you have to do is to upload your music file to a online file host which will put your music file online and not those that let you upload the music file and require anyone to listen to the music to click on a link to download the music file.

Once you have uploaded the music file to the web, get its URL.

Sign into blogger.com (Dashboard) and you will see a list of blogs you have created. Of course if you only have created one blog, you will see only one. Whatever it is, click LAYOUT and in any section, I recommend the footer, click "Add a Page Element", and in the "pop-up", select HTML/Javascript, then add this script into the HTML/Javascript box:

You will of course have to substitute URL of music with the URL of your own music which had been uploaded to the web.

The attribute loop="true" play continuously. If you want it to play only once, you will have to change it to loop="false".

[UPDATE]

Why I don't advice adding music that automatically start to a blog or any other websites

When you install an invisible music player, that means there will be no button to click to start the music. Therefore you must make the music play automatically for it to make any sense. That is why there is the attribute autostart="true" in the script.

A surfer may visit your site in the middle of the night while others are sleeping, or with a sleeping baby beside him or her, or in a public library, or he or she may already have his or her favorite music playing in the background. Once your music start, the visitor may be forced to quickly surf away from your site to stop the music and you lose a visitor. And if a surfer has already his or her favorite music playing, your music will replace that, and that may cause irritation. There will be no button anywhere for the visitor to click to stop the music.

Still want to install an invisible music player. Well, everyone have their own preferences and opinions and what they think is good or no good. The choice is yours.

Blog Theme Switcher-Widget For Blogger

2008-01-20T02:35:00.001-08:00

Theme changer or Theme switcher is a really a little complicated thing when comapared to the other hacks here..Here i introduce a theme changer for our blogger beta.

Here is the method to do it

Goto your Blogger Template>Edit Html and back up your Template by downloading it..
Now In the Template code find

<b:skin><![CDATA[

you will notice some variable defenitions and some style defenitions below it

copy all the data below the above code till

]]></b:skin>

and save the copied text as a text file on your desktop.

Now in the text file you will see codes like

<Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"

type="color" default="#ffd595" value="#eed595">

This means that the variable "sidebarTitleBgColor" by default has the value #ffd595 and now you are using the value #eed595

To use theme switcher you will have to replace each occurance of this variable by its value in the text file..

That is you should replace all occurances of $sidebarTitleBgColor with #eed595

Similarly all the variables(like $borderColor,$Sidebartextcolor $mainBgColoretc..) should be replaced by their values.

Now consider the declaration of the font variables
<Variable name="bodyFont" description="Text Font"

type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;">
Here the $bodyFont variable should be replaced by normal normal 100% Verdana, Arial, Sans-serif;

Similarly all variables should be replaced by the text enclosed in its corresponding value="........" declaration..
Now remove all the variable defenitions from the text file..
Variable defenitions will look like this
/* Variable definitions

====================
========Defenitions here====================
*/

So delete every thing between /* and */

Now your default style sheet is ready.Save this test file as default.css

Now make another style sheet and save it as custom.css.The great thing about this script is that you don't have to make a completely new stylesheet. You only have to define those rules that are different from the default stylesheet (although you can include all the options that are the same too if you want).
Similarly you can make as many style sheets as you want (say custom2.css,custom3.css etc).

Now upload all of your stylesheets somewhere(maybe google pages).
Now in your Blogger Template>Edit Html delete everything below the variable defenitions and above

]]></b:skin>

Now just below find the following code
</head>

and replace it with
<script src='http://simpletricksblog.googlepages.com/styleswitch.js' type='text/javascript'/>
</script>
<link href='url of default.css' rel='stylesheet' type='text/css'/>
<link href='url of custom.css' media='screen' rel='alternate stylesheet' title='custom-theme-1' type='text/css'/>
<script type='text/javascript'>
window.onload=function(){
var formref=document.getElementById("switchform");
indicateSelected(formref.choice);
}

</script>
</head>

(Dont Forget to replace url of default.css and custom.css with its actual urls.)

Now some where in the sidebar add the Theme switcher Button code below.

<form id="switchform">
<input value="none" name="choice" onclick="chooseStyle(this.value, 60)" type="radio"/>Default Theme<br/>
<input value="custom-theme-1" name="choice" onclick="chooseStyle(this.value, 60)" type="radio"/>Custom Theme 1
</form>

To add more themes you should add similar link href= tags for each of your stylesheet and add the button code for each of them..

The awesome javascript for this hack was developed by Dynamic Drive.

If you have any doubts feel free to contact me or comment here..

A Comment Form Below the Posts-Widget For Blogger

2008-01-20T02:34:00.000-08:00

(Click image for Clean Priview)

Sorry for Not Updating my Blog Yesterday.I have Some Problems While Posting in Blogger and There Was Problem in Our House Electricity.So, Today I Find a Very Simple and Very Easy Way To have A comment Form Below Every Post!I Dont Think That it is a Widget or Trick..You Suggest!

Did you Notice The Picture Above?

Now you Blogger / blogspot users can have a comment form under your post. this mean your readers can leave and write a comment exactly under your post. without clicking and open a new page / window.

How to Do That?Sooo Easy:-
1. This is a free service from haloscan.com, so what you need to do is just register for a new account on haloscan.com, and about seconds, you’re registered.
2. Login to haloscan
3. Click the SubMenu “Install”
4. Choose your blog type, and because we’re talking about blogger, so blogger it is.
5. Click Next and follow the instructions.
6. Done, and congratulation

With this haloscan free services, we can have a better great comment system on our blogger / blogspot blog.

there are many great points about this services.
1. We can easily integrate it with cocoment.com service, so you can track your comments
2. You can customize the header of your comment from
3. it’s free. that’s the most important
so what are you waiting for?

I think You Have Noticed This Comment Form in My Blog!

Have an easy way to leave a comment Quickly!

New Customizable Recent Comment Widget For Blgger

2008-01-20T02:33:00.000-08:00

Blogger announced that they support blog feeds in JSON format also. Soon, Hoctro found some sample code to use these JSON feeds and used it to come up with a recent posts/comments widget of his own. I realized that it is now possible to customize the recent comments widget further to anyone's needs.Using this method, we can only show very few words of the comment (too few to comprehend) and upto 5 comments only. I have developed a widget that allows the blog author to customize both these. You can see the new widget in my sidebar, showing entire comment mostly and significant portion of the comment in some cases.

With this widget,
1. You can specify how many comments you want to display in your blog (defaults to 10)
2. You can specify the maximum number of letters that should be displayed in each comment (defaults to 100).

Here is how you add this widget to your blog.

Step 1: Goto Template->Edit HTML tab. Find the tag in your template and add all the code from this page before it and save the template.

Step 2: Goto Template->Page elements tab and click on "Add a page element" in your sidebar. Choose HTML/Javascript element. Give an appropriate title and copy/paste this code.

<br/><script language="javascript">
var numcomments = 10;
var numchars = 100;
</script>
<script src="http://yourblog.blogspot.com/feeds/comments/default?
alt=json-in-script&callback=commentDisplay"></script>

You need to change the blog URL to yours. You could also change the number of comments/letters per comment to whatever fits your blog. Then, save the changes and move the widget to wherever you want. There, you have a customized recent comments widget!!

For those who are interested in the details, I am displaying the content of each entry in the comment feed instead of the title (after removing all the html tags). I display only the number of characters as specified and also control the number of entries displayed. All this is done in the callback function to which the JSON object is passed.

Table of Content Widget For Blogger

2008-01-20T02:31:00.000-08:00

The job is done. We now have a complete interactive Table Of Contents. Click the button in my sidebar(TECHNOLOGY HUNT) to display the TOC. You can sort the TOC by Post Title by clicking the column header. Click it again, and it is sorted in reversed order. The same way if you want to sort the posts by date: newest first, or oldest first. And by clicking on one of the labels in the TOC filters all posts with that label. Click the column header to return to the full ToC.

Here is how to install it to your Blog.

Step 1: Back Up your Template.

Step 2: Add a HTML Page Element
Edit your template in HTML-mode, and look for the with id=main. This is the section that holds the Blog posts.
Change that line as follows:

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Save the template and switch to the Page Elements Tab.
Add a HTML page element above your Blog Posts element.
Leave the title blank. Add the following html:


<div id="toc"></div>

Save your template.

Step 3: Add a Sidebar HTML-element
Now add a HTML-element to the sidebar. Set the title to "TOC".
For the contents, enter:

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=
999&callback=loadtoc"></script>

Replace YOURBLOG with the name of ...... exactly.
Oh yes, and save.

Step 4: Add custom styles to the skin of your template.
New id's and classes are:
#toc : the div-wrapper that contains the TOC
.toc-header-col1 : header of column 1
.toc-header-col2 : header of column 2
.toc-header-col3 : header of column 3
.toc-entry-col1 : cell in column 1
.toc-entry-col2 : cell in column 2
.toc-entry-col3 : cell in column 3

For your convenience: TECHNOLOGY HUNT uses the following styling:

<style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}
</style>

You can add this to the <b:skin>-part of the template, or insert it in the sidebar widget.

Enjoy!

How to Add Google Translator Widget to Your Blog

2008-01-20T02:20:00.000-08:00

What's you first reaction when you land on a website that's written in Russian, Chinese or Japanese ? Most of us would hunt for that English language translation flag and if that's missing, we will copy-paste the site address in Google Translate website or Yahoo Babelfish to convert the site content to English.

Way too much effort. Now let's reverse the roles and say somebody from China or Japan visits your blog (written in English). The foreign visitor will have exactly the same problems that you faced when you were visiting that non-English website above.

Since more than 65% of web users speak a language other than English, it is essential that you provide language translation features in your blog so that you don't miss the non-English speaking traffic.

So when an Arabic visitor passes your English blog, he or she can just click the Arab flag to translate the website into his native language - That way you don't loose a visitor plus he could even subscribe if the content is good even if written in another language.

Here's a quick tutorial to add language translation to your blog. You can be any blogging platform including Blogger, Typepad, Wordpress that provides access to templates. The visitor will see nine country flags corresponding to German, Chinese, Japanese, Korean, Arabic, French, Portuguese, Spanish and Italian languages.

All you have to do is copy-paste the following lines of Javascript code anywhere in your blog template.

Though the machine translation powered by Systran is generally not as correct as the service offered by professional translators, not all of us can afford an human powered translation. Plus the non-English visitor can alway connect the dots and make some meaningful sense of your content.
There's no translation support for Urdu, Russian, Hindi, Telugu or other Indian languages.

Download Neo Template For Blogger

2008-01-14T02:26:00.000-08:00

[Haven't heard about Neo before? Read this post .]

Neo in other languages:
Spanish (thanks to Ayreonauta): Demo blog, Translated javascript file
Chinese (thanks to Guradian, GG): Installation instructions, Translated template, Demo blog
French (thanks to Nym): Translated Template, Demo blog
Portuguese (thanks to Ricardo Santos): Translated Template, Demo blog
Indonesian (thanks to Bikin Blogger): Installation instructions
Vietnamese (thanks to YHT): Installation instructions, Dang's translation
Norwegian (thanks to Laila): Installation instructions, Demo blog

As I had announced earlier, I will now explain how to install Neo and move your widgets without losing them (sorry it got delayed a bit). I moved the widgets myself for those who paid for Neo but for the free version, you have to do it yourselves. Here's something you need to understand about new Blogger. For any widget in your blog, only the code for the widget is in your template. All the data belonging to that widget (for example, all the links in a link list widget) are not part of the template. So, if you just move the code from your old template to Neo, Neo will pickup the data and all your widgets will work as before.

Another nice feature of new Blogger that comes handy is the unexpanded template (the template code that shows up when "Expand widget templates" checkbox is not checked). Here is an example of how it looks.

In this example, any line that starts with b:widget refers to a widget and each widget has an id. Widgets are contained within sections (lines that start with b:section). They could be present within sidebar or footer sections as highlighted in the image. So, all we need to do is to pickup all the lines starting with b:widget and add them to Neo (I was quite happy when I got this working first time). Let me go through the steps for installation in detail :

Disclaimer: Please note that you are taking the responsibility to copy your widgets to Neo. If you follow these instructions, everything will be smooth. So, read these instructions twice before you start.

Step 1: Backup your current template (Very important)

Step 2: Goto Template tab and click on Edit HTML link. Copy all the lines after <> tag that start with Right click here and save the template code. Open this neo.xml and find the portion of code shown below. Copy/paste all your widgets to the place indicated below (between and ). Save the file.

<div id='newsidebar-wrapper'>

<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Posts' locked='false' title='Posts' type='HTML'>
<b:includable id='main'>
<div id='LabelDisplay'>
<div id='LabelTitle'>
</div>
<div class='widget-content' id='LabelPosts'>
<script language='javascript'>fetchLatestPosts('<data:blog.homepageUrl/>', '');</script>
</div>
</div>
</b:includable>
</b:widget>
Add all your widgets here...
</b:section>
</div>

Step 4: In Edit HTML tab, browse and upload this file to Blogger. When you do this, you should not get the error shown in this image.

If you get it, DO NOT click on Confirm & Save. If you do so, you will lose those widgets permanently. Instead, click "Cancel". This error indicates that you have missed some widgets from your old template. In this example, Label1, HTML1, HTML2 are the ids of the widgets that you missed. Go back to the unexpanded template and pick up these widgets. Once you add them to Neo, your template will be accepted without error.

Step 5: Now if you goto the Page elements tab, you will see 3 columns as shown below. Leftmost column has the Labels widget and the second column has the Posts widget at the top. These two widgets come with Neo by default. Though they are better placed at the top, you could move them wherever you want but if you delete them, you will lose the Neo functionality (asynchronous loading of posts). Rest of the widgets in second column are the ones you copied over. You can now drag and drop them wherever you want.

Step 6: There are some final settings to be in place for Neo to work properly. Goto Settings/Site Feed and if you are still in basic mode, switch to Advanced mode and save. Goto Formatting tab and set it to show 1 post in main page (Neo will just replace this post whenever you click on another post's title. If you have many posts in main page, it will be wierd if only the topmost one changes).

It is a good idea to add Archives widget to your blog while using Neo because Neo uses javascript links to make your blog faster and these links will not be indexed by search engines. But Archives widget will still use normal links in Neo too. Just having monthly archives will ensure that all your post pages are indexed. I have been using Neo for several months now and all my posts are indexed by Google.

Some possible modifications to Neo are described in the Neo FAQ. Make sure you read that too. Good luck for your transition to Neo!

Testimonials: by Bobby, by Paula, by Waz

Here are some Neo Mods (modified versions of Neo) available for you to try out!

Neo wears denim by Mosi, Rounders with Neo by arephyz

EboNeo and NeoColors by diddy

NeoKubrick and iNeogle by 阿倫

Neo Template:The lightning fast template for new Blogger

2008-01-12T02:25:00.000-08:00

Neo template is not just some CSS magic. It is an ultra-fast template with which one can navigate through your blog very quickly. As a result, your visitors would enjoy their stay in your blog. It employs the cutting edge technology called AJAX (in particular JSON) and makes best use of the advanced features of new Blogger such as Label feeds and Per-post comment feeds. And it's free too! To summarize it's features:

1. A visitor can navigate through your blog much faster because the entire page (all the sidebar stuff) won't be reloaded while viewing every post. When he selects a post from the list of recent posts (or posts under a particular label), the selected post and its comments are displayed instantly. When he selects a label, the list of posts under that label are loaded asynchronously too.

2. Newer comments are shown before older ones instead of the usual oldest to newest order. Also, comments are divided into pages with 10 comments in each page. Both these features make a big difference if your blog gets many comments.

3. Rounded corner boxes and pleasant colors add to the visual impact.

But, it does have some limitations. It doesn't go well with blogs that use Adsense/other ads because it results in fewer page impressions. Please go through the Neo FAQ to find out how to modify Neo (to show comments from oldest to newest order) and understand other limitations/requirements of Neo to work properly.

I am using a modified version of Neo in this blog. Check out the demo blog to get a feel of how Neo would work with your posts. To this basic template, you can add header image, change colors/fonts using the new Blogger's WYSIWYG interface etc. Various blogs using Neo are showcased in this page. You can see how people have customized the look and feel of Neo.

Neo template is available free of cost. More details in this post . Neo awaits you!

Blogger Templates

We Have Moved!!

New Black 3 Column Blogger xml Template

Curved 2 Column White Xml Blogger Template

Techblog 3 column Xml Blogger Skin

Plantilla Blogy Glass 2 Column Blogger xml Template

Earthling 2 Column Blogger Xml Template

Clean Box 3 Column Blogger Xml Template

How to Add Smileys on/to Blogger Posts

New WOW Smashing 3 Column XML Blogger Template

New 3 Column Flowers Blogger Template

New Plantilla Blogy Blue Web 2.0 3 Column Blogger XML Template

New iPlantilla Blue Web 2.0 3 Column Blogger XML Template

New 3 Column Blogy Stylicious Blogger XML Template

New Plantilla Blogy Stylecious Blogger Template having 3 Columns and i Think it Will Fulfill You Needs;)

New 2 Column Blogger xml Templates:Technology

New 2 Column Blogger xml Templates:Wedding

New 3 Column Blogger Hawaii XML Template

New 3 Column Blogger Hawaii Blue XML Template-2 Types

New 3 Column Blogger XML Template:GOLD-FISH

New 3 Column Blogger xml Templates:Simple

New 3 Column Blogger xml Templates:Rounders Series

New 3 Column Blogger xml Templates:Thisaway Series

New 3 Column Blogger xml Templates:897-565

New 3 Column Blogger xml Templates:Denim Series

New 3 Column Blogger xml Templates:Tic Tac Series

New 3 Column Blogger xml Templates:Dots Series

New 3 Column Blogger xml Templates:Moto Series

Cool 3 Column Blogger xml Templates:Minima Series

New Blog Bus 3 Column Blogger XML Template

New She Got Style Blogger 3 column XML Template

New MP3 Player Blogger 3 column XML Template

New Fangled Blogger 3 column XML Template

New 3 Column Adsense Black Blogger xml Template:Bloggerized Adsense

New 3 Column Adsense Blogger xml Template:Nyoba 780

New 3 Column Adsense Blogger xml Template:Nyoba

New Black Delicious 2 Column Blogger XML Template

New Black Flowers 2 Column Blogger XML Template

2 Column softlight template for Blogger

2 Column Underground Blogger Template

DFire black blogger template

Solipsus template for blogger

Greenery Blogger Template

New Alvin And The Chipmunks Blogger Template

New 2 Column Blogger xml Template:BLOGY-DEAD

New 2 Column Blogger xml Templates:Hot

Fly Blogger Template

Shower Blogger Template

Pink Flowers

Bubbles

New 2 Column Blogger xml Templates:Cool

Blue Polka Dot Blogger Template

Japanesse Girl Blogger

Show Me Blogger Template

Great Portfolio Blogger Template

Little Princess

Rainbow Blogger Template

New 2 Column Blogger xml Templates:Sunset

Sunset in Grey

New 2 Column Blogger xml Templates:Kids

New 2 Column Blogger xml Templates: Valentine's Day

New 2 Column Blogger xml Templates:Flowers

Sun Flower Blogger Template

Rice Field Blogger Template

Another Flower Template

Flowers

Chocolate 2 Column Blogger Xml Template

New 2 Column "Second Thing" Blogger XML Template

New 4 Column xml Blogger Template

New 4 Column xml Blogger Dragon Template

New 4 Column xml Blogger Blue Template

New 4 Column xml Blogger Wide Blue Template

Directly Go to Your First Post

Add a Favicon to Your Blog

Change or Swap the Title of blogger posts for better SEO

A calender Archive Widget for Blogger

13 more built in online bookmarks for blogger

"Talk the Talk" - Participating in Discussions to Increase Traffic

Attract Non-English Traffic to English Site-Increase Traffic

Place Google AdSense Ads below post's title in Blogger