How To Create A separate Label or Tag page In blogger

Sometimes ago, I thought that it would be nice to have a standalone or separate page where you can display the labels, then add the page to your menu. So on one of my blog I did it.

You may have your own reasons for adding labels into a page, maybe because you have too many labels on the side of your page and it's looking ugly. 

To Keep a long story short, I will be teaching you in this post how you can add a labels or tags into pages or lets me say creating a separate page for labels. 

The first thing you have to do is create a label gadget if you haven't already done that.

Step 1. So, you have to create an empty page and name it tags, or whatever you prefer. To the right side of the page, you see the page settings - Set it to Interpret HTML and save the page.

Step 2. Go the Template and select Edit HTML. 

Find the closing </head>  tag and paste the below code directly above the tag and save your template.

<b:if cond='data:blog.url != "http://yourdomian.com/p/tags.html"'>
<style>#Label1 {display: none !important;}</style></b:if>

Make sure to change the domain.com part to the url of the empty page you created earlier.
Also, change the Lable1 to the label number of your label gadget. To know the label number, simply hover over the little edit link that appears on the Label gadget and look at the link that appears to the right below the screen of your computer, there you will find the label number.

The last thing you have to do is move the Lable gadget below the main blog gadget. So that it looks similar to the screenshot below.



You have to place the label gadget directly below your main blog or content gadget. If you don't do this the page will not display the labels.

If It doesn't still work after going through all the steps, follow the below guide which requires you to edit your HTML.


If It Doesn't Work
Step 3. Go to Template and select Edit HTML. Make sure to backup your template if you haven't already done that.

Then using the Jump to widget feature, Jump to the Label number if your label widget.



When you find it, use the little black arrow sign that appears with the code numbers on the right. You will need to click on that sign. The code will then drop down and you will see this code appear.

<b:includable id='main'>...</b:includable

You will have to click on the arrow of the above code again, to see  the code in full.

Step 4. Then you will copy all the code starting from <b:widget id='Lable'  down to </b:widget>. The code you have to copy will look similar if not exactly to the code below.

 <b:widget id='Label1' locked='false' title='Labels' type='Label' visible='true'>
                         <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
        <b:loop values='data:labels' var='label'>
          <li>
            <b:if cond='data:blog.url == data:label.url'>
              <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
            <b:else/>
              <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
            </b:if>
            <b:if cond='data:showFreqNumbers'>
              <span dir='ltr'>(<data:label.count/>)</span>
            </b:if>
          </li>
        </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
                       </b:widget>

You have to copy the code to your notepad and then delete the one in your HTML.

Step 5. After you have done that you'll need to use the Jump to widget button. Then Jump to blog1.

Locate the closing </b:widget>  of blog1 section and paste the Label code you copied earlier to your notepad just below the closing widget that I highlighted in yellow.

If you can't locate the closing widget, then search for the code below

<b:includable id='postQuickEdit

When you find it, scroll down just a little and you find the closing </b:widget> 

Just below the closing widget tag, that is where you'll paste the Label code. I mean the code you copied to your notepad earlier.

Study the screenshot below.



The part with the red strikethrough is where your Label code should be.

After you are done, save your template. Now open the page you created and there you have your Labels.