Saturday, April 22

Show Quotes or Anything In Place Of Label Searched Message

Show Quotes or Anything In Place Of Label Searched Message

Blogger stock label searched message ("Showing posts with label Label-name. Show all posts") can be annoying sometimes specially when you have created category pages on blogger using labels. Because of these label searched message blogger category pages look very odd and can ruin user experience. But, don't worry you can replace these messages with your own message easily. Check my category pages for live demo.

How To Customize Label Message?

Step 1: Go to Blogger>Theme>Edit HTML.

Step 2: Search for <b:includable id='status-message'> using Ctrl+F.

Step 3: Replace whole codes from <b:includable id='status-message'>  to </b:includable> with below codes.
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<b:if cond='data:numPosts != 0'>

<b:if cond='data:blog.searchLabel == &quot;LABEL1&quot;'>
<div class='labelmsgtop' style='text-align: center;'>
<b><span style='color: black; font-size: medium;'>&#8220;QUOTES FOR LABEL1</span></b></div>
  </b:if>

<b:if cond='data:blog.searchLabel == &quot;LABEL2&quot;'>
<div class='labelmsgtop' style='text-align: center;'>
<b><span style='color: black; font-size: medium;'>&#8220;QUOTES FOR LABEL2</span></b></div>
  </b:if>

<b:if cond='data:blog.searchLabel == &quot;LABEL3&quot;'>
<div class='labelmsgtop' style='text-align: center;'>
<b><span style='color: black; font-size: medium;'>&#8220;QUOTES FOR LABEL3</span></b></div>
  </b:if>

<b:if cond='data:blog.searchLabel == &quot;LABEL4&quot;'>
<div class='labelmsgtop' style='text-align: center;'>
<b><span style='color: black; font-size: medium;'>&#8220;QUOTES FOR LABEL4</span></b></div>
  </b:if>

  </b:if>
</b:includable>
Step 4:  Change blue background text with label names and green background text with your message or quotes for that label.

Note: These codes are for four labels repeat or delete codes according to your requirement.

Step  5: Save Theme. That's all.

You have now successfully replaced label searched message with your custom messages or quotes. Now, if you further want to style message font size , color or background to your requirement just put below CSS just above ]]>< in your themes HTML and save theme.
.labelmsgtop{
padding:2px;
border: 1px solid #c4c4c4; -moz-border-radius:6px; -webkit-border-radius:6px;
background-color:#f4f4f4
color: black;
}
Customization:

  • Change red background color hex value to change border color.
  • Change yellow background color hex value to change text background color.
  • Change yellow background color hex value to change text color.