Delete, change or re-format the "Showing posts with label" message.

This article explains options for deleting, or changing the content or formatting of Blogger's "Showing posts with  LABEL.  Show all posts" message and it's ugly grey box.

If your blog has a Layout or Designer template, then when a person who is reading it chooses a label value, Blogger displays a page with (a summary of) your most recent posts with that label.

If there are more posts that Blogger is willing to show on one page, then there will also be "older posts" and "newer posts" links at the bottom of the page.

And - unless you have removed it - there will also be a message at the top of the page saying "Showing posts with label yourLabel. Show all posts"





Reader actions that cause a visitor to see this message include:
  • Clicking a label value that is displayed in your post header or footer
    (unless you have turned them off in the Layout > Blog Posts edit option).
  • Clicking a link that you have manually set up to show posts with a specific label (eg if you have used a Pages gadget to make a menu bar, and one of the options in it has a value like http://www.yourBlog.com/search/label/yourLabel?max-results=999

Unfortunately Blogger does not provide any way to customize or configure this message.
.
But it is easy enough to totally delete it, or to change the formatting, or to change the text..


How to delete the "Showing posts with LABEL" message

There are two ways that you can remove the "Showing posts with Label.   Show all posts" message.

Option 1:   Remove the code totally.   

To do this,

1  Edit your template in the usual way

2  Find the following text
<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>

3   Delete that text and replace it with
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

(If you just delete the text and do not put the replacement in, then it is possible that Blogger will add that section back in again later.)


Option 2:  Hiding the message using CSS

To do this, add  this CSS rule to your template in the usual way:
.status-msg-wrap,
.status-msg-body {
display: none;
}
(This approach is less risky because you do not need to edit your template, and because it's easier to change later.   But some people have reported that on their template, it has not worked.)


How to change the format of the "Showing posts with LABEL" message

Some people don't mind the actual  "Showing posts with Label.   Show all posts" message.   But they want to format it in a way that suits their blog's layout and colour scheme.

This is easily done, by adding some extra CSS rules to your template in the usual way.

To change the format of the message text, use rules like this:
.status-msg-body {
text-align: left;
line-height: 1.4;   
font-weight: bold;
color: red;
padding: 0.5em 0.3em;
width: 100%;
}

To change the grey-shaded background or the box:
.status-msg-wrap {
width: 100%;
margin: 0 auto;   /*  keep the auto statement if the width is less than 100%, so the box is centered */
position: relative;
}

There are a wide range of options - check with CSS reference guides for the options.   You may need to carry out some experiments with your template and how it looks with various options to decide on the best combination for your blog.



How to change the "Showing posts with LABEL" message

There are several ways that you can change the text in the "Showing posts with Label.   Show all posts" message.

Option 1:   Just replace it with some text

To show a sentence of your own instead of Blogger's standard message, 

1  Edit your template in the usual way

2  Find the following text
<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>

3   Replace the line in bold (ie <data:navMessage/> ) with your own words.

For example, you might say
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
Posts in this category include (use the Older Posts link to see previous posts):
</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>

To show the searched-for label value in your message, you need to use the   <data:blog.searchLabel/>   tag. For example, you might say
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
Posts about <data:blog.searchLabel/>  include (use the Older Posts link to see previous posts):
</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>

Note:  if you are going to use this tag, then you need to choose your label values very carefully, so that they all make sense.   For example, in one blog I have some posts labelled "For quiz organizers" and others labelled "Finance", "Organisation" etc.    There is no way that I can write a sentence including the labels that makes sense for both of these.




Related Articles:





How to show AdSense ads that are non-standard sizes

This QuickTip is about AdSense's new custom-size-advertisement option, which lets you choose the height and width of each advertisement that you show on your site.


quick-tips logo
Today, AdSense announced that we can now make ad-units in any size that we want - within certain restrictions.  

They don't use the phase in the text of their announcement, but the post-URL for their says that this feature is  "the-next-evolution-of-responsive-ads" - so I guess it can be seen as part of the efforts to cater to mobile-readers and mobile site-publishers, even though these ads themselves don't adapt to according to the size of your visitor's screen.


What will custom-size text ads look like:

For text ads, AdSesne, will work out the best number of text ads to show in each ad-block, and the individual ads will be shown the same way they that the look inside the standard ad-sizes.

Note that they say
"For unique ad unit sizes, our system will need some time before it can optimize the number of ads shown."

My guess is that this means that initially they will just fit a standard text-unit ad within your custom size, but may manage to figure how how to fit in more content over time, as they observe what display options make most money for you (and thus for them).


What will custom-size display ads look like:

For display ads (ie ones that show pictures which the advertiser has created), AdSense will work out the best size ad to show in the custom space that you select; the only guarantee is that "the selected ad will not be larger than the space requested".

There are some accompanying  rules about maximum and minimum AdSense ad-unit sizes, and any custom ad size that doesn't satisfy these restrictions simply won't appear on a page.  These rules may change (so do go and check the official version) - but to start with they say that:
  • Only one dimension can be greater than 300 pixels
  • The minimum width is 120 pixels
  • The minimum height is 50 pixels
  • Neither height nor width can exceed 1200 pixels.

One more point:   a while after the 300x600 ad-unit was introduced, they also added a rule saying there could be no more than one of these units per page.   With custom ads, they simply say:
As always, please use your best judgement when using custom-sized ad units; ad units similar in size to the 300x600 ad format will be subject to similar placement restrictions.


How to create a custom-sized AdSense advert for Blogger

  1. Log into www.adsense.google.com using your AdSense account.
  2. Start to create an ad unit in the usual way,
  3. Select "Custom ad size" from the Ad size drop-down and enter the width and height that you want for for your ad unit.
  4. Copy and paste the ad code into the HTML source code provided by AdSense, and add it to your blog in the usual way.


Note: you will only be able to do this if you have gone through the full AdSense sign-up process. If you do not have a custom-domain and signed up for AdSense after the fast-track process for hosted-content was introduced, then your only option is to choose standard ad-sizes from the regular Add-a-gadget > Adsense process.