Automatic Labels list on a blogger page

Have you ever wondered how to create a Blogger page that will show you an automatic list of labels used on your blog? It’s actually quite easy and I’ll show you how to do it.

 

First we need the Labels box. Go to Layout page of your Blogger dashboard and click Add a Gadget button somewhere to open up a widget list:

layout

 

In this tutorial I’ll be using our Noir Blank Blogger template that has a 3 column layout, but you can use whatever template you have as this solution is compatible with most of the Blogger templates.

Ok, so choose a Labels gadget: (it’s down there! but use a cmd+F or ctrl+F to find it quicker)

labels

 

You can leave the default settings of the Labels widget or choose whatever you want here. I left the default ones.

labels-settings

 

Now, let’s move the new widget below the post. This part is not necessary, but will keep our Layout page tidier and it will be easier to locate the Labels gadget to hide if we have more than one:

layout-cleanup

 

Next part is making sure that it doesn’t show up for all of the pages. We’ll do that by finding out it’s HTML id and hiding it altogether.

Go to Template page of your dashboard and click the Edit HTML button below the template preview:

edithtml

 

There, find the Label widget that is placed below the Blog1. I haven’t had a Labels gadget before so my gadget is Label1 (in your case it might be Label2):

jumptowidget

 

Remember your number!

Now, let’s hide the whole gadget. To do that, we’ll go to Custom CSS part and add this short CSS snippet. Change the number in Label1 to whatever you found out in the previous step:

#Label1{ display: none;}

Here’s the whole process:

customCSS

 

It’s hidden now, so let’s create a new page for the Archive and make it visible there. Creating a page is easy. Go to Pages in the Blogger dashboard and click New Page, give it a name: Archive or any other you like ;-)

newPage

 

Switch the page editor to HTML and add this line of code:

<div id="labelsList"></div>

You can also remove the comments on that page if you like, by clicking the cog wheel icon on the right side and choose Don’t allow, hide existing for comments.

Now, let’s get back to Layout page and add one more widget, but this time an HTML widget in which we’ll add script to copy the Labels to the page content. This is what you should copy and paste to the new HTML widget: (Notice the Label1 which you should change to your label number)

<script src='http://code.jquery.com/jquery-1.10.1.min.js' ></script>
 <script type='text/javascript'>
 /*<![CDATA[*/
  if($('#labelsList').length > 0)
  $('#Label1 .widget-content').appendTo($('#labelsList'));
 /*]]>*/
 </script>
 <!-- Labels page -->

 

You can place the new HTML widget wherever you want, I put it below the Labels to remember what it’s used for. This is my final layout with the new HTML gadget marked:

final-layout

 

The last thing you should do, is to add a link to your new page to the menu. I have the Pages box below the blog title, so I just click the Edit button on it and mark Archive page to be added to the list and then reorder the pages in the menu.

menu

 

That’s it! Enjoy your Archive page! Here’s my final result:

final-page-700x438

 

Let me know in the comments if you have any questions!