Spread the Word

Site Feed



Powered by FeedBlitz

There was an error in this gadget

Subscribe with ...

  • Add this blog to my Technorati Favorites!
  • Subscribe in Bloglines
  • Subscribe in NewsGator Online
  • Subscribe in Rojo
  • Add Random 

Bytes (WebLens Blog) to Newsburst from CNET News.com
  • Add to Google
  • Add to My AOL
  • Subscribe in FeedLounge
  • Add to netvibes

Translate This Post

Burn a Feed

Ping the World

Friday, January 13, 2006

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.

No comments: