Format The Date Header In Blogger

Sometimes you may not want the date to be on the left above the post title. I didn’t, so I looked at ways to change this. This guide may not be the most in depth in terms of editing the date but it does give the basis for doing more if you know some CSS. By adding your own background to this section you can further customize the look allowing for some interesting effects, enhancing the look of your posts dramatically. On a side note, remember that submitting more than one post in the same day causes the date to only appear once at the top of the most recent post. Bare this in mind when editing the look of the posts as it may result in unwanted effects.


First you need to be in Design View and click on Edit HTML. As always, download the full template to keep a backup before you make any changes.

1. In Edit HTML find the following:

.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
}

This is where you will add any code you wish for editing the date header. I suggest using the preview option on this one to see the effects of anything you may change.

2. This is the code that I have used up to this point:

.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
text-transform: uppercase;
text-align: right;
}

Using float: right; to right align the date has the effect of lowering the date resulting in the post title wrapping around the date. I use text-align: right; as this just moves the text to the right without changing the vertical positioning. I also added a text-transform: uppercase; making all letters in the date appear as capitals. Play around with the CSS here to see what you can do.

I went even further to add a folder type look to the date and posts with the following code:

.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
text-transform: uppercase;
text-align: right;
padding-right: 3px;
background: url('/date_bground.png') top right no-repeat;
}

By doing a Print Screen I was able to make an image for the background of the date header in GIMP on a new layer. To keep the transparency I recommend saving the image in .png format. Then I used this image as a background for that section. I added some padding to the right to space the text away from the border I had drawn in the image. The image is placed in the top right and is only displayed once (no-repeat). [Replace /date_bground.png with your image link]

This is actually a very powerful way of editing the look of your posts as you aren’t limited to only changing and using the backgrounds that the Blogger Template Designer shows.