Tips around on the internet for hiding / removing widgets by using CSS, jQuery or using Blogger condition tags to hide the inner content of widget. But when using those ways, Blogger will still actually load the widget, and this problem may affect the loading speed of your site. So, we have no any properly tips for hiding Blogger widgets for specific pages?
No, we have one. After researched and tested with some Blogger tags, luckily, I found a very simple and completely way to remove or prevent a widget to be loaded on certain pages. Let me show you.
How to Show blogger widget on homepage only? How can I show widgets only on sub pages? How can I hide widgets on Static pages? How to show widgets on selected pages in blogger? To answer all these questions today's tutorial will be a delicious one. Its really important to control widget Display in Blogger using Blogger Conditional Statements. Some widgets are meant for homepage only while some makes sense when you show it at your Contact Pages, About Me pages or static pages. So how do we actually set the conditional where to display an HTML element or widget and where to hide it? The trick is really simple. You just need to enclose your widgets in few pieces of conditional statements. So lets jump straight on how to manage widgets on different pages in blogger.
UPDATE Now you can use Conditional tags even for Mobile Devices!
Its often the HTML/JavaScript widget that is widely used for adding your customized widgets to Blogger and its mostly this widget that needs to be easily managed. Since you often paste some widget code inside HTML/JavaScript widgets so the only extra thing that you need to do in order to control widget’s display is to enclose that code between two pieces of code as shown in each control codes below,
Note:
Its often the HTML/JavaScript widget that is widely used for adding your customized widgets to Blogger and its mostly this widget that needs to be easily managed. Since you often paste some widget code inside HTML/JavaScript widgets so the only extra thing that you need to do in order to control widget’s display is to enclose that code between two pieces of code as shown in each control codes below,
- Item Pages Include Posts only
- Index Pages Include Homepage and Search/Label Pages
hiding widget from home page
Example, you want to hide a widget from home page. First, please access Template / Edit HTML, then click Jump to widget button and select the widget you want to hide. In this example, I will hide my widget HTML1.
The normal HTML widget will have a full code like below:
The normal HTML widget will have a full code like below:
<b:widget id='HTML1' locked='false' title='HTML Widget' 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, to hide this widget from home, please add below code after <b:includable id='main'> tag:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:remove/>
</b:if>The final code will be like this:
<b:widget id='HTML1' locked='false' title='HTML Widget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:remove/>
</b:if>
<!-- 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, click Save template button and check your home page to see, the widget was completely removed. You can view source of home page and find the id of the widget (with my case is id=’HTML1′), you would not found anything. It’s magic 🙂
Explain how it works
The rule is simple: if a widget contains undefined Blogger tag, it will be removed completely.
In example code above, the line: <b:if cond='data:blog.url == data:blog.homepageUrl'> will check if this is the home page and the undefined tag <b:remove/> will help us removing the widget completely.
You can use another tag than <b:remove/>, but it must be an undefined tag of Blogger. Example: <b:return/>, <b:exit/>, <b:hide/>, .etc…
Hide from other pages
You can read more information about Blogger page type condition tags at: Blogger Basic Global Data Tags. In this article, I will list some basic example for hiding widgets for certain page types of Blogger as below:
Hide from home page
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:remove/>
</b:if>Hide from index pages
(home, label, search page or all posts page (include home and its older posts pages).
<b:if cond='data:blog.pageType == "index"'>
<b:remove/>
</b:if>Hide from static pages
<b:if cond='data:blog.pageType == "static_page"'>
<b:remove/>
</b:if>Hide from item pages
(articles, posts)
<b:if cond='data:blog.pageType == "item"'>
<b:remove/>
</b:if>Hide from archive pages
(showing posts by months / years)
<b:if cond='data:blog.pageType == "archive"'>
<b:remove/>
</b:if>Hide from 404 pages
<b:if cond='data:blog.pageType == "error_page"'>
<b:remove/>
</b:if>Hide from mobile
<b:if cond='data:blog.isMobileRequest'>
<b:remove/>
</b:if>Showing instead of hiding
If you want to show instead of hide, you must use != instead of == . Example, if you want to show on home page, but hide from others, use this:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:remove/>
</b:if>Or you can use
! expression. For example hide from mobile:<b:if cond='!data:blog.isMobileRequest'>
<b:remove/>
</b:if>Or you can also use
<b:else/> expression. For example hide from mobile:<b:if cond='data:blog.isMobileRequest'>
<b:else/>
<b:remove/>
</b:if>How to Show Widgets/HTML Only On Homepages
Simply enclose the code inside HTML/JavaScript widget between these conditional lineswhere WIDGET CODE GOES HERE is the code of the widget you want to show or hide.
How to Hide Widgets On Homepages?
Same procedure here,How To Show Widgets Only On Static Pages?
How To Hide Widgets On Static Pages?
How To Show a Widget On a Selected Post Only?
How To Hide a Widget On a Selected Post?
How to Show HTML On First Post of Homepage?
If you want to show HTML content on first post of your homepage and not on every post that are displayed on homepage then use the following syntax,Sometimes you would prefer showing a Featured or Latest ribbon image on the first post or you may wish to display some stuff only on first post summary, in that case you can surely enclose the HTML inside the above conditional statement.
How to Show Widget On Index Page?
Index pages include labels/search pages, archive pages and the Homepage. To show widget or HTML on these pages use the following syntax,
How to Hide Widget On Index Pages?
Use this codeHow to Show Widget On Search Page?
Search Page in Blogger blogs include all Label Pages and search pages displayed when a user searches a query using the search box. To show widget or HTML on search pages use the following syntax,How To Control Blogger’s Official Widgets?
The same procedure can be applied to Blogger’s official widgets like About Me, Archives, Poll etc. For controlling that widgets do this,- Go To Blogger > Design > Edit HTML
- Backup your template
- Check the Expand Widgets Templates Box
- Search for the title of the widget you want to control
- The code for the widget will look something similar to this one,
In this article, I will show you how you can use the Blogger conational tag to show or hide any widget on specific pages like the homepage, post pages, archive pages, etc.
Conditional tags in Blogger theme code allow us to dynamically inject any code to a specific page and exclude it from all other pages. so, in this way, we can easily speed up our blog loading speed.
So, let’s understand what conditional tags are and how you can use them on your blogger website.
Suppose you want to display sidebar widgets only on the homepage and exclude it from all other pages like post pages or archive pages.
Then you can easily do that by using the blogger conditional tag in the theme code.
<b:widget cond='data:view.isHomepage' id='HTML1' type='HTML'>
</b:widget>Here you have to add the cond=”data:view.isHomepage” in the widget code to display the widget only on the homepage. So, after adding this conditional code, this widget will stop loading from all other pages except the homepage. So, in this way you can block unnecessary code from loading in a page.
You can similarly apply a different rule for different pages.
| No | Command | Description |
|---|---|---|
| 1 | cond=’data:view.isHomepage’ | Specifies the homepage of blogger blog. |
| 2 | cond=’data:view.isPost’ | Specify the posts or article page |
| 3 | cond=’data:view.isPage’ | Specifies the pages in blogger, not posts |
| 4 | cond=’data:view.isArchive’ | Specifies the archive page/ Category pages |
| 5 | cond=’data:view.isLabelSearch’ | Specifies whether the page is search by label or not |
| 6 | cond=’data:view.isMobile’ | Specifies whether the client device is mobile or not. |
| 7 | cond=’data:view.isLayoutMode’ | Determine the layout mode of your blogger blog |
| 8 | cond=’data:view.isError’ | Load Widgets only on 404 pages |
How to Hide a Gadget/Widget from a Specific URL in Blogger
You can use if condition in blogger to load the CSS or Javascript file on specific pages like the homepage, post pages, archive pages, etc. You need to wrap the if conditional code just above and below the code.Blogger conditional tag is super helpful to load the CSS and JavaScript efficiently and only loads on pages where the code is actually needed and excluded from all other pages
1. Homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only homepage -->
</b:if>2. Item (post) pages
<b:if cond='data:blog.pageType == "item"'>
<!-- all item pages -->
</b:if>3. Archive page
<b:if cond='data:blog.pageType == "archive"'>
<!--archive_Page-->
</b:if>4. Error Page (404)
<b:if cond='data:blog.pageType == "error_page"'>
<!-- all error pages-->
</b:if>5. Static page
<b:if cond='data:blog.pageType == "static_page"'>
<!-- all static pages -->
</b:if>6. Specific Label Page
<b:if cond='data:blog.searchLabel == "blogging"'>
<!-- content of label Blogging -->
</b:if>7. AND
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchQuery'>
<!--search_page AND index_page-->
</b:if>
</b:if>You can use And condition to apply multiple conditions to the same code. Here in the above example, you can see it is targeted at both search pages and index pages at the same time.
8. OR
<b:if cond='data:blog.pageType == "index"'>
<!-- static page OR index page' -->
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- static page OR index page' -->
</b:if>
</b:if>9. NOT
<b:if cond='data:blog.pageType != "item"'>
<!-- all pages except item pages -->
</b:if>9. Specific URL
<b:if cond=’data:blog.url == “URL of the page“‘>
<!--Your HTML, CSS or JS code-->
</b:if>
المشاركات
