Blogger Tutorial (5/6): How to Install a Custom Blogger Template

Hi once again. Remember not long ago we explored some nice gadgets and addons to enhance your blog? Now we are going to go one step further – customizing your blog template!

In Tutorial 2/6, we used the Blogger.com’s standard template “Minima” and our blog looks like this now:

Yes yes, I can hear everyone complaining how dull it is already! But fear not, we are going to transform this blog into something much more interesting and wonderful at the end of this post. Before that, let’s look at how other people tend to customize their website/blog template. How about we begin with this site – WebHostingSecretRevealed.com?

Design of Web Hosting Secret Revealed

  1. Blog Title with Logo (should be easily interchangeable)
  2. Home button to let reader return to the main page
  3. Other useful links to be put at the top

Actually, this is a much adopted approach for the web nowadays. This layout gives the reader a totally neat and “user-friendly” feeling. You could see many more examples around:

Design of EnGadget

Site link: http://www.engadget.com/

Design of CNN

Site link: http://politicalticker.blogs.cnn.com/

Getting into action: Installing K2

We are going to use this approach to customize our blog. To begin, let’s head over here to have a look at a very popular blog template called K2. This is what we want! Customizable title and background picture with tabs underneath it, awesome. Now download the template:

The file downloaded is “k2-blogger.xml”.

Now, from your Dashboard, you’ll need to get to Layout>Edit HTML. Before we begin any modification to your blog, let’s be on the safe side and backup your current template, haha! Just in case any “unfortunate” events occur, at least we could revert back to the old one.

  1. Backup a copy of your current template (the file would be “template-somenumbers.xml”)
  2. Choose the file “k2-blogger.xml” that you’ve downloaded just now
  3. Upload the new template to the system

OMG!!! Your blog just magically transformed into a beauty!

Still, this is not perfect yet. The downloaded template consists of some tabs and links that we will not require for our blog. Hence, some minor modifications are still needed. We could even change the title background to something we fancy. Just follow the below tips to make everything go your way. :)

In Edit HTML page, tick the Expand Widget Templates checkbox, and be in the Edit Template column to do this:

Change the highlighted link to the link of the title background image you would like to use.

Edit these codes to change the tabs to the links that you’d like to display.

Tada! Have a look at the customized blog now and compare it to the previous layout. Wonderful isn’t it?

To experiment with a variety of different templates, give these links a try:

In the next and final installment of this Blogger Tutorial, we’ll be learning how to use some analytical tools/statistic counters to analyze and understand where our blog readers come from, what they are interested in, and how all these data could help you improve your blog contents and increase your readers. Till then, adios!

About the author

Blogger Signup

E-quan graduated from Technological University of Malaysia as an Electrical and Electronics Engineer.

He is now attached with an MNC specializing in power and automation technologies. In his blog (Confirm Cekap), he describes himself as a full-time procrastinator although in reality, he is “not”. He likes 80’s music especially Cantonese pop songs. He plays the Electone and wishes to own a grand piano (amongst the many things he would like to own) soon.

*Side Note: This is the fifth article of E-quan’s Blogger Tutorial series. You can read the first four articles here, here, here, and here. Also, if you are interested to write for us, read how to guest post at W.H.S.R..