Here is How to Have Three Columns and a Background Without Doing Scary Stuff to Get Them

Hello dearlings. This is a long post and if you are already rocking the blog of your dreams or you are a tech geek with mad skillz, you might just want to skip it! lol

Okay, I am going to do my best to help those who are Blogger newbs to do a few fun things. Once you get the hang of playing with these features, and get a clue here and there from a helpful fellow blogger, it is super easy, fun and safe. None of the things I am going to help you with in this post require meddling in HTML (something I am waaaayyyy too scared to even think about doing! lol) or having to back up or download or anything. All you will have to know how to do is point and click and copy and paste. In fact, if you don't know how to copy and paste, I tell you how, later in this post. :D

Okay, first of all, Joy asked me in comments about tabs at the top of your blog page. I love this feature. It is handy and fun to have on my blog and super easy to get up and running. I have detailed a how-to in this post. As far as the tabby things around my page tabs, they were part of the template I am presently using. Built in and no effort required. I'll get into that, in a bit. :D

Okay, so this whole thing started for me because I was rocking a two column Minima template and wishing I had set up with a three column and kicking myself because I didn't. I have wanted to convert to three columns almost from the beginning and tried and tried to find a way to do it. Sadly, I think that the only way you can get a three column Minima template is to download a clone, go into the guts and brains of the code of your blog and insert the new code and yadda, yadda. Yeah... Not going to happen, with my tech-challenged ways. lol

If you are really tech savvy, go for it. :D This is for those of us who need a gentler road to travel to the joys of blog customization.

Okay, so... You are rocking a perfectly lovely two column Minima blog but wishing for a three column blog. The basics of making this happen are actually quite simple. Remember, everything you do is reversible and you can back out at any time. Once you set up a new template, I don't know how to get rid of it and go back to your original template, but I can imagine that there is a way to do so. Just take this step by step, take your time, play and experiment and you will soon have the blog of your dreams. Or one that you can at least be really happy with.

Changing Your Template

Step One: Get a cup of coffee. Seriously. Because you are going to be at this for a while. Once you get the workings, you will change this, play with that, tweak this and nudge that and time will fly. Caffeinated? Good! :D Click Design at the top of your page in your Navigation Bar or in your Dashboard.

Step Two: Click on Template Designer. It is at the top of the page, on the left hand side under the tabs. The Template Designer will come up, with new template options at the top and a ghost of your blog at the bottom so that you can see what you are doing as you do it. Which is massively cool, since you see right away if you like it, or not and can then make changes or not, as you see fit.

Step Three: Choose a new template. You will have to do this to get three columns. You can not change to three columns with the basic two column Minima template. The designer will not allow it. So, time to go shopping for a new template. This how-to is restricted to the templates available in this feature. If you want off site templates, lovie, you are on your own. ;) Choosing a template is simple. There are six basic designs and each design has several options for some customization.

Step Four: Choose a template. There is Simple, Picture Window, Awesome, Inc., Watermark, Ethereal and Travel. Scroll through and click on one that interests you and see if you like it. Try on one or all six, switch back and forth and make a choice.

Step Five: Choose the customizations for that template. For example, Watermark has options for pretty birds flying across the page, stripes and so forth. Tabs to go around you new top of blog pages that you did after following my link are built in, you don't have to do anything. Yay! :D  You can choose to Apply to Blog at any time and you can change it at any time. So don't freak if you make a choice and decide you hate it, You can change it. Just go back and follow the steps. :) Play with these, switch back and forth, whatever to get the look you are going for. And remember, if you like a template and option, but hate the fonts and colours, those can be changed, later!

Step Six: Now that you have your new template, it is time to go fetch your three columns!

Switching to Three Columns

Step One: While still in Template Designer or after returning there, click on Layout. Then Body Layout. There are a bunch of different options for two and three column layouts. In the below part, your Design Page will be up so that you can see the column layouts as you choose them. Take a look at the layouts available, then start clicking and see what is going to work well for you, your blog and your needs. I chose the basic three column, with a wider middle and two slightly more narrow sidebars. But there are a lot of options, so just play with it until you get the one that you are going to love. Oh, and don't freak out if your stuff is all rearranged, you can plug everything back into it;s new slots and spaces, later. Also, you might see that your Followers are gone or your slideshows are tiny, don't worry, that will all be back to normal when you get back to your live blog.

Step Two: If you want to change your footer design, click Footer Layout and choose the footer layout that will work for you. I imagine several columns in your footer would be handy if you have or plan to have ads, and so forth.

Step Three: Adjust Width. Click Adjust Width and nudge and tweak your columns and overall width to suit your needs and the images and graphics you like to carry in your sidebars. I had to make my sidebars a little wider to accommodate some wider graphics I carry, so my post section is a little more narrow. And I also wanted to add a custom background, so I had to keep that in mind, too. (More on custom backgrounds, later. dearlings.) I have my sidebars set at 230 and my overall width at maximum. There is a little overrun of the background but it doesn't bother me, right now. It might, later, tho. lol You can test drive other widths, but that is where mine is set, at this time. After your choices are made, don't forget to click Apply to Blog so that they stick. If you don't Apply, when you change the page to go back to your blog, you will lose your changes. You should get a pop-up window to remind you to save, if you forget.

Now that you have a template, option and width all worked out, it is time to have some good old fashioned decorating fun.  

A word about custom backgrounds and headers. Most sites, like Shabby Blogs, Cute and Cool and so forth only make backgrounds that work with the Minima Template. However, The Cutest Blog on the Block also accommodates the new built in Blogger Templates. Their backgrounds work best with the Picture Window Template. That is the one I am using. I tried to get a background up with Watermark and wasn't successful. You might have more luck. But, in my experience, Picture Window is the one to chose, if a cutsie background is your style. :D I am sure that backgrounds for Picture Window are available on other sites, as well. But I am just telling about what I know and did. If you want to go off site or away from TCBotB, you are on your own. :)

UPDATE: Shabby Blogs backgrounds now work with the Picture Window template! :D

Once you have your template and option, you can go to Design and rearrange all of your goodies into the columns and footer right where you want them. This took me a little time, since I am a biotch about balance and symmetry and so forth and I wanted things just-so. :P

If you decide you want a background from Cutest Blog on the Block, installing one is easy as being pushed off a chair. Just go to the site (click the link, above) and shop for your background. Any background you choose should be for three column. You need that extra width. Once you have the background you like, click on that background and copy the code. (Click your cursor at the beginning of the code, then while you scroll down, hold your left mouse button to highlight the code. Once it is all highlighted, press Ctrl c on your keyboard. You have just copied the code to your computer's memory.)

Now go to Design and click Add a Gadget in your footer (the bottom of the page) since Picture Window doesn't give you the option of installing at the top of the page, don't ask me why lol and when the popup window comes up, select HTML/JAVASCRIPT. Paste the code in the big box. (To paste, click your cursor in the box and press Ctrl v on your keyboard. You should see all the code you copied in the box. Yes, now you know how to copy and paste. It comes in handy for all kinds of fun stuff, trust me. :D) If it didn't work, don't freak, just try again. Once the code is safely in the big box click Save and go to your main blog page and you should have your background. Please be aware that it most likely will not look exactly like the preview image on the background site. Mine didn't, but I am happy with what is there.

Now that you have your pretty background (or if you just chose to stick with the options offered in the Designer) it is time to customize and really make your blog look like "you". Click Design and go to Template Design, then to Advanced. You will see options for changing your page font, colours, title font and colours, link fonts and colours. There are options for tab colours, the words in your tabs colours, you get the idea. Blogger will suggest colours and you can click the bigger box of colours and choose your very own. You can bold, italic, change font size, just go on down the line, starting at the top and work your way down. You will get the hang of what is what and what you are doing with it all, very quickly and it is a ton of fun. And all changes will show in the "blog" at the bottom of the page, so you know what is going on as you do it. :D

My background has pretty leaves in the centre that I didn't want covered so I chose Transparent for my post and header background. Just click the bigger colour window at the top of the option to get all the colours and the Transparent options. You will find it. :D That way, my pretty leaves show through. If you want a different colour, choose that colour, then adjust font colours or vise-versa. Just play with it until it is all as you like it. Then click Apply to Blog and go back to your live blog and woo-hoo! Customized, pretty, cutsie or whatever you like blog.

All with pointing and clicking and a tiny bot of copy and paste.

If you want a header, I have a post that gives the how-to here! It pretty much works the same way with Picture Window, but your header will be to the left, rather than in the centre. Titles are to the left with this template and I don't know how to change that, so I live with it and I don't really mind it. If it makes you nuts, there is probably a way to centre it. But you will be on your own for that one. :D

So... Okay. I think I covered everything. If I missed anything, if my explanations were too long winded, not clear or you just need more help, feel free to drop me a comment or shoot me an e-mail. My e-mail addy is in my Contact page at the top of my blog page. I will do the best I can to help. Just remember, I am a tech challenged person. (The PC way of saying that I have no business coming within 1000 yards of a computer or any other tech type device. ;) lolol)

So, what are you waiting for? Get your ass back to your blog and get to prettying it up.

Go on!

Get!

And have fun. :D