Change Style Of Status Message 'Showing Posts With Label' In Blogger

Labels are the most important part within any blogger blog. You can directly get into any category and refine your searches based on your area of interest and likes. But it often happens when you see a annoying text box that say "Showing Post with Label Show all Posts" and wants to get rid of the same because of it's dull look. You can customize it,s look and make it beautiful with the help of Css. Now this tutorial will show you how to change the status message  'Showing Posts With Label' style in blogger.

Read Also: How to remove the status message 'Showing Posts With Label' from blogger

SCREENSHOT

How to change the status message 'Showing Posts With Label' style in Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</b:skin>

• Now Paste the following code Before/above </b:skin>

.status-msg-wrap {
position:relative;
float:left;
height: auto;
width:550px;
padding:1em;
margin: 0px 0px 10px 10px;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.1) inset;
}
.status-msg-wrap:before,
.status-msg-wrap:after {
content:"";
position:absolute;
z-index:-2;
}
.status-msg-body p {
font-size:16px;
font-weight:bold;
}
.status-msg-border (
border: 0px;
)

• Now find the code shown below using [ctrl+F]

<div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div> 

• Remove the red color lines
• Now save your template
• Change the width size width:550px according to your template

Like it? Share it.