Sunday, December 29, 2013

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:





Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

16 comments:

  1. Hi,
    Thank you so much for this post, its a saver! I used tips from your blog to create a page with posts but can't seem to get rid of the grey box as shown in your post... Could you plz help with it? I used the codes you mentioned, but I still end up with that grey box!

    ReplyDelete
  2. Using the CSS method, it removed the text, not the box :/

    ReplyDelete
    Replies
    1. be sure to use
      .status-msg-wrap,
      .status-msg-body {
      display: none;
      }

      The period before .status-msg-wrap was accidently left off the code given above.

      Delete
    2. Thanks Sharan - you're quite right, there was a mistake in the code. It's fixed now.

      Delete
  3. Hello, This is very interesting but everyone know that the categorys comes in a bunch, not only one, is there a way I could customize it for different category insted of lonly one.

    ok let me explain: If I have a category of "Lion" and I put a descrption about that category in the box, can I make another descption with a a category with "Cat"?

    ReplyDelete
    Replies
    1. What am trying to do is I have 9 category and for each label in that category make a unique description about that category. Can it be made?

      Delete
  4. Very helpful trick. Thanks

    ReplyDelete
  5. Hi,

    Just want to ask that after hiding the message, how to let the post list align to top like home page post list. I saw there is a gap at top post list.

    ReplyDelete
  6. These fixes are great and, using the CSS technique, I was able to remove those offending elements. But can you help me get rid of the space that is left? After altering the CSS, the template (Awesome, Inc) pushed the posts down so they don't line up with the content on the right. Its like the code is reserving a space for this useless element. How can I remove that space? Hope you can help. And thanks for the CSS tip. :-)

    ReplyDelete
  7. Hi. This isn't working for me? I managed to change the text, but none of the CSS customizations I try are working?

    This is the page I am trying to edit

    ReplyDelete
  8. Actually this is pretty cool, but it also affects the "search" pages, if you use a search box and also the 404 error page. It's works out better, if you use conditional tags, for example like this:



    Posts of the Label:


    What you get, when you search for





    Of course, you don't need to do this, when you keep your message simple, but I prefer having a choice to make a difference between search and and label pages, also I want a specific message for the error page.

    ReplyDelete
    Replies
    1. Oops, Blogger doesn't take my code properly. Trying again, this is what it should be:

      <b:if cond='data:blog.pageType == "index"'>
      <b:if cond='data:blog.searchLabel'>
      Posts with the label <b><data:blog.searchLabel/></b>
      </b:if>
      <b:if cond='data:blog.searchQuery'>
      What you get, when you search for <b><data:blog.searchQuery/></b>
      </b:if>
      <b:else/>
      <data:navMessage/>
      </b:if>

      I replaced all the "<" brackets with <hoping now that it will show up.

      Delete
  9. I have 2 options one is label and other is from search box. can show custom message for only labels but when someone search through search box there is mo message only box. Is there any way to get message for search results. Any if condition to set this????

    ReplyDelete
  10. Thank you so much for sharing! Many people just deleted the code but you gave an option to hide it so I can always decide to edit it later. Very useful, thank you

    ReplyDelete
  11. Thank you so much for the CSS code!! It worked on mine and I'm so happy as that label thingy has been bugging me for ages!! Thank you for sharing!!

    ReplyDelete
  12. Thank you so much! As my code looks different, than I couldn't replace it, but CSS worked!

    ReplyDelete