Create a Separate Label or Archive Page in Blogger
I got many emails asking me how did I make a separate page for the labels and archive for my Blogger blog. Well, first get a live example of my explore tutorials page and then see the tutorial for it.
The whole process is a complicated one as this includes the proper use of conditional tags to hide a gadget from appearing in other blog pages rather than a particular page. So here we have to create a page and hide the label or archive widget from appearing it in every other pages rather than the separate page that is specially created to show these widgets.
At first you have to publish a page. You can just publish a simple post and hide the post or can create a static page. Now add the label widget or the archive widget or both the gadgets from Blogger’s Layout tab and drag them just below the “Blog Posts” gadget (as shown in the picture below) and Save” it
Step 2: Go to Template tab and make a backup of your template.
Step 3: Click “Edit HTML” and check “Expand Widget Templates”.
Step 4: Now comes the part where you have to hide the label gadget from other pages. In previous tutorial I have told how to hide Blogger Gadgets from showing it in specific pages. So applying that rule, find for:
<b:widget id='Label1' locked='false' title='Labels' type='Label'><b:includable id='main'>…</b:includable>
The “…” is the part where the label gadget snippet lies. We don’t need that part of snippets, instead we need the highlighted HTML part.
Step 5: After <b:includable id='main'> add:
<b:if cond='data:blog.url == "URL of the page"'>And before </b:includable> add:</b:if>
You only need to change the URL to the post with yours that you have previously created. This is a conditional tag that will tell the browsers that your gadget should be shown when a visitor of you blog visits that URL only.
The code will look like:
<b:widget id='Label1' locked='false' title='Labels' type='Label'><b:includable id='main'><b:if cond='data:blog.url == "URL of the post"'> … </b:if></b:includable>
If you have added the archive gadget and also want to hide it, then it’s little bit of tricky. Find for:
<b:includable id='main'><b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='ArchiveList'> … …</b:includable>
Now same as the label gadget, add the conditional tags. The snippet will be:
<b:includable id='main'><b:if cond='data:blog.url == "URL of the page"'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='ArchiveList'> … … </b:if></b:includable>
Step 6: To test it, click Preview which will confirm that you have done everything properly. In the preview tab, you will find that the label/archive gadget is not visible. When you are confirmed, save your template.
Now all is left is to redirect your visitors to that page by giving them the link of that page you created in first step by putting it in your navigational links.
Additional CSS (Optional)
This is an optional part where you can hide the blog post that is/will be appearing on top of the label and/or archive gadget. This is for those who find it to be annoying or to make it look perfect. So find for </head> and before it add:
<b:if cond='data:blog.url == "URL of the page"'>
<style type='text/css'>
#Blog1{
display:none;
margin:0 !important;
padding:0 !important;
height:0;
}
</style>
</b:if>This confirms that no post gets visible in that particular URL and don’t forget to replace the URL with the separate label page that you have created.
