How To Show A Blogger Widget On A Specific Page

Today there are available different beautiful themes for the Blogger blogs. These themes or templates gives beauty and attraction to the Blog and are user friendly too. Besides different magnificent color combinations, multidimensional widgets and clear user interference they also have ease of access.

The last one the ease of access is one of the most important tools for the increasing traffics to your blog. A viewer will only stay on the blog if he finds what he want to find on the page he is visiting. These premium quality templates provides their clients with availability of different widgets on the pages at which they are needed and removing them form other pages where they have no or little importance.

Today I am going to share this technique of showing or hiding a blogger widget on a specific blog page. This technique can be used for other purposes also that I will post later. The widget that I am using in this post is the Blog Archive Widget, and I am going to make it visible on the main page only.

All the widgets in a Blogger blog have some coding like this. (This one is for the Blog Archive Widget).

Code

<b:widget id='BlogArchive1' locked='false' title=Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<! -- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>

Now look at the code given above. There are two important things to be consider, one is the id of the widget that in the case is BlogArchive1, and second the widget code actually starts from <b:includable and ends at </b:includable.

In order to hide or show a widget the first thing you will need is it id. You can find it by opening the widget from the Layout page of the Blogger dashboard and searching it in the address bar of the widget setting window.

Once you get the required widget id search it in the main HTML code of the blog by going to Template and then to Edit HTML. Once you find the code as shown above with your widget id in it just paste the code given below there. The first line of the code will be placed after the <b:includable and the second line of the code will be placed before the end of the b:includable tag i.e. before</b:includable.

Code

<b:if cond='data:blog.url == "URL OF YOUR DESIRED PAGE"'>

</b:if>

When you are done with the copy pasting replace the URL OF YOUR DESIRED PAGE with the URL of the page at which you want the widget to be shown. After completion your code will look something like this.

Code

<b:widget id='BlogArchive1' locked='false' title=Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:blog.url == "http://www.netzspot.blogspot.com"'>
<! -- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>