Wednesday, February 18, 2009

Blog Pimpin' For Dummies

Now, I'm not trying to say that any of my two readers are dumb, far from it. The simple fact is, a lot of us amateur bloggers don't know a whole heck of a lot about CSS and HTML, blah, blah, blah. I'm doing good most days to know ABC. So, I am now going to try to explain how I tricked out my blog in a simple straightforward manner without my head exploding. And hopefully, you'll be able to read it and say 'hey, I can do that!' Ready? Me neither, but here we go.

STEP 1- Changing your blog template
The pre-made templates here on Blogger don't offer much in the way of pizazz. But there's one of these white bread templates that is very easy to tweak and make your own. It's Minima, the very first template option. So, when you log in, from your Dashboard, click on 'Layout', and then click on 'Pick New Template'. Pretty easy so far, right? Now, click on the little circle to the left of 'Minima' and click the orange 'Save Template' button at the upper right of the template menu. Yay, we made it through that.

STEP 2- Adding an additional column-
What I wanted for my blog was a column over on the left. I've got lots of silly stuff in it like a poll, some other crap, my followers list, etc. I like for stuff to be symmetrical, so it's no wonder my brain twitched whenever I looked at my blog. It was all crooked. OK, enough of my therapy. If you want to add a column, you have to do the slightly un-nerving part, fiddling with the HTML. Yes, that's a technical term. Here's what we do-

After you've saved your new 'Minima' template, click on the 'Edit HTML' tab, which is to the left of the 'Pick New Template Tab'. On the Edit page, you'll see a big block of a bunch of jumbled up letters, numbers, brackets and semi-colons. That's what we're going to mess with. Scroll down in this field until you see this-

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

#main-wrapper {
width: 400px;
float: left;
margin-left: 20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

OK, I put in BOLD the things we need to change. Under 'outer wrapper', you might want to adjust the width. Here's where you will need to use a little math. If you make your blog 860 wide for example, you want to make sure that your main wrapper width and your sidebar widths don't equal more than your outer wrapper width. Since my sidebars are 200 each and my main wrapper is 400, they equal up to 800.

Also, you are going to need to add the code for your left sidebar. Copy this code, and paste it between the outer wrapper code and the main wrapper code.-

#left-sidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


One more thing, make sure under 'Main Wrapper' you change the float to 'left'.

Once you've completed these steps, save your template. Now you can go to Page Elements and edit your layout. If you're using a blog template from a place like 'Cutest Blog on the Block', you'll copy the code for the design you like and paste it into a 'HTML/JavaScript' box on your layout page.

That's all their is to it! Once I got past the HTML madness, I was fine. If I can do this, you can too! Good luck, and be sure to let me know if you try it. I look forward to seeing your blogs!

2 comments:

Lurker Girl said...

Have I said that I love you lately? OK--now I just have to apply your SMARTS to my sad little blog!

Thanks K!

BTW: my word verification is
"acsilot"

Sounds a lot like ASK S ALOT to me--and I do ASK S ALOT how to figure out this code crap!!

Lurker Girl said...

ok--my posts go too far over into the left side--any solutions?

See--I ACSILOT!

HAHA!