Blogger Adjustments Using CSS

Another post working on Blogger software. I host my own images and have my own domain but my blog is on Blogger so any time I update the look and feel of the site, I have to work with their software. The placement of my post date could use some improvement. Here's how it looks now. I highlighted the gap between the date and my site logo in purple. Either the logo or the date needs to move. I will pull up the date for the first post, which means I will initialize the top margin for h2 to zero. One caveat: I wouldn't want the new change to effect every post since I need that top margin for separating successive posts. CSS first-child property will allow us to write a style that will be exclusively for the first post only.

div.blog-posts h2:first-child { margin-top: 0px; }

Zeroing the top margin of the post aligns us better but now I feel we are looking too crowded. See what you think. I think we need some breathing room.

Let's try lining up the blue block lettered CSS in my logo, with my main (the second column) and the right sidebar (the third column). Here's what we are going for. This will require rewriting our first style because we want to push it down and also push down the right sidebar:

div.blog-posts h2:first-child { margin-top: 50px; }
#sidebar-wrapper { padding-top: 63px; }

I embedded these two statements into my local file but best way to do this is to keep an external style sheet and link that file into your Blogger style/markup template which is accessible via DESIGN/EDIT HTML.