t 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.
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.
Related Topics:
-- > Click on 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,
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
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 blue color text) in the above code as shown in the following code,
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.
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.
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.
 |
| Hide/Show Gadgets or Widgets in Blogger Photo Credits: Pixabay.com |
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.
Related Topics:
- Optimize your Blogger Image for SEO
- Embed Facebook Status Updates to Blogger
- Choose your own permalink for Static Page on Blogger
Show / Hide Gadgets to Home / Posts / Static / Label Pages on Blogger Blogs
Firstly, go to your Blogger Dashboard --> Click on Template under more options::-- > Click on 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 != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<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 blue 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>
<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.
| Cases | Want \ 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 == "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.
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.
