Blogspot is a platform that allows you to create and publish your blog for free. This amazing tool by Google is perfect for people who want to start off with blogging without any investment. To present a decent website the layout should be elegant.
This tutorial is for beginners, but it's easiest if you have a little bit of experience with editing your Blogger template.
There are some situations where you want to show or hide certain widgets on particular pages such as home page, post pages, static pages, archive pages and even on particular posts.
All set? Let's get started!
Show or Hide Widget in blogger
First of all backup your template!
It is very important to make habit of backing up the template every time you begin to edit it. As codes sometimes become so messy that you want to revert the whole thing back but if you have no backup then that can possibly be the end of that template unless you are willing to put your valuable time to it.
Okay, once you have backed up the template, Now you are good to go.
1. Open your template by clicking the "Edit HTML" if you don’t know where it is? You can follow this path:
Your account >> Theme >> option(three dots) >> Edit HTML
Show Gadget on the Homepage Only
If you want to restrict a gadget to your homepage only, use this conditional.
Insert the following line below <b:includable id='main'>:
Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
Show Gadget on the Homepage and "Index" Pages
The "Index" pages of your blog are the pages readers see when they click the "Older Posts" and "Newer Posts" links at the bottom of the page.
Insert the following line below <b:includable id='main'>:
Show Gadget on Post Pages Only
This will show the gadget only when your reader is on an individual post page (aka the permalink page). The gadget will be hidden from the home page, index pages, and static pages.
Insert the following line below <b:includable id='main'>:
Show Gadget on Static Pages Only
Static pages are the pages you make in the "Pages" section of Blogger — by default they show up in your top navigation, unless you've specified otherwise.
Insert the following line below <b:includable id='main'>:
Show Gadget on One Specific Page Only
This one's a bit of an oddball, but it could be handy! You can use a conditional to make a sidebar gadget appear one one specific page of your blog only, and nowhere else.
Note: I only recommend this conditional for blogs with custom domains. Blogs with .blogspot.com domains may have issues with this conditional on localized versions of the domain.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.url == "PAGE URL HERE"'>
Replace "Page URL here" with the address of the page that should show the gadget. So for example, if I only wanted to show the gadget on my resources page, I'd write it like this:
Reversing Conditionals
So, what if you want to set the opposite version of a conditional? Say, for example, you want a gadget to show up everywhere except the home page?
In that case, you'd replace the == in the conditional with != like this:
If you want to restrict a gadget to your homepage only, use this conditional.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Then, close the conditional by inserting this line above </b:includable>:
</b:if>
Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
Show Gadget on the Homepage and "Index" Pages
The "Index" pages of your blog are the pages readers see when they click the "Older Posts" and "Newer Posts" links at the bottom of the page.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.pageType == "index"'>Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
Then, close the conditional by inserting this line above </b:includable>:
</b:if>
Show Gadget on Post Pages Only
This will show the gadget only when your reader is on an individual post page (aka the permalink page). The gadget will be hidden from the home page, index pages, and static pages.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.pageType == "item"'>Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
Then, close the conditional by inserting this line above </b:includable>:
</b:if>
Show Gadget on Static Pages Only
Static pages are the pages you make in the "Pages" section of Blogger — by default they show up in your top navigation, unless you've specified otherwise.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.pageType == "static_page"'>Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
Then, close the conditional by inserting this line above </b:includable>:
</b:if>
Show Gadget on One Specific Page Only
This one's a bit of an oddball, but it could be handy! You can use a conditional to make a sidebar gadget appear one one specific page of your blog only, and nowhere else.
Note: I only recommend this conditional for blogs with custom domains. Blogs with .blogspot.com domains may have issues with this conditional on localized versions of the domain.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.url == "PAGE URL HERE"'>
Replace "Page URL here" with the address of the page that should show the gadget. So for example, if I only wanted to show the gadget on my resources page, I'd write it like this:
<b:if cond='data:blog.url == "www.easyfreetools.com/p/about.html"'>Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
Then, close the conditional by inserting this line below above </b:includable>:
</b:if>
Reversing Conditionals
So, what if you want to set the opposite version of a conditional? Say, for example, you want a gadget to show up everywhere except the home page?
In that case, you'd replace the == in the conditional with != like this:
<b:if cond='data:blog.url != data:blog.homepageUrl'>In this conditional, != stands for "is not", so you can think of the conditional as saying "if the URL is not the homepage URL, show the gadget".
(Gadget code here)
</b:if>