20 January 2012

Hide Blogger’s default message box

I’ve written a series of articles on how to add a label page to the native ‘Pages’ widget in , essentially transforming it in a sub-blog, which can even have it’s own RSS feed. There’s just one small detail missing from this setup: a way to hide the message box that Blogger displays by default on label and search pages – which doesn’t look very good – a tweak that even my readers requested. There are two methods to achieve this, depending on your necessities:

First method – easy, but non-customizable

The easier and safer way is to simply add a small CSS code snippet to the blog template. On the plus side there is no need to manually edit the HTML template and this wont break future features released from Blogger. But the disadvantage is that it will remove all messages indiscriminately, both from label pages and search results, which could confuse some users. If you choose this method, follow these steps:

  • From the Blogger Dashboard go to ‘Template Designer’ (under ‘Design’ in the old Blogger design or under ‘Layout’ in the new design);
  • Navigate to ‘Advanced’ ► ‘Add CSS’ and paste the following code in the text box:
    .status-msg-wrap { display: none; }
  • Click ‘Apply to Blog’ to save and return to the dashboard.

If you later want to remove this customization, follow the same steps and delete the line of CSS code mentioned above.

Second method – fine-tuned, but with more editing

With this method you can choose a single label or a couple of them and remove the status messages only for these ones. Unfortunately, this requires manual editing of the blog template, something that could cause conflicts in the future with new features or updates. In this case:

  • Start by backing up your template (from ‘Design’ ► ‘Edit HTML’ ► ‘Download Full Template’ in the old design or ‘Template’ ► ‘Backup / Restore’ ► ‘Download full template’ in the new one);
  • Afterwards open up the template for editing. The path is ‘Design’ ► ‘Edit HTML’ ► ‘Expand Widget Templates’ in the old design or ‘Template’ ► ‘Edit HTML’ ► ‘Proceed’ ► ‘Expand Widget Templates’ in the new one);
  • Search here for the following line (there should be a single occurrence in the template):
    <b:includable id='status-message'>
  • Replace the block of code between this line and the next occurrence of </b:includable> with the code below. The changes compared to the original template code are highlighted in bold. You should only modify the label – in my case Book – to match to label from your blog where you want the change to be effective.
    <b:includable id='status-message'>
    <b:if cond='data:navMessage'>
    <b:if cond='data:blog.searchLabel != &quot;Book&quot;'>
    <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:if>
    </b:includable>
  • Finally save the template and the change should immediately reflect on the blog.

14 comments:

  1. I've got a related question: I have a page on my site called "Recommended" linking to posts with that label. I'd like to include a link to my Amazon store at the top of that page because I have all the recommended albums linked there as well. Any way to do that?

    ReplyDelete
    Replies
    1. Hi Mike,

      I don't see any reason why that could't be done.
      You should make the following changes to code from my article:
      - change the label to Recommended;
      - change the condition to == instead of != to check if you are on the page for this label (the code above checks if it's not on the page with this label);
      - after < data:navMessage /> add your own text and link to Amazon, for example:

      Check out my recommended albums on Amazon < a href="URL to Amazon page" >here< /a >.

      Delete
    2. George, thanks! One other question though-- how do I make the label disappear now? Or at least get a couple of breaks in there, because it just rolls from the label right into my message. Thanks again!

      Delete
    3. You can either remove < data:navMessage /> altogether - that will get rid of the standard text 'Showing posts...' - or you could wrap your custom text in paragraph tags: < p>text< /p>.

      Delete
    4. Dude, excellent. Thanks so much!

      Delete
  2. Hi, how do I display only the label name instead of the standard status message?

    ReplyDelete
    Replies
    1. You should replace < data:navMessage/ > in the code above with < data:blog.searchLabel/ > or any other combination that suits you, for example including some static, explanatory text.

      Delete
    2. Awesome! Thanks so much... you saved the day!

      Delete
  3. Hello. How can I hide the status message for two labels? I couldn't figure it out.
    Thanks.

    ReplyDelete
    Replies
    1. As far as I can tell, Blogger doesn't have on OR operator in the templates, so the only solution would be to nest another if condition, something like this:

      < b:if cond='data:blog.searchLabel != "Label1"'>
      < b:if cond='data:blog.searchLabel != "Label2quot;'>
      < div class='status-msg-wrap' >
      < div class='status-msg-body' >
      < data:navMessage/ >
      < /div > [...]
      < /b:if > < /b:if >

      Delete
  4. Hi, I got it to work on the web version, how do I delete it from the mobile version? Thanks in advance!

    ReplyDelete
    Replies
    1. Hi,
      I haven't even checked the mobile version for this message, I just assumed this would remove it there as well... I'll check to see if there is a way to remove it from the mobile template.

      Delete
  5. I want "Search Result for Query" to be shown but not that "sort by Date". Can you Help.

    ReplyDelete
    Replies
    1. As far as I can tell that's not possible, both "Search Result for Query" and "sort by date" are within the code block data:navMessage and I don't think that can be easily changed in the template editor.

      Delete