Tutorials, tips and tricks about Blogger

09 Jul

Put a header on Blogger’s labels

3 Comments | by in Design, Tips and Tricks, Tutorials | 2009

Español Português

The introduction of the rating trough labels on Blogger was really helpfull to clasify information on our blog, no doub about it. But could be a few details that could make users navigation even more friendly. One of them could be having a header with the most important labels. For example, if you have a section named technology, you can put a legend in the page of the posts with this label, something like “You’re on technology section”.

Let’s see how can we do this:

  1. Go to “Layout”, and then to “Edit HTML”. Check the “Expand widget templates” box.
  2. Search for the following code:
  3. <b:includable id='status-message'>
  4. Under this code, we’ll put every message or image we wanna show as header of every label. For this, we’ll use the following model.
  5. <b:if cond='"http://YOURBLOG.blogspot.com/label-address" == data:blog.url'>
    <!-- Header's code here -->

    Where http://YOURBLOG.blogspot.com/label-address is the label’s address, and Header’s code here is the perfect place to put the header’s code.

    You have to follow this model for every label you wanna put a header.


    A text header on my “CSS” label:

    <b:if cond='"http://blog.btemplates.com/tag/css" == data:blog.url'>
    <!-- Header's code here -->
    <h2>You are on CSS section</h2>

    An image as a header for my “Feed” label:

    <b:if cond='"http://blog.btemplates.com/tag/feed" == data:blog.url'>
    <!-- Header's code here -->
    <img src='http://site.com/image-address'/>

    Where http://site.com/image-address is the addres of the image you want as the header of the “Feed” label.

    You can use any of this two options with all your labels, just writing the code of each one under the code of the last one.

  6. Now search for the following code:
  7. ]]></b:skin>
  8. Just before it, paste the following styles:
  9. .status-msg-wrap {
    width:100% !important;
    margin:0px !important
    .status-msg-bg {
    background:transparent !important
    .status-msg-border {
    border:none !important;

    Save the changes and it’s done.

Lee este artículo en español.


3 Comments, leave a reply · Feed
  1. Uh…heyho ^^
    thanks for the tutorial
    I’m really new in the world of blogs css and html codes xD
    so i’m trying some things out, and to add a header on a blog label is one of things that actually worked ^w^
    awww I’m happy, tahks 😀

  2. Hi, the headers aren’t working for the search labels – nothing shows up. But I do like that the regular status is showing up when I search regular labels.

    example of code


  3. the code didn’t show up …i can email u if u want


You must be logged in to post a comment.

Tutorials, tips and tricks about Blogger