How to change blogger template

So you got tired with the look of your blog,  or you think the template you chose when setting up your blog was a mistake in the first place? You tried to change the template with what Blogger provides but the choices is too limited. What to do?

What to do? You change it to a third party template, that’s what you do. You come to the right place, because I’m going to tell you how to do it.

Just follow these steps:

  1. Find your dream template
    • There are lots of websites offering free blogger templates. Among them are Btemplates, PYZAM and Ourblogtemplates.
    • When you found what you like, test it first. Most template comes with Live Demo site, go there and try it out.
    • If you are satisfied with how it looks and functions, download it.
  2. Back up your current template
    • This is important, because once you replaced the template, the old one will be gone.
  3. Uploading to Blogger
    • To change your template, you need to upload it to Blogger server.
    • In Edit HTML, under Back-up/Restore Template, click Browse.. to select the template you’ve downloaded in step 1.
  4. Once you selected it, click Upload.
  5. Blogger will ask you to confirm widgets deletion. Note1: Deleted widget will be lost, and can’t be recovered. Note2: If you don’t want to lose the existing widgets, read this article where I show you how not to lose your existing widgets.
  6. If you don’t mind losing your existing widgets, click Confirm and Save.
  7. If no error occurs, a message "Your changes have been saved View blog" will be displayed.
  8. Click on View blog to see the results.
  9. Done
Technorati Tags: ,

26 comments to "How to change blogger template"

Sardie May 17, 2009 at 5:51 AM    

Question 1: if you loose the widgets, you can put them back can't you?
Question 2: can you change the color on head of the 3 column templates like you can on the original blogger templates? and add you own photo at the top of the template?
I have been wanting a 3 column template and all the tutorials I have tried don't work or they make my head swim, not an html person for sure.

Sardie May 17, 2009 at 6:00 AM    

sorry, those questions I just posted are for the templates at

Greenlava May 17, 2009 at 4:21 PM    

Hi Sardie,
Welcome to my blog. Answers to your questions:
1. Yes you can put them back, provided you have the codes or you remember where you got it in the first place.
2. Yes you can change the header color or add your own photo.
2.1 To change the color go to Layout>Fonts and Colors, and look for the item in the scrollbox, click to select it. Then you can click on the colors, at the same time see the changes that take place in the preview window at the bottom.
2.2 To use your own photo in the header, go to Layout>Page Elements. Once there click on Edit link at bottom left of Header box. Configure Header window will pop up. You can proceed from there.
But for some templates 2.1 and 2.2 are not applicable. But it's still doable, with some HTML coding.
Anyway good luck with blog. Feel free to Email or tweet me for help.

Vicky Carter May 26, 2009 at 5:51 AM    

Hey there. I'm seeing that I definitely need some major HTML instruction. What I would like to do is switch the columns on my blog - moving the smaller column containing links from the right to the left - and the blog area from the left to the right. Is this a somewhat easy fix or very involved? Thanks a bunch!

Greenlava May 26, 2009 at 11:53 AM    

Hi Vicky,
Thanks for visiting.
What you want to do is change the float direction.
But before anything else, backup your template, I have an article on that.
This is for you Diversity Resources, based on Rounders 3 template. Go to Layout>Edit HTML.

1. To move blog post to the right, look for this:
#main-wrap1 {


#main-wrap2 {

now change float:$startSide; to float:right;

2. To move all sidebars to the left, look for this:

#sidebar-wrap {

now change float:$endSide; to float:left;

That's it!
Come back now ya hear? :)

Vicky Carter May 27, 2009 at 3:11 PM    

Greenlava, you rock. Thanks again! I'm sure I'll have more questions later.

Greenlava May 28, 2009 at 12:23 AM    

Nah, don't mention it.

Rebecca October 9, 2009 at 7:46 AM    

Hi Greenlava, I'm back!

Background: I changed my template and everything transferred from my old template and what didn't I was able to fix. But while I like the layout of my new template I would like to change the size and boldness of the title fonts on my sidebar. I would also like to make it clear that some of the writing on my sidebar are links without having to put a curser over them (except my archives, I dont care about those "looking" like hyperlinks). I want it like my comments section is now.

Question: How do I accomplish this? Can you help? :p


Greenlava October 9, 2009 at 11:07 AM    

1. To define the sidebar titles, add this:
.sidebar h2 {
font-size: 16px; /* you can use px, em or % */
font-weight: bold; /* refer here for details */
2. To make links in sidebar looking like links (minus the archive), add this:
.sidebar a:link, .sidebar a:hover, .sidebar a:visited {
#BlogArchive1 a:link {

Rebecca October 11, 2009 at 5:02 AM    

Greenlava you are a complete genuis to be able to teach me to change the look of my blog! I am a complete novice at this stuff.

Thanks again!

Rebecca October 16, 2009 at 3:14 AM    

Hi again Greenlava!

I've added the "Recent Comments" widget/gadget to my sidebar. The text in the sidebar is weird when I have a word that uses an apostrophe.

example: isn't shows as isn (& # 39 ;) t - without the spaces between the characters and the parentheses.

This happens ONLY in the sidebar preview of a recent comment - not in the original comment under the body of any of my posts.

It looks UGH-ly! Is there an easy fix to this?


Greenlava October 16, 2009 at 6:18 PM    

I'm afraid I don't know any solution for that (particular gadget).
But I think you won't be getting similar problem if you use regular feed gadget (with its limitations of course) as I do in this blog.

Rebecca,  October 17, 2009 at 6:25 AM    

Cool, thanks! I'll check it out....

Rebecca October 27, 2009 at 5:17 AM    

GL - I would like to center the pics in my sidebars and in my posts (including the videos). I know this must be pretty simple but I just can't figure it out!

I have looked around, but have found you to be so trustworthy and the BEST at explianing how to do stuff! So here I am. Help?

Greenlava October 27, 2009 at 11:05 AM    

Just enclose the pic and video codes in [center][/center] tags. Replace [] with <>
1. Sidebar image:.
[center][img blablah /][/center]
2. The in-post videos (post editor HTML mode):
[center][div bgInactive="url(chrome..blablah.. role="button"/][/center]

Rebecca October 27, 2009 at 12:26 PM    

Of course, I knew it was too easy! I was trying to use [align="center"]


You will also be proud to know that I was able to figure out on my own how to center the titles in my sidebars!

Woot! Thanks!

Greenlava October 28, 2009 at 3:19 AM    

There you go girl! :)

Rebecca November 9, 2009 at 9:25 AM    

Hello GL -

So I've figured out how to get quotation mark images into my blockquotes but I need to adjust the positioning of them and I can't figure it out. I've been working on this for 3 days! LOL!

I would like to have the opening image line up with the first line of text and the closing image line up with the last line of text or at least have the images be outside of the entire text and look nice and balanced.

I can indent but it indents the first line only. That looks terrible. Can you help me make my blockquotes look good?

I have nothing in html, but here's my CSS (modified for posting here):

post blockquote (
background url(OPENING IMAGE HERE) no-repeat
padding 15px
margin1em 20px
background-position 10px 10px
text-align justify
background-color #f5f5f5

post blockquote p (
margin .75em 0
background url(CLOSING IMAGE HERE) no-repeat
background-position:bottom right

post blockquote p (
margin .75em 0

I only changed/added the first two folders. I didn't do anything to the last.


Greenlava November 9, 2009 at 11:40 PM    

For positioning you use padding:

For opening quote:
.post blockquote {
background: url(OPENING IMAGE HERE) no-repeat;
padding-left: 50px;
padding-top: 20px;
margin:1em 20px;
background-position: left top;
text-align: justify;
background-color: #f5f5f5;

use left padding to change text distance from opening quote.
use top padding to move text vertically against opening quote.

For closing quote:
.post blockquote p {
margin: .75em 0;
background: url(CLOSING IMAGE HERE) no-repeat;
background-position: right bottom ;
padding-right: 50px;
padding-bottom: 20px;

use right padding to change text distance from closing quote.
use bottom padding to move text vertically against closing quote.
Make sure you have p tags inside the quote i.e [blockquote][p]QUOTED TEXTS HERE[/p][/blockquote] otherwise the closing quote won't appear.

Rebecca November 10, 2009 at 4:59 AM    

GL thanks a million!

admin November 19, 2009 at 11:39 AM    

I've been trying to adjust the font and font size of a gadget that I'm running in my sidebar. It is a random quote generator, but I can't seem to change it no matter what variable I alter in both the page template and the page element editor. I've checked out other sites, but their solutions must have been for previous versions of blogger. Can you halp me?

Greenlava November 19, 2009 at 4:21 PM    

You mean the one under the header?
Go to Layout>Edit HTML and find this line:
Try adding the code below right before that line, and see what happens:
#message-board { font-size:16px; font-family: verdana, tahoma, helvetica; color: lawngreen;}
Replace the values with your own.

BloggingBisnis March 14, 2010 at 8:22 PM    

Sometimes, some templates do not fit in IE or in Firefox. What should we do?

Greenlava March 15, 2010 at 8:05 PM    

Sorry, but I don't understand what you mean.

LaurenTheSims3 January 30, 2013 at 1:57 AM    

the layout of google blogger has changed and these steps no longer work... do you know of any updated tutorials on this subject?

LaurenTheSims3 January 30, 2013 at 2:04 AM    

nevermind i got it

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.