Post-Thumbnail
0
Customize Showing Posts With Label

By default when any of your blog readers click the label, they are shown the message saying "Showing Posts With Label" in a simple box that most of the people dislike. So they want to get rid of that box or modify it.

So in this post, we would be teaching you how to Remove or Customize the box or the message text.

Also Read: Jabeen - A Responsive Blogger Template

Removing "Showing Posts with Label" Message Box

There are two ways to do it. The first one is by using CSS and the second one is by Editing HTML of the blogger template.

Method #1 (By Using CSS)

To remove the status message box, you need to follow the following steps:

Step #1: First of all, go to 'Blogger' and then 'Themes' and Press 'Edit' Button.

Step #2: Now press CTRL+F and search ]]></b:skin>

Step #3: Just before it place the following code
.status-msg-wrap { display: none; }

Method #2 (By Editing HTML)

To remove it by editing HTML follow the following steps:

Step #1: First of all, go to 'Blogger' and then 'Themes' and Press 'Edit' Button

Step #2: Now press CTRL+F and search <b:includable id='status-message'> in the search box

You will find the code given below
<b:includable id='status-message'> <b:if cond='data:navMessage'> <div class='status-msg-wrap'> <div class='status-msg-body'> <data:navMessage/> </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> </b:includable>
Step #3: Replace it with the one provided below, and you are done.
<b:includable id='status-message'> <b:if cond='data:navMessage'> <div> </div> <div style='clear: both;'/> </b:if> </b:includable> 

Changing the Message of the Subject to your own Text

Now if you want to change the message text shown "Showing Blogger Posts with Label" with something else then instead of replacing the code given above just change <data:navMessage/> with your Own message text.

For example:
<div class='status-msg-body'> Your Own Text </div> 

Customizing the Box's Appearance

If you want to customize the appearance of the text and the box, then it can be done with the help of CSS. Before customizing the CSS consider the following aspects in mind:
Status Message Wrap

/* Customize the Text */ .status-msg-body {     }
/*Customize Background*/ .status-msg-bg {     }
/* Cusromize the Border*/ .status-msg-border {    }

Extra

We have already designed an elegant theme for the box. To apply the theme follow the following steps:

Step #1: Search for ]] </b:skin> (Tip: use CTRL+F for search)

Step #2: Place the following code above it.

Here is the preview of the theme of the box

Showing Posts With Label

.status-msg-wrap{padding:10px;background:url(http://3.bp.blogspot.com/-U2SNjBF_hE8/VLFfl4mJmtI/AAAAAAAAOYs/nDK3GKUJFr4/s1600/mbt-bg1.png) #fff;margin:10px 23px -13px;font-family:OSWALD;color:#000}.status-msg-border{border:0!important}.status-msg-wrap a{text-decoration:none;color:#000}.status-msg-wrap a:hover{text-decoration:underline}
Replace #fff with your color code to change the background color of the box ( Use HTML Color Codes to chose the color of your choice)

Final Words

Now search for anything in your blog or click any label and you will see the customized box or no box depending on which option you opted for.
That's all from us. I hope this works for you. If you face any problem during implementation, then please let me know.  Feel free to give your feedback in the comments section below, and if you liked the post, then please share it with your friends. 

You May Also Like

0 comments:

Post a Comment

Zero tolerance to Spam. Comments containing links will be deleted upon review.