blog.si.log. \'blòg-së-lòg\

BLOG-ger. SI-nangag (fried rice). it-LOG (fried egg).
CUSTOMIZE YOUR BLOGGER BLOG.
All the tricks, hacks and treats while enjoying your breakfast.




Blogger 101. How-to's, tutorials, all the basics you need to learn about Blogger (dot) com.
Blogger Tweaks. Style and dare to tweak your blog. Make it custom. Make it different.
Blogger Fixes. Encountered errors, glitches while blogging? Check here for possible solutions.
Blogger Conditional Tags. If, Else then WHAT? Learn the secret behind most of the tweaks on blogger.

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.


show blogger widget on home page only


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.

display a gadget on blogger home page

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).

how to find blogger widget id

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.

how to search for gadget id on blogger


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 search for widget id on blogger sidebar


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>


how to add a conditional tag on blogger

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
share. comment. subscribe. link.


Share.This.Post.
Share.Your.Thoughts.
Subscribe.To.The.Comments.
Subscribe.To.Websilog.
Create.A.Link.


<< 3 Shared Thoughts >>


Dave
April 16, 2012 at 6:11 AM

Thanks for this post. Seems the Google spam team has the low quality of site wide blog roll links in the cross hairs. Limiting the links to a single page is just what I was looking for.

addingsense
July 24, 2012 at 9:38 AM

can be my blogs contributor? if yes then kindly send me a mail akhils783@gmail.com.

Truepal Woods
April 1, 2013 at 1:55 PM

I TRIED IT BUT IT LEAVES A BLANK SPACE IN POST PAGES. PLEASE SUGGEST WAY TO HIDE THE SPACE

Share.Your.Thoughts.

Copy below HTML link to quickly create a link to this post.



back to share



about web.silog
Curabitur sodales leo et quam venenatis eu faucibus quam placerat. Aliquam metus diam, pretium nec commodo at, tristique nec mauris. Vestibulum urna massa, convallis vel laoreet in, ultrices eu nisl. Nulla facilisi. Nam tristique mollis semper. Mauris ac vestibulum lorem. Mauris erat libero, lobortis nec faucibus non, tempor in leo.

Nulla facilisi.
Nulla facilisi.
Nulla facilisi.


about the blogger
My Photo
In hac habitasse platea dictumst. Aenean congue, lacus in sagittis tempus, dui risus pretium nunc, semper bibendum arcu libero sollicitudin diam. Pellentesque lectus lectus, consectetur at sodales sit amet, sollicitudin eu augue.