You may have noticed that all the widgets (or gadgets) you add to your blog, will be displayed on all pages by default. But it is really important to have control over the showcase of various widget in blog page because some widgets are actually meant for some specific pages. Hiding certain element inside your blog pages is not only a matter of design, but sometimes it is very much necessary. For example, 'Share Post' widget should be displayed in every pages except home page and static pages because it doesn't make much sense when 'Share Post' widget are displayed in home page of your blog.
This tutorial will show you how to show/hide a widget in blogger. You can even control blogger official widgets like 'About Me', 'Labels', 'Popular posts' etc,. Now in order to do this, you have to enclose those widgets within a few codes. But before I show you the codes, I have to clarify few things about blogger.
Undoubtedly this is the most important tag in blogger. It is generally expressed as
name1 is a particular piece of data and
name2 is particular item within a set of data.
Mainly we're dealing with four types of pages.
- Home page
- Blogger provides a globally available data to define your blog homepage and it is
- Static page
- You may have noticed that blogger offers you to add several pages to your blog. Those pages are static pages. To select those static pages, the globally available
data:blog.pageType == "static_page"is used.
- Item page
- Item pages are individual blog post pages. To navigate these item pages, blogger provides another globally available data,
data:blog.pageType == "item".
- Current page
- The page you are browsing right now. In blogger,
data:blog.urlindicates url of current page.
- Go to 'Blogger' dashboard.
- Click the drop-down arrow adjacent to 'Go to post list' icon and select 'Template' from the drop-down menu list.
- Click on 'Edit HTML'.
- Search for (Ctrl+F) the title of that specific widget you want to control. You'll find a code similar to the following.
- Choose your desired option from the followings and enclose
WIDGET CODEas specified.
<b:widget id='HTML' locked='false' title='WIDGET-TITLE' type='WIDGET-TYPE'> <b:includable id='main'> WIDGET CODE </b:includable> </b:widget>
<b:if cond='data:blog.url == data:blog.homepageUrl'> WIDGET CODE </b:if>
<b:if cond='data:blog.url != data:blog.homepageUrl'> WIDGET CODE </b:if>
<b:if cond='data:blog.pageType == "static_page"'> WIDGET CODE </b:if>
<b:if cond='data:blog.pageType != "static_page"'> WIDGET CODE </b:if>
<b:if cond='data:blog.pageType == "item"'> WIDGET CODE </b:if>
<b:if cond='data:blog.pageType != "item"'> WIDGET CODE </b:if>
<b:if cond='data:blog.url == "URL of that particular post"'> WIDGET CODE </b:if>
<b:if cond='data:blog.url != "URL of that particular post"'> WIDGET CODE </b:if>
When you're done, it will look like following.
I've tried my best to keep things as simple as possible. Any question related to this will be welcomed. Enjoy !
<b:widget id='HTML' locked='false' title='WIDGET_TITLE' type='WIDGET_TYPE'> <b:includable id='main'> <b:if cond='VARIOUS CONDITIONS (AS DESCRIBED EARLIER)'> WIDGET CODE </b:if> </b:includable> </b:widget>