It is an all in one post about showing or hiding any sidebar widgets or gadgets to your Blogger homepage, post page, static page, label page or archive page. I have seen many bloggers who want to know that how to hide gadget or widget on Blogger homepage or show a gadget to only post pages on Blogger. I agree, sometime we need to display / show the widgets to the home page of Blogger or sometime we need to display the gadgets to the post pages, static, label(category) or archive pages on Blogger.
Recommended Stylish Blogger Widgets
- Stylish Contact Form for Blogger! Add to Static Page.
- Stylish Popup Subscription Box for Blogger.
- WordPress Like Floating Social Sharing Counter Buttons for Blogger.
The question arises why we need to show or hide the gadgets on specific pages in Blogger?
The another answer is that let you are displaying an Adsense ad on a sidebar widget, then it is not necessary to display that widget on home, label, static and archive pages. Since, users are interested to your content as post pages, and mostly users visit your blog from the search engine that lands to your post pages instead of home, label, archive or static pages. If you are showing Adsense ads on everywhere via sidebar, it will impact your CTR and CPM that is not a good sign for the revenue. So lets start the tutorial. Here is how to hide / show gadgets on home, post, static or label pages on Blogger.
How To Hide/Show Gadgets/Widgets in Blogger?
- Go To Blogger Dashboard.
- Template >> Edit HTML.
- Now, you are in the Blogger HTML source code. Here, the first aim is that you will have to find the gadget code which you want to hide. Since, the source code has all the gadget codes. Let's take a look on general gadget code that starts from,
<b:widget id='HTMLx' locked='true' title='Your Title' type='HTML'>You can clearly search all the gadget by searching using ctrl+f in the source code. You can see an attribute which is unique for each gadget, and has a value , where will be any integer that will be unique for each gadget i.e., HTML13 or HTML5. However, id attribute is not sufficient to identify the gadget which we want to hide or show. Instead of it, we can use attribute that can have a blank name or the name you had given to widget's title. Simply go to your layouts page, and open the gadget you want to hide, and change it's title name with the unique name (It will surely help to find it in source code lets say, XXBBVVCC). Don't worry after hiding the gadget, you change the title name with the older one. Once you created a unique title name for the gadget, go to Blogger source code --> Click on anywhere on the source code --> press ctrl + f, and find the unique title name you have created already. It will look like as the following code.
<b:widget id='HTML19' locked='false' title='Unique Title Name' type='HTML'><b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/></b:includable></b:widget>Now, we will add some extra code into the above code to show or hide them on any pages. I am adding only two lines (look at the red color text) in the above code as shown in the following code,
<b:widget id='HTML19' locked='false' title='Temporary name' type='HTML'><b:includable id='main'>MY FIRST LINE CODE<!-- only display title if it's non-empty --><b:if cond='data:title != ""'><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>Now, replace the MY FIRST LINE CODE with the following table value on any cases you want. We have created a simple table for you to choose your requirement by cases, and read the want/do list, and copy my first line code and replace it with MY FIRST LINE CODE.
|Replace MY FIRST LINE CODE with|
|1||Display gadget on home page in Blogger. ( Hide gadget from static and post pages on blogger. )||<b:if cond='data:blog.url == data:blog.homepageUrl'>|
|2||Display gadget on index pages, such as homepage, labels page and yearly archive page.||<b:if cond='data:blog.pageType == "index"'>|
|3||Display gadget on post pages in Blogger. ( Hide gadget from homepage and static pages in Blogger. )||<b:if cond='data:blog.pageType == "item"'>|
|4||Display gadget on static pages in Blogger. ( Hide gadgets from homepage and post pages in Blogger. )||<b:if cond='data:blog.pageType == "static_page"'>|
|5||Show gadgets on post and static pages in Blogger.( Hide gadgets from index pages, including homepage, in blogger. )||<b:if cond='data:blog.pageType != "index"'>|
|6||Show gadgets on homepage and static pages in Blogger. ( Hide gadgets from post pages in Blogger. )||<b:if cond='data:blog.pageType != "item"'>|
|7||Display gadgets on homepage and posts pages in Blogger. ( Hide gadgets from static pages in Blogger. )||<b:if cond='data:blog.pageType != "static_page"'>|
|8||Display gadgets only on monthly archive pages in Blogger.||<b:if cond='data:blog.pageType == "archive"'>|
|9||Display gadgets only on a specific page in Blogger.||<b:if cond='data:blog.url == "Your_URL_Here"'>|
|10||Display gadgets on anywhere except any one specific page in Blogger.||<b:if cond='data:blog.url != "Your_URL_Here"'>|
|11||Hide gadgets on 404 not found pages in Blogger.||<b:if cond='data:blog.pageType != "error_page"'>|
In 9th case, paste your page URL instead of Your_URL_Here to show your gadget only on that page.
In 10th case, paste your page URL instead of Your_URL_Here to hide your gadget only on that page.
Conclusion:So above guide is about How To Hide/Show Blogger Widgets/Gadgets on Posts/Home/Static/Archives Pages. I hope it helps you. If you have any doubt at the end of this article, you can feel free to ask your doubt via comment. Do Share On Blogging Communities.
Thank You! Stay Blessed!