Oct 28, 2015

How To Hide/Show Blogger Widgets on Specific Page

data:blog.title
Wanna Show/Hide Your Gadgets or Widgets in Blogger On Homepage, Static Pages, Post Pages, Archive Pages, Label Pages? Read Below Guide and learn How To Hide/Show Blogger Gadgets/Widgets on Posts/Home/Static/Archives Pages.

Hide Or Show/Hide Specific Widgets On Specific Pages in Blogger

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

  1.  Stylish Contact Form for Blogger! Add to Static Page.
  2. Stylish Popup Subscription Box for Blogger.
  3. WordPress Like Floating Social Sharing Counter Buttons for Blogger.

As some of you may have noticed, all the widgets/gadgets you add to your blog, will be displayed on all the pages by default, including the homepage as well. And I'm sure very few know that AdSense could disable your account in case you've put ad units inside the content of your contact or privacy policy pages. Therefore, hiding certain elements inside your blog pages is not only a matter of design, but it is also a requirement.

The question arises why we need to show or hide the gadgets on specific pages in Blogger?

The simple answer is that suppose, you create a featured content gadget (as sliders) that shows the most popular/recent posts of your blog, then it is not necessary to show this gadget to everywhere in your blog. Since, featured content gadget uses the JavaScript and Jquery codes, and having the high quality images so if you show the featured content gadget to everywhere, then the JavaScript, Jquery and HQ images will be load every time to open any page of your blog which will impact the loading time and bandwidth in the negative way. That is the reason why professional blogs having the featured content gadget to the home page only.


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 <b:widget using ctrl+f in the source code. You can see an attribute id which is unique for each gadget, and has a value HTMLx, where x 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 title 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 != &quot;&quot;'><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 != &quot;&quot;'><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. 

Cases
Want To
Do
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 == &quot;index&quot;'>
3 Display gadget on post pages in Blogger. ( Hide gadget from homepage and static pages in Blogger. ) <b:if cond='data:blog.pageType == &quot;item&quot;'>
4 Display gadget on static pages in Blogger. ( Hide gadgets from homepage and post pages in Blogger. ) <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
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 != &quot;index&quot;'>
6 Show gadgets on homepage and static pages in Blogger. ( Hide gadgets from post pages in Blogger. ) <b:if cond='data:blog.pageType != &quot;item&quot;'>
7 Display gadgets on homepage and posts pages in Blogger. ( Hide gadgets from static pages in Blogger. ) <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
8 Display gadgets only on monthly archive pages in Blogger. <b:if cond='data:blog.pageType == &quot;archive&quot;'>
9 Display gadgets only on a specific page in Blogger. <b:if cond='data:blog.url == &quot;Your_URL_Here&quot;'>
10 Display gadgets on anywhere except any one specific page in Blogger. <b:if cond='data:blog.url != &quot;Your_URL_Here&quot;'>
11Hide gadgets on 404 not found pages in Blogger.<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

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!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.