Sunday, June 24, 2007

Blogger: remove "Showing posts with label" section

I created some custom links that I placed as part of the header section for easy navigation between label categrories. When someone clicks one of these links, blogger sorts the content to only show content for that particular label. I've worked a lot on the overall design of the site and want a more seamless (non-blogger-esque) experience for readers.

It might seem picky but each time a list of labeled posts is shown, an annoying message is displayed to users such as "Showing posts with label XXXX". This also has a link to View all Posts. This message looks totally out of place on my newly designed template. The other annoying thing about this message is that it lets my readers know that they are still on a blogger site instead of a custom designed site.

So I did a lot of searching and I am dissappointed to report that I couldn't find an answer anywhere. So I went to "plan B". I looked at the source behind the HTML of the blogger page when that message was shown and I noticed that the section was called "status-msg-border". After a lot of playing around with the template, I figured it out. To remove the section completely, follow these steps:
  • Login to Blogger
  • Click on Template -> Edit HTML
  • IMPORTANT! Back up your template before making any changes just in case you screw this up.
  • Check the box to Expand Widget Templates
  • Then use your browser's Find command (Control-F in Firefox and IE) and search for the words "status-msg-border"
  • To be safe (just in case you want to ever show this section in the future, I just commented it out. You can either remove or comment it out. Here is the entire code to remove:


<b:includable id="'status-message'">
<!-- remove the label show all posts stuff here -->
<!--
<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:">
</b:if>
-->

</b:includable>



Save your template and click a label. No message should appear now.

* NOTE: This code has been tested for Beta Blogger / New Blogger only. No guarantees on classic blogger.

2 comments:

Stacey said...

Hi
Thank for the tip. I have tried doing this but after I save the template, the deleted code mysteriously reappears!
Any ideas?
Thanks

Aurelio Locsin said...

I have the same problem about the code appearing as well after I delete it. Any suggestions? Thanks in advance.