How To Make Your Own Blogger Templates

By -

how to make blogger css template themesHow to make your own blogger templates! This question was revolving in my mind since last few months. Initially I started my blogging with blogspot and I used to search for new cool templates. No doubt, there are several beautiful and professional blogger templates available today. But a template can never touch your imaginations. Everyone thinks in a different way likewise they also want their template to be different.

Making your own template will provide you a lots of scope and space to act your thoughts. You can choose the width, height, no of columns and a lots of other things. But there are no such tutorials available that can guide us. So, I thought of coming up with a post which will have A to Z of making a blogger template.

Note that we are going to make HTML template. This is not a XML template. XML template is a bit more difficult to make. Well, I will cover that too, but later. For now we will learn the method of making a HTML blogger template. For this, you have to switch on to classic template and then add the code. There will be no widgets, you have to add all codes (adsense/HTML/JavaScript) manually. Still, there are several advantages of CSS templates.

Step 1 : Choose your CSS style :

There are thousands of free CSS templates available on net today. You can search and choose any of them. But just to make your life easier, I am providing few free CSS template sources. Check out them and choose one of your choice.

Step 2 : Changing the title tags of your template :

After downloading your template, open yourtemplate.html with notepad or any of those html editors. Find <title> and </title> at the top of the template. Now put the below code between <title> and </title>.

<ItemPage><a href=”<$BlogURL$>”></ItemPage>



Now it should look like the below screenshot.

make your own blogger templates

Step 3 : Changing Header Of Template :

Now find <body> tag and below there must be something like <div id=”header”>. Copy the below code and paste it there.

<ItemPage><a href=”<$BlogURL$>”></ItemPage><$BlogTitle$>


Look at the screen shot below to get the idea.

how to make blogger templates

Step 4 : Putting Blogger Body Codes To Template :

This is the most important part. Body codes contain important things like blog posts, comments, post titles, post dates etc. <div id> for this section changes from template to template, so you need to get a good html editor like Adobe’s Dream Weaver to do editing. You may find a lots of <div id> codes there. You have to delete them all and then paste the blogger body code there. Get blogger post body codes here.

For an example the below screenshot is having <div id=”main”>. You can have “My Body” or “Contents” etc.

how to make your own blogger template

Step 5 : Showing Recent Posts :

Classic templates are not widget ready, I’ve told it before. So, we have to add everything mnually within the template code. Now, the most important thing that all we want is a recent posts tab, showing latest posts on our blog. Let’s add it.

It’s a simple code that you need to add between <ul> and </ul> tags . There should be two or four <ul> tags present in your template. Now you decide the location where you want this recent posts tab to show up. After selecting one location, delete all the <li> codes present between <ul> and </ul> tags. Then paste the below code:

<li><a href=”<$BlogItemPermalinkURL$>”><$BlogPreviousItemTitle$></a></li>

Now we added recent posts section to our template.

Step 6 : Showing Archive :

Archieves section is very essential in a template. This works as a sitemap for search engines and hence having this will increase your SEO values. At the mean time it gives your users the freedom to navigate. It’s a must have for all the templates.

Find a tag starts with <ul> and ends with </ul>, delete all the <li> codes present inside it and paste the below code.

<li><a href=”<$BlogArchiveURL$>”><$BlogArchiveName$></a></li>

We are almost done now!

Step 7 : Adding Other Things ( Adsense,Stats,Entrecard etc.) :

Repeat the same thing that you were doing for adding recent posts or archieves. Then add your adsense code or HTML code there. Hit save button and publish.

Step 8 : Editing Footer :

Footer tag is always labeled as <div id = footer>. Find this link and add your anchor link text or whatever you want there. And now we are completely done.

Congrats!  Now you can make your own blogspot templates easily.

Soumya is the admin and founder of Techcular. He loves to discover and learn new things on Internet. You can find him writing on his personal blog few times.

9 Comments to How To Make Your Own Blogger Templates

  1. @ Sid : Instead of writing codes for labels, you can add that directly from the 'Page Elements' page. Write the widget enabled blogger template to add any widget easily.

  2. very nice! One thing i can't figure out though… i editted the index file, and it opens fine on my computer (where all the images and the css file are stored…

    so i paste the HTML into the blogger, but where do i put the css and the images? I know they need to go somewhere, but i can't figure it out.

  3. I have same issue as Modrndansr has… please somebody help? what we should do with the images?

    does anybody was successful using these steps?

    I try to follow these steps and then I have pasted the template code to my blogger edit template area but it says: “We were unable to preview your template” & “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.

    XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.”

    where I am doing wrong? I need help :(

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

What is 3 + 12 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)