How to make a blog layout

I have an announcment. I'm retiring. I'm not making layouts anymore, I'm afraid. I just don't have the time. I wish I did, but I just don't.

BUT.

I'm going to teach you guys how! And I sound like an infomercial

Anyways. If you like the new blogger designs, great for you. They're pretty and I'm sure they make things easier for some people. However, I don't like the html. So we're going to be working from a minima template.

Find your blog html by going to your dashboard, clicking design, and then clicking "Edit HTML".

If you already have a blog layout, DON'T change ANYTHING without making a backup copy of your html. You can either save it in a word document or by clicking "Download Full Template" at the top of the HTML tab.


You can work from your original layout, but I'll be going from a minima template. If you want to make your blog a minima template, just choose that option at the bottom of your "Edit html" page. Later in this post I'll explain how to add your widgets to a layout's html so you don't lose them.

The first step is to pick a background picture. I'll be using this picture. Because I want to. Now you're going to start by finding this in your html:


You'll want it to read

body {
background: url (http://i476.photobucket.com/albums/rr128/Laina1312/Backgrounds/background1py0.gif);

Make SURE that you don't delete the semi-colon or it just won't take. Use your own url, obviously. I use photobucket to host my pictures, but you can use any site that gives you a direct url. Just make sure that it won't be deleted or taken down or moved because if it does, you'll lose your background.

By now, your blog will look something like this if you preview it:


ALWAYS preview before you save, in case something looks funny.

So this is good. Now we're going to make it three columns.

Start by finding something that looks like this:

Now, you're going to want to change it to look like this:


(If that's a bit small, just open it in a new tab to see it better.)

Make sure to adjust your outer-wrapper so that the number is larger than your sidebars and main wrapper combined. I usually make it 1000px. It's easier and less of a hassle to make it smaller later.


Now, find this.

See the things that say "widget id"? You can add those to any layout and you won't lose your widgets! Alternatively, you can save individual widgets on your computer and add them back in later.

Now, you're going to want to change that to this:

I'm just using a second profile widget in this case because it's easy. This would now be the time to put in your widget ids so you don't lose your html. But if you're just starting with a minima, you can just use a second profile widget, too, and just put widgets in the normal way later.


Also here, if you're working from the minima html, you can change the title to match your blog's. It's a small thing and doesn't make a whole heck of a difference, but if you want to, you can.

And now PREVIEW and your blog now has three columns! If it looks okay, you can save it now. (I like to save it periodically in case something happens, like an internet crash or loss of power or something. Just like a word document.)

Now, to add background colours and such.

One of the tricks I use is a colour palette generator. I use this site. Save a copy of your background picture to your computer, upload it, and then create a palette. Mine looks like this:


I'll be using #e0d6c0 wheatfield. If you don't like any of these colours, you can go to any website with HTML color codes, such as this one.

Go to this part of your html:

Under the sidebar-wrapper you're going to add in

background-color: #e0d6c0;

Once again, make sure you don't forget or accidentally delete the semi-colon. I normally use the same colour on both sidebars and the main wrapper. You can do the same or use a different one for each, your choice!!

(Alternately, you can use a picture for the background of the sidebars much the same way using a picture for the background of the blog. Just put in "background:url(URLofyourchoice);" minus the quotation marks, obviously.)

Now, if you preview things, your blog will look something like this:

Don't panic. This is okay. Right now this is more to test that the colours look good than anything. Looks good to me, so let's move on!

Find your main wrapper. It'll look something like this:

You can increase the width if you'd like now. I'm going to make mine 500px. Now, I added this

margin-left: 30px;
margin-right: 30px;
padding: 7px;
border: 2px solid #a8816b;

It doesn't matter where you add things as long as they're under the main-wrapper part and before the second }.

"Padding" adds small spaces between your text and the outsides of your posts and makes your blog look less cramped and more professional, and the margins will keep your sidebars away from your main post. For more info on borders, check out this post.

Now add the padding and border part to both your sidebars. You can make the borders and colour or size you like, of course.

Preview.

See how the right sidebar has dropped? This happens because the outer-wrapper is too small. It's easily fixed, though, promise!! Just change the number to something a little larger. Mine is 1014.

Now preview again once you've changed the number. Once your sidebar is high enough, you can save. You're done in the html tab!

Time to move on to that nifty little tab called "Blogger Template Designer". It looks like this:

Go to the "Advanced" part. This is basically the part of blogger that used to be fonts and colours.

I always change the background colour to something near the background image colour so that if someone's is loading slowly, they're not jarred by a pure white or jet black background.

Then, we'll change the text colour to black.
The link colour we'll make... a light brown.
Since we'll be using a photo header, we'll just skip the Blog Title Color and Blog Description.
For the Post Title Color I'm going to use a dark purple colour.
I'm going to change the Border Color to #a8816b since that's the colour of the borders of our main posts and sidebars and I think it'll match nicely.
I'm also going to match the Sidebar Title Color to the Post Title Color.
The Sidebar Text Colour I'll make black for easy readability (is that a word?).
The Visited Link colour I'm going to make dark brown.
Then I don't usually play with the fonts, but you guys can if you want. I personally find Georgia the easiest to read online, but change it if you want to.

Now save all these things by clicking "apply to blog" - the bright orange button in the right corner (I couldn't find it at first).

And know what? We're done!!!!

That's how you

I'll have a post up as soon as possible on how to make a header and apply it, and maybe how to make/apply menu buttons, but that's really it. You just saw me make this. Now go make your own!

Peace and cookies,
Laina