Blogger Template Hacks: Use Your Header to Promote Your Feed

As you can see if you have stopped by before, I have been busy over the weekend, experimenting with further changes to the Blogger template. The default two columns have now morphed into a three-column layout. I'll be writing about that later.

First, though, a quick note about customizing Blogger's header. The template I chose (Minima) had an attractive but barebones text header, in keeping with the minimalist overall look and feel implied by this template's name.

I wanted to put a logo graphic in the header and make use of the prime top-of-screen real estate to promote my feed. The latter proved easy to do. Including a graphic is a little trickier, and requires using a CSS workaround with some accessibility implications. We'll save that for the next post on this theme.

First, the easy part. To put text and/or a link in the header:

• Open the Settings > Basic tab
• Click in the Description field and add the new text, including any HTML. Include a link to your feed, if desired.
• Here's the trick: if you wish to format the new text differently, as I have, surround it with a tag that you can hook some CSS on, such as STRONG or EM.
• Save your changes and switch to the Template tab.
• Locate the #Description style and make room below it.
• Clone the style and add a contextual selector (i.e. STRONG) that defines the formatting you wish to apply to the added material. Here's what I used:

#description strong {

display:block;
font-weight:bolder;
text-align:center;
padding-top:15px;
color:#ed7321;

}

Hope you found this tip helpful. I'm hoping to post later today on the second part of this process: embedding a graphic in your blog header. If you're enjoying these posts and want to make sure you don't inadvertently miss anything, subscribe to my feed and get new material automatically.