How to add description to Blogger label page like in WordPress category page.

Blogger is one of the first platforms where many bloggers started their first websites or blog. But with time, other great Content Management Systems where developed, WordPress being one of them. And since WordPress, for example, offering more features and customisations, many turns to Leave Blogger for WordPress.

One of the interesting aspects of a WordPress site is the grouping of articles or posts into categories, and for every category page, you can always give it a description.  On the other hand, editing a Blogger label page which is an equivalent to a WordPress category page isn't possible directly. But does this mean one cannot add a description to a Blogger label page like in WordPress? The answer is a big no.

Today, we will be discussing another episode of Blogger Customisation. And this time around, we will walk you through the steps on how to add a description to Blogger label pages like in WordPress category pages. So, if you have been looking for a way to achieve this, then read this post till the very end!

Why border adding a description to Blogger label page?

Giving your blog a stunning look for sure will encourage your visitors to stay longer periods on your pages. And one of the ways of doing this is making a difference. Since by default there is no direct option allowing you to edit the Blogger label page how will others find your blog with a label page description? I am sure many will want to know more about how you did it. And just how beautiful you've designed it will make your visitors share your blog links in the hopes of finding a way to do the same for theirs.

So, adding a Blogger label page description will;

1. Make you Blogger site looks more like a WordPress site
2. Give it a brand new look
3. Attract the attention of your visitors and other bloggers using the Blogger platform.

1. Increase your traffic and consequentially your earnings.

Adding a description to Blogger label page like in WordPress category page.

In order to do this, you will need to have some basic HTML and CSS skills. Also, we will be taking advantage of  Blogger's conditional tags to do this. Also, check here on how to use a conditional statement on Blogger widgets. You could decide to use widgets to display Label page description depending on your template layout.

Getting started

1. You will have to, first of all, inspect your theme and know the different CSS classes for different sections like sidebar, menu, etc.
2. Also, come up with a custom CSS for your label description div section.
3. Write up the HTML part.
4. Locate where the description will have to be displayed. For those using a Blogger template with a header wide section below the main menu, you could decide to use widget provided there is the possibility of adding more widgets.

Where to add your label page description

Depending on your template and your taste as well, you could add the description to individual label pages on different spots.

For example, in our case, we have some just after the main menu where it displays as full width and in some cases inside the main archive page content container just above the archive page contents.

So, the key is basically understanding the layout of your theme.

To add the label page description after the main menu, you will have to add the conditional tag in your theme just after the closing div tag for the menu. The screen capture below shows a sample conditional code added for our sitemap page. We have the <b:if  cond=""/> tag added just after the menu closing div tag.

 But as earlier said if your template layout is in such that there is a header-wide widget section where you can add further widgets, you can add the contents for you custom label page(description) and make the widget lead conditional on the chosen label page.

So, to add label page description you will have to make use of the Blogger conditional tag. And inside this conditional tag, in your style, you will have to inspect your site different sections and choose what to display and what not to.

Sample code for Blogger label page description(styling)

          <b:if cond='data:blog.url == &quot;https://www.bloggercustomiz.com/p/sitemap.html&quot;'>
<style> 
 .sm-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    width:100%;
    padding:50px 0px 10px 70px;
    background: #05a0ff;
    color: #09204C;
   font-family:lucida console;}
   .sm-desc{
       float:left; display:block;font-size:17px;font-weight:bold;padding-right:100px;color:white;
      }
    .sm-label{
       float:left; display:block;
      }
    .sm-desc{width:70%}

@media screen and (max-width: 600px) {
  .sm-details {
    padding: 89px 0px 10px 40px;
  }
}
@media screen and (max-width: 600px) {
  .sm-desc{width:98%}
}
           </style>
<div class='sm-details'>
  <div class='sm-label'>
<h2>Blogger Customiz Sitemap</h2>
  </div>
  <div class='sm-desc'>
<p class='sm-desc'>A collection of all the resources we have here.<br/><br/>Check below for all the articles we have on our website. Browse easily all the articles as they are groupped into categories</p></div>
    </div>
<!-- Generated by https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections -->

<div style='height: 50px; overflow: hidden;'> 
<svg preserveAspectRatio='none' style='height: 100%; width: 100%;' viewBox='0 0 500 150'><path d='M-3.10,127.78 C79.85,146.53 440.46,139.63 501.97,67.59 L500.00,0.00 L0.00,0.00 Z' style='stroke: none; fill: #05a0ff'/></svg>

 </div>
          </b:if>
  <b:if cond='data:blog.searchLabel == &quot;PWA&quot;'>
  <style>
   .main-menu{
      display:none;
             }
     #header{
       background-color:#F2BF7E;
                }
  .pwa-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    width:100%;
    padding:100px 0px 10px 70px;
    background: #F2BF7E;
    color: #09204C;
    font-family: &#39;Nunito Sans&#39;, -apple-system,BlinkMacSystemFont,Roboto,&#39;Segoe UI&#39;,Oxygen-Sans,Ubuntu,Cantarell,&#39;Helvetica Neue&#39;,sans-serif;
}
   .pwa-desc{
       float:left; display:block;font-size:14px;font-weight:bold;font-family: &#39;Nunito Sans&#39;, -apple-system,BlinkMacSystemFont,Roboto,&#39;Segoe UI&#39;,Oxygen-Sans,Ubuntu,Cantarell,&#39;Helvetica Neue&#39;,sans-serif;padding-right:100px;
      }
    .pwa-label{
       float:left; display:block;
      }
    .desc-pwa{width:70%}

@media screen and (max-width: 600px) {
  .pwa-details {
    padding: 89px 0px 10px 40px;
  }
}
@media screen and (max-width: 600px) {
  .desc-pwa{width:98%}
}
           </style>
<div class='pwa-details'>
  <div class='pwa-label'>
<h2>Progressive Web Apps</h2>
  </div>
  <div class='pwa-desc'>
<p class='desc-pwa'>A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser.<br/><br/>Check below for all the articles we have related to PWA. for, example, how to install a PWA for your Blogger blog</p></div>
    </div>
           <!-- Generated by https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections -->

<div style='height: 50px; overflow: hidden;'> 
<svg preserveAspectRatio='none' style='height: 100%; width: 100%;' viewBox='0 0 500 150'><path d='M-3.10,127.78 C79.85,146.53 440.46,139.63 501.97,67.59 L500.00,0.00 L0.00,0.00 Z' style='stroke: none; fill: #F2BF7E'/></svg>

 </div>
      </b:if> 

We are using this code for our PWA label page customisation and it is added just after the main menu navigation tag or before the main container SECTION.