How I made an awesome blogger template from scratch?

Have you seen my first blog The blog about success? This is my first blog and it’s still on blogger(blogspot) platform. The template is the basic Minima template from blogger and I customized it to look more professional. Blogger templates are cool and fast loading when you make some modifications with it. Most of the time we bloggers look for free blogger(wordpress looking) templates. These are cool but complicated.

I used a wordpress template when BlogKori was in blogspot platform. The template was complicated for google search bots to crawl and that’s why google had only 3 pages indexed from my blog and the homepage was not in their index!

This is why I recommend blogger(blogspot) users not to use complicated wordpress like templates. Now let’s see how we can create a professional looking blogger template from scratch.

Getting started

Lets start with the basic Minima template. Create another test blog from your account and make all of those experiments inside that blog.

Removing the blogger navigation bar

This is one element why we don’t like to use default themes. You can remove the blogger navigation bar. Go to blogger dashboard > Layout > Edit HTML. Now search this code,

]]></b:skin>

Now add this code before/above the code,

#navbar-iframe {height:0px;visibility:hidden;display:none}

So the results will look like this. Save template.

#navbar-iframe {height:0px;visibility:hidden;display:none}
]]></b:skin>

Header image

Now if you upload an image as the blog’s header, it will look messy because of those borders. Now we have to remove those borders.

Again go to your blog’s HTML and search this part,

Now if you want to change the width of your blog’s header image, then change the value. Change two of the values of margins from 1px to 0px. This will remove those borders.

Top navigation links

I’ve added extra navigation links like Home, About, Popular articles etc.

If you want to do this, then go to Layout and “add a new widget“; select “HTML/Java script“

and then add the following,

<p>
<a href="http://the-address.com">Link 1</a> |
<a href="http://the-address.com">Link 2</a> |
<a href="http://the-address.com">Link 3</a> |
<a href="http://the-address.com">Link 4</a> |
<a href="http://the-address.com">Link 5</a> |
</p>

Replace those green parts into links and the red parts into your desired link texts. Drag the element below to the header, save the template.

Making the template wide

Minima template is about 660 pixel wide. You can change the value and make it wider. Again go to your blog’s HTML and select “Expand Widget Templates” Now search this part of your HTML,

I’ve selected the value of outer wrapper from 660px to 860px. Main wrapper is for the posts, and I selected 500px; I selected 300px for the sidebar wrapper.

Scroll down a bit more and you’ll find the footer section. Now change the value of the footer width to 860px. Save the template.

Adding a favicon

Search for this code in your blogger HTML,

]]></b:skin>

Now add this code (change the green part into the URL where the favicon is hosted)

<link href='ICON-SOURCE' rel='shortcut icon'/>

After that the code will look like this,

]]></b:skin>
<link href='ICON-SOURCE' rel='shortcut icon'/>

Adding search bar in the template

There are ways to add a search bar into your template but I found the lijit service easier and most effective. Go to lijit.com and sign up for your free account. Create a search bar widget with your blog’s address and with your social profiles. Get the code and add it to your search bar.

That’s it!

Now you have a fully customized new blogger template. Download the template and upload it to your favorite blog. You can do more modifications if you just spend some time with the code. If you need a custom comments system then you can read this: How to install Disqus comments system on your blog?

Please feel free to ask me a question if you run into any trouble. Please promote this page by using the Share/save button.

Carbon Neutral Business

Related posts on this topic

• Some quick tips to make your blogger(blogspot) blog SEO friendly
• How to create some unique and useful HTML elements for your blog?
• Add a Favicon in your blog
• Removing the blogger navigation bar from a template
• How to select a great looking template for your blogger blog?
• How to show HTML/java codes in blogger(blogspot) blog posts

Tagged as: blogger, blogspot, design, favicon, HTML, lijit, Minima, search bar, template