blogger gadget on home page only

View demo.

Suppose you want a featured post, slideshow or news feed appearing on blogger homepage alone. This can be done simply by adding a conditional tag on the blogger gadget.

What is a Blogger conditional tag?

Conditional tags are Blogger template tags that allow you greater flexibility in your template design. We call them conditional because they allow you to specify parts of your template that appear only under certain conditions.

- Google Blogger Help

In this case, we want to set the gadget to appear only on blogger home page. Thus,

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

<!-- gadget code here -->

</b:if>

What this means.
It means -- if the blog URL is the homepage URL (i.e. http://yourblog.blogspot.com), show this gadget.

How to display a gadget or widget on home page.

Something like this one.

Before we make any changes on the template, do not forget to back it up first!

Let's add the gadget.
1. Go to DESIGN tab. Choose PAGE ELEMENTS.
2. ADD A GADGET.
3. Once added, placed in desired section, and saved, go to EDIT HTML page.

Before we add the conditional tag, we need to determine the widgetID of the newly added gadget.


How to find the widgetID.
1. Take note of the position of the gadget from DESIGN/PAGE ELEMENTS page. In this case, we added an HTML/Javascript gadget and it's located under header (or widgetID = Header1).

2. Now switch to EDIT HTML page. Press Ctrl + F, type Header1 on the search box.
3. Scroll slowly down the page and look for the NEXT CODE after HEADER1 with the word "widgetID" in it. That's HTML1 in this sample.

If you positioned your gadget on the sidebar, look for sidebar-right-1 and take note of the widgetID from the list of gadgets added already.

How to add the conditional tag.
1. On the EDIT HTML Page, tick the EXPAND WIDGETS TEMPLATE box.
2. Press Ctrl + F, type the widgetID on the search box. (Example: HTML1)
3. Place this code right AFTER <b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

And add this code BEFORE </b:includable>

</b:if>

4. SAVE TEMPLATE.

How to test if it works properly.

To test if it works properly, check if the widget is visible on:
Homepage
Post page
Label page
Archive page

To learn more about different page types on blogger, check out this excellent post of MyStady.

NOTE: Google Followers and Archives gadgets work differently.

Related Blog and Discussion.

What are conditional tags?
7 Blogger Page Types: Analysis, Code Snippets, Data Matrix