28/10/2009

how-to number three: blog prettification (part 2)

one of the biggest pet peeves i have about not being fluent in html is the fact that i know what i want out of my blog - i know exactly what i want it to look like, and have very strong opinions about what looks good and what looks ridiculous, and not quite knowing exactly what to do with it (or what the proper terminology is to google in order to find the solution).

and so, one of those nagging little features that bothered me was that, whenever i tried to upload a photo with a link to anything in my sidebar, it would never align the way i wanted it to. that is, it'd be all higglety-pigglety.

and if there's one thing i hate most, it's higglety-piggletyness. i like my images to line up nicely, one after the other.

and so, ladies and jellybeans, i bring you part two in my blog prettification series:

de-higglety-piggletying your sidebar (or more commonly known as adjusting the sidebar justification).

as per usual, go under template > edit html, and scroll to any part of the segment. copy the following code and past it into the template.

/* Sidebar Boxes */

.sidebar img {
margin-left:25px;
border:5px solid #e8baba;
}

the portion in blue adjusts the position of the image - you can change it to margin-right too, if you'd like. The attribute text-align:center; is tricky since it's not supported in some browsers, so i stayed away from it given the difficulties i had with browser compatibility when i first started blogging. (it sucks to find out that all of the poor firefox users weren't seeing things the way i was while using IE.. i promptly switched over and try to fix any overly problematic old posts as i need to)

while i didn't do this particular part of the coding for my blog, the text in
red is the styling that you can do as an additional option - for example, you can use this if you want the sidebar pictures to be different from the blog post pictures, with a different coloured border.

you can play around with border thickness and colour, if it's what floats your boat - just be sure to do with with the 'preview' button in the template tab rather than by saving the changes and then having to go back and manually revert them one by one if you don't like it.

special thanks goes out to this site for the step-by-step instructions on how to get my sidebars rockin' again.

my next step is to create a navigation bar in blogger - that'll have to be my next research project, and don't you worry - i'll be sure to simplify and share my discoveries here with you too!


7 comments:

debi said...

Thanks for this info, I have been having a terrible time lining up my pics correctly! So after I drink alot of coffee, print your page, and concentrate really hard, this should really help! (I am internet challenged!)

Claire said...

great post! I'm marking and going to follow you! Good blog and I see a lot of them!

Tiffany said...

I'm keeping these for future prettification! Thanks for sharing the info!

RACHAEL said...

Yes I had to learn a thing or two about HTML to get my blog looking the way I wanted it to

Dionne said...

Good tips! So nice of you to share your secrets!

Sarah Ranes said...

Lots of helpful information, thanks!

SweetSallysSoaps

Samantha said...

This is something I constantly battle with, I always know exactly what I want it to look like, but not always how to get it looking that way.

I'm fortunate to have a web designer husband though, if I can figure it out, I pass the buck.

LinkWithin

Related Posts with Thumbnails