Friday, 25 November 2011

Create Label or Tag Cloud In a New Page In Blogger

How To Create a dynamic Label or Tag Cloud In a New Page In Blogger?

 In  some of our blogs there would be too many labels that it would be difficult to show all of them in main page of the blog.To solve this issue we can add the label cloud in a new page in our blog.This post aims to serve as a tutorial for doing this.

The following screenshot shows the appearance of the  Labels page or tag cloud page for your blog:-

Step1:-
Step one is to create a new page and name it "labels" .For accomplishing that this you need to
==>Go into "Design Mode in blogger", henceforth will be referred to as "Design Mode" in rest of the post
==>Click on the "Posting" tab.
==>Under this "Posting" tab click on the "Edit Pages" tab.
==>Click on the "New page" button
==>Give a title for he page like "Labels"
==>and then click on "Publish Page" button


Step2:-
   Ensure that in the "design view" of blogger ,otherwise click on the "Pages" gadget and rearrange so that "Pages" gadget appears below the header gadget.Ensure that "Save" the design after editing.
Step3:-
Add the labels gadget. To do that you need to:-
==>Click on "Add a Gadget" link and add a new gadget "Labels" which is available under "Basics" menu.
==>Drag the "Labels" Rearrange as required so that it appears just above "Blog Posts" gadget and below "Pages" gadget

Step 4:-
Edit the code so that the label code appears only in the "Labels page and not the main page of the blog"
==>Click on "Edit HTML" link in "Design Mode"
==>Click on check box "Expand Widget Templates"
==>Search and Locate  your label widget.It should look something like this
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
==>Add the following "if condition" nestle it within   your gadget/widget tags so that the xml structure is well formed and then ensure that the ending if tag is added in the right place as shown below.You can then "Save Template"
 If your xml is not well formed then the page will display an error. My advise is to exit the "Design Mode" and repeat Step 4 otherwise it will mess up your blog.
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;URLOFYOURLABLEPAGE&quot;'>
...
...
</b:if>
</b:includable>
</b:widget>
Finally you will have a beautiful tag cloud which you can use to browse your blog. Try out the label tab at the top of this blog to get a feel of it.