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:
- 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.
- Back up your current template
- This is important, because once you replaced the template, the old one will be gone.
- 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.
- Once you selected it, click Upload.
- 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. - If you don’t mind losing your existing widgets, click Confirm and Save.
- If no error occurs, a message "Your changes have been saved View blog" will be displayed.
- Click on View blog to see the results.
- Done
Technorati Tags: change,blogger template
26 comments to "How to change blogger template"
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.
sorry, those questions I just posted are for the templates at bttemplates.com
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.
Thanks
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!
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 {
width:485px;
float:$startSide;
and
#main-wrap2 {
float:$startSide;
now change float:$startSide; to float:right;
2. To move all sidebars to the left, look for this:
#sidebar-wrap {
width:240px;
float:$endSide;
now change float:$endSide; to float:left;
That's it!
Come back now ya hear? :)
Greenlava, you rock. Thanks again! I'm sure I'll have more questions later.
Nah, don't mention it.
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
htto://thecrud2009.com
Rebecca,
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 {
color:#5588aa;
text-decoration:underline;
}
#BlogArchive1 a:link {
color:#5588aa;
text-decoration:none;
}
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!
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?
http://thecrud2009.blogspot.com
Thanks!
Rebecca,
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.
Cool, thanks! I'll check it out....
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?
Rebecca,
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]
Of course, I knew it was too easy! I was trying to use [align="center"]
Sheesh!
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!
Rebecca,
There you go girl! :)
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.
Thanks!
Rebecca,
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.
GL thanks a million!
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?
Karis,
You mean the one under the header?
Go to Layout>Edit HTML and find this line:
/b:skin
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.
Sometimes, some templates do not fit in IE or in Firefox. What should we do?
@BloggingBisnis
Sorry, but I don't understand what you mean.
the layout of google blogger has changed and these steps no longer work... do you know of any updated tutorials on this subject?
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.