Put a header on Blogger’s labels

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:

<b:includable id='status-message'>

3. 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.

<b:if cond='"http://YOURBLOG.blogspot.com/label-address" == data:blog.url'>
<!-- Header's code here -->

</b:if>

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.

Example:

A text header on my “CSS” label:

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

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

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

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.

4. Now search for the following code:

]]></b:skin>

5. Just before it, paste the following styles:

.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.