Blogger: How to Customize Status Bar

The status bar of Blogger or Blogspot is that rectangle shaped figure shown at the top of the ticket when we access the labels or do a search. By default, it has defined styles for the border, background and font, but it's neutral appearance is not always appropriate for the style you want on your blog. If you have a transparent background, for instance, the default status message might be hard to see once you put up a lighter wallpaper (usually an issue for the Awesome Blogger themes).

Customizing the status bar look

To customize this bar, it is necessary to add about 3 or 4 classes in the css section of the template:

• status-msg-wrap (optional): the parent container of the bar is the place to define their location with respect to the inputs. 
• status-msg-body : Class responsible for defining the message style; changes font size and font color. 
• status-msg-border : Class that defines the edge, and changes the colors of that edge. 
• status-msg-bg : Class that defines the background color of the message bar.

I dont think its very necessary to accompany these classes with the top selector "#main" to overwrite the default values, but it is a nice to have it. It at least makes certain for sure that the code will work, but don't be surprised if there are no problems otherwise.

For you to implement these 3 or 4 classes, go to the Template section in your blog's Design page and click on Edit HTML.

Dashboard > Template > Edit HTML

All that HTML code is your Blog template, and it is up to you to make sure you don't do enough to screw up any necessary functionality in your blog, so before you begin this, do yourself a favor:

back up your template!

Copy and paste it into some text editor you got somewhere. That way you don't have to worry about losing everything you worked to add to your blog's template.

Okay, so now you're at the HTML page, which should look like this.

Now I want you to click anywhere in the code page (just to make sure your computer knows you're referring to the code box and not the actual webpage), and do a search (CTL+F). Search for ]]> </ b: skin> and once you do, you are to take the code to change the status bar and place it above (or before) the ]]> </ b: skin>.

Examples

(The CSS code goes before ]]> </ b: skin>)

With all four classes...

       
#main .status-msg-wrap {
width: 90%;
padding: 5px;
}

#main .status-msg-body {
font-size: 80%;
text-align: left;
padding: 5px 5px 5px 30px;
width: auto;
}

#main .status-msg-border {
border: 1px solid # a19a36;
opacity: 1;
}

#main .status-msg-bg {
background: # FFF9B3 center left no-repeat;
opacity: 1;
}     
 

That will turn out to look like this.

• .status-msg-body  font-size : alters the size of the text in the status message
• .status-msg-body  text-align: sets the text to either the (center, left, right) of the status message box
• .status-msg-body  width: deals with the width of the status message box
• .status-msg-border  opacity: between 0 and 1, the closer to 1, the more visible the status message background is.

The way I did it just shows the designated label (I named the label "ECON") name so I have a quick understanding of what section I'm in.

       
/* Label Status Message
———————————————————————————————————————–*/
.status-msg-body {    /* This changes the font and font color  */
font: 100% Century Gothic;
color: #fff;
text-transform: uppercase;
font-weight: bold;
}

.status-msg-bg {    /* This changes the background color of massage bar */
background: #000000;
opacity: 1;
}

.status-msg-border {   /* This changes the color of the border */
border: 1px #e9d8d9;
opacity:0.7;
}        
       
 

That will look like this .

Changing the Status bar message

To add text to your label header, return to Edit HTML, then use Ctrl+F / Command F to find this code:

<data:navMessage/>

There may be about two of these codes, and in fact, it may just look like this, and in that case, just get rid of the first instance of the code.

  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/> <!--THIS CODE, GET RID OF IT-->
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>        

Type the message you wish to appear on your label header, such as:

You are now viewing my rants on:  <data:blog.searchLabel/>

Where <data:blog.searchLabel/> is the code that will reflect the link to your label (so if one of your labels is "Help" or "World News", this code will directly correspond to that).

Now, your status bar should instead say that, or if you want to just show the label name, just use the <data:blog.searchLabel/> code by itself in place of the first <data:navMessage/> and click save. It should look like this.

 <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:blog.searchLabel/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>       

Changing the label colors 

Return to Edit HTML, then use Ctrl+F / Command F to find the same code we have been working with:

<data:blog.searchLabel/>

And to change the message color, font, or style, simply add the needed font tags.

<font color=”red”>You are now viewing my rants on: </ font>

Afterwards, just click Save. Your new label header should now appear whenever you click on any of your post labels.

Conclusion

The Blogger status bar structure is a bit complex, maybe poorly organized, so to customize this part properly, much care should be taken to overwrite all default styles.

Note: Strangely the status bar message repeated twice, only one of them has attributes for no show, apparently blogger team made the various elements of your templates steam.

Note: This post was heavily influenced by someone else's post. I felt there was a need to add a bit more pieces of information, so I adapted it, but you are more than free to check out the original source.