Free Blogger Templates

I am not an expert by a long shot, but I have been playing around with HTML and templates and wanted to share what little I've learned so far. If you're interested in adding some extras or making your template look a little more interesting, take a look and see if any of this might help you. If you have anything to add, please email me and I will update this post to reflect the helpful info.

First, before you even start hunting for the perfect background, you need to back up your current template. This is easily done by going into your dashboard and clicking "Layout". Once in the Layout, click on "Edit HTML". Now, here's the easy part: click on "Download Full Template". Now, here's the hard part: remember where you save it.

You back this up so that when you royally screw up your template, you can always go back to where you started. But there will be no royal screw ups. This is easy stuff. Honest. You'll do fine.

After saving your original template, you also need to save your widgets. If you have very many widgets, they are often deleted when you install a new template. You want to be able to put them back onto your blog. Blogger Accessories has a great article on changing your template without deleting widgets. Easy to follow. Follow their advice, but on the off-chance that they ever delete their blog for whatever reason or that link just fails to work, and again, I can't imagine a reason but we've all seen it happen......(big gasp of air after that run-on sentence).....I'll now give a run-down of the process.


Saving Widgets

1. While in the 'edit html' window, do not put a check in the box for "expand widget templates". Ever.
2. Inside, the big and scary html box, do a search (control-f) for this: b:widget id= You'll see it a few times, but after a couple hits you should see it repeating in a series. This list of widgets will fall under a heading that mentions your sidebar wrapper:
3. Highlight that list and copy and paste it into Notepad.
4. Later, when you go to upload your new template, you will get a message that says Widgets Are About to be Deleted FOREVER....or something like that. At the bottom, you have two boxes to choose from, Take it Lying Down or Stand Up and Fight Like a Man.....or something like that. It might actually say something closer to Confirm or Cancel. Do neither.
5. Instead, hunt around in the html gobblety-gook for that list of b:widget nonsense again. When you find some, find your Notepad file then copy and paste that list of widgets in with your new template's list of other widgets.
6. That's it!

Now for the template change.

Find one you like. There thousands of free blogger templates available. Here are the websites I've used and prefer:
Cutest Blog on the Block
Gisele Jaquenod
Simply Fabulous
One Cute Blog
LeeLou Blogs
Becoming Jane

Okay, the last one has nothing to do with templates, but I love that movie. I hit 'stop' when they begin running away together since I can't stand an unhappy ending. I am then able to watch it happily, over and over again. But I digress.

LeeLou is where I found my template. It makes me happy.

Each website should have some pretty easy to follow directions. Most will likely have you switch your current template to Minima before adding their changes. Change everything without fear because you've already backed up your original. No worries. If you mess it up, you can go back as if it never happened by uploading what you downloaded.


Now.....adding that 3rd column.
If your new template did not come with 3 columns and you would like to add one, this one's for you. Blogger Buster has GREAT instructions for this. Follow their advice. Seriously, my instructions will not compare to how easy their's are to follow. They explain it all so very well. But, just in case that link disappears someday, here's a run-down.

1. While in the "Edit html" section, in the box of gobblety-gook, search for the phrase #sidebar-wrapper { width: blah,blah,blah,blah.....the phrase ends with sidebar float */ } Yes, I said "gobblety-gook". I told you to listen to Blogger Buster instead of me.

2. Copy that entire section and then paste it below itself. You will now have 2 identical paragraphs.

3. In the phrase of the original, it will either say { width: 220px; float: right; or it will say { width: 220px; float: left; In the copy you've added, you need to change that highlighted word to the opposite of the original. It is referring to the original right (or left) sidebar that came with your template. You are changing it to reflect the other sidebar that you are adding. So, when you are done, one will say right and one will say left.

4. Also, where it says #sidebar-wrapper, you are going to change it to reflect your new column. So if you are adding a left column, you've changed the words float: right to float: left and will now change #sidebar-wrapper to #left-sidebar-wrapper You have successfully changed the "style" of your page. But there's lots more.

5. Now, look for this: < id =" 'main-wrapper'">

This is where my instructions get complicated. Above that phrase, you are going to paste something. I tried typing out what you need to copy and paste, but no matter how I arranged it, blogger thought *I* was trying to change *my* template! and summarily deleted my left column. Ha! So bear with me and I'll talk you through what you need to paste. Start with this....directly above the phrase I just gave you, paste this: div id='left-sidebar-wrapper' But in front of the first "div", you'll need to put a 'less than' symbol< ....you know the one above your comma... and after the apostrophe, you'll put the 'greater than' symbol >...you know, the one above your keyboard's period. Now, put a space between that closing symbol (greater than) and type in another beginning symbol (less than.) Immediately following the beginning symbol, paste b:section class='sidebar' id='left-sidebar' preferred='yes'/ and then close it with another end symbol. Give it one more spacebar hit before putting /div. Again, put this sandwiched between less than/greater than symbols. Whew! Are you still with me? Why haven't you switched to Blogger Buster yet?

This works unless you've just added a right-sidebar, in which case, you will change all those "left" words to "right". I've done this both ways. It works just fine.

6. You officially have 3 columns, but if you were to hit preview, it would look very wrong. They don't fit! This will change.

To expand the outer-wrapper, search for this bit of code:

/ * Outer-Wrapper ------ */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

That 660 represents the current width. It is possible that yours is a different width. Either way, what you do next is add the width of your new column to this outer-wrapper width. In this example, that is 220px, so we need to change the 660 to 880. Go look at your original sidebar and find the width so you can know how much to add.

7. Save it, but don't expect much. We're almost there though. Honest.

8. Go up to the top of the page and click on "Templates". Then click on "Page Elements". Here you will see that your sidebar exists. It's just empty because you haven't put any widgets in there yet. Add a page element and try it out. Give it a whirl. Then click on View Blog to see how very wrong it still looks. Disappointing, isn't it? And you thought you were finished! I said "almost" there. Still not quite. Patience!

9. Go back into the "edit html" box of gobblety-gook. We've got to put space between the sidebar and the main body. Find: #main-wrapper { width: blah, blah, blah ending with sidebar float */ }

10. Where this says #main-wrapper { width: 410px; float: left; word-wrap: You are going to make it say #main-wrapper { width: 410px; float: left; margin-left: 20px; word-wrap:

You just gave the left margin 20 px of space. Of course, if you added a right margin, just change that word to 'right' instead.

11. If you are wondering how this affects the Outer Wrapper's width that we already had to tweak to fit in another column, then High Fives and Hugs all around because you are a smart cookie. It DOES affect it and you will need to either add 20px to the Outer Wrapper width or subtract 20px from the main column.

12. Tweak. I had to play with mine quite a while, getting down to the nitty-gritty and adding/subtacting by 1-2 px at a time. Something to keep in mind is the difference in screen resolution. Most people have a screen resolution of 1024x768. But there are quite a few that still have a resolution of 800x600. If they try to view your blog, will they have to use a scroll bar to read from left to right? I wish I had technical answers for this one, but I ended up calling friends with small monitors and asking them, "Can you read it now? Okay, how 'bout now?" I tweaked the sidebar width, outer-wrapper, main body wrapper, and padding until it fit evenly and could still be viewed on a smaller resolution. Some of my readers aren't able to see the inch of green background on the outside of my sidebars, but they are now able to see both columns at once.

13. Tweak some more. I have lots that still needs done to make it what I want and I am notoriously bad at not updating things like reading lists or pictures, but it's all low on the priority list and just gives me stuff to do on rainy days.

Here are a few more links to play with:

Technical Details
Dummies Guide
Color Codes
Add-ons
Widgetbox

Pin It