Free Blogger Template

Just completed my first free blogger template.

I use blogger blog often. Besides this blog which I use to talk about interesting cool stuff, I own a few other niche blogs that are also running on blogger blog. Each time I setup a new blogger blog, I will spend a little time to modify the standard delivered blogger template, so that the layout looks more unique and professional. It takes me quite some time to design a new blogger template, but it turns out to be quite a fun thing to do. So I will keep designing new blogger template whenever I setup a new blogger blog, and then what I will do is modify it a bit and release it on this blog for free download.

So here's the first free blogger template from me:


Click here to see the demo.
And here's download link of the XML code (Right click, then save target as).

Built-in features of this blogger template:
1. Yahoo + some extra cute emoticons. A javascript is already included in the template that will automatically convert some predefined characters into emoticons. To learn how to use them, read this post: Use emoticons on blogger blog.

2. Social bookmarks icon at the end of each post. This is a feature created by Beautiful Beta. It will give your blogs reader the convenience to easily bookmark your post on various social bookmarking service. If you want to add this feature to your blog without using my blogger template, read this post from Beautiful Beta to learn how to do it.

How to use my free blogger template:
1. Download the xml file using the above link.
2. Login to your blogger account.
3. Go to Layout > Edit HTML.

4. Click on the 'Download Full Template' link to backup your current template.
5. Click the 'Browse' button and upload the coolbloggertemplate.xml file that you have just downloaded.
6. Done.

When you first install the template, you will notice that top navigation bar, where I place the Home, About, etc. button doesn't show up. In order to add these buttons, go to Layout > Page Elements, and click the edit link on the 'HTML/JavaScript' element which is located directly above the 'Blog Post' element (as highlighted in the screenshot below).


Leave the title field blank, and paste the following code to the content field:

<li><a href="YOUR URL HERE">BUTTON1</a></li>
<li><a href="YOUR URL HERE">BUTTON2</a></li>
<li><a href="YOUR URL HERE">BUTTON3</a></li>
<li><a href="YOUR URL HERE">BUTTON4</a></li>

Replace the 'YOUR URL HERE' and 'BUTTON1', 'BUTTON2' with your own url and the button name of your own. Each line of the code represent one button. You can add or remove button just by adding or removing the code.

And that's it. Hope you like my first template design. If you want more, here are a list of free blogger templaes designed by others.

Use Emoticon On Blogger Blog

If you read through some of the posts on the Cool Stuff blog, you will notice that I use emoticons quite frequently. While writing good article is important, adding emoticons to a blog post makes it looks more interesting. To add emoticons to a blogger blog, follow the following steps:

1. Sign in to your blogger blog, and go to Layout > Edit HTML
2. Add the following line of code to the head section of of your template. The best place to insert this code is right before </head> tag.

<script src="http://mltan100.googlepages.com/emoticons.js" type="text/javascript"/>

By doing this, you are actually adding a javascript to your blog. Everytime any page of your blog is loaded, the javascript will automatically change certain pre-defined characters / symbols into emoticons.. So after inserting the javascipt, you will use the following pre-defined characters to invoke the emoticons:

Most Yahoo emoticons will work with this javascript. Example:
: )		: P
: D		: ) )
= ) )		= D >
Besides Yahoo Emoticons, I have also added the following cool emoticons for MSN into my blog:
/ wa ha ha		/ hi hi
/ o m g		/ n o
/ dig nose		/ s w e a t
/ s h o c k		/ f l o o r
/ h m m		/ X D
/ b l u r		/ b l u s h
/ no big deal		/ p l e a s e
/ b y e

Please take note that in order to call up the emoticons in your blog post, there should be no spaces in between the characters. I include spaces in the list above because I do not want the javascript to convert them into emoticons, so that you can see the characters.

Blogger.com is one of the most popular free blogging platform today. There are millions of blogger blogs out there on the Internet. Adding emoticons to your blogger blog is one of the cool stuff that you can do to make your blog stand out from the others. I like to use emoticons in my post. I express myself better with emoticons.

(p.s. I have received quite a number of emails asking for helps. Unfortunately I do not have time to reply each of them.. If you have problems implementing the emoticons on your blog, try to learn HTML, and some basic Javascript. It should help )