Blogger Tips, Dynamic Widgets

Pin It

The following will show you how to make your blogger widgets dynamic.  This code will allow you to hide or show widgets based on certain conditions (Home Page, Not Home Page or Archive pages)

Step 1: Log Into the Blogger Dashboard
Step 2: Select the Design Tab --> Edit HTML
Step 3: Make sure to Check the Expand Widget Content check box
Step 4: Look for the following code
(*) You should always backup your work before making any template changes.  

<b:widget id='HTML1' locked='false' title=' Name of your widget' type='HTML'>

The No. in Red can differ from 1,2,3,4,5.  The title should be the same as the widget title.

An easy way to find the widget is to search for following code and scroll until you find the one you're looking for.  Look for the one that has the title="" what ever is the title for the widget.

<b:widget id='

After finding the appropriate widget, add the following Red Cod below.  Be sure to identify when you want the widget to appear (Home Page, Not On Home Page or on Archives).

1. To show widget only on Homepage

<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

2. To show Widget only in Posts and Not Homepage

<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

3. To show Widget only In Blog Archive and not in post and Homepage

<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Once your done adding the code above, be sure to save your changes.