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 Blogger, 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.