When setting the blog design, sometimes we are constrained by the number of widgets that are displayed, so that the widget looks crowded and the page becomes so long. In other cases again, sometimes we just want certain widgets to appear only on specific pages, both homepages, static pages, or post pages only. I used to talk about how to hide Blogger's sidebar on certain pages, using conditional tags and CSS (displays), and if it's just to hide one or more widgets, it's certainly not appropriate to apply. So, on this occasion, I want to share about how to show or hide one or more widgets on a particular page, and show them on another page type.
Hack Concept Displays Widgets On Certain Pages
This is actually the same as the previous article I've mentioned, using conditional tags (b if), one of the Blogger XML tags, to give commands for an element to be displayed on a particular section / page only and to hide it on another page. The difference with the previous way, the way I offer this will not use CSS, but using conditional tags directly on the element to be given commands, which in this case is the widget elements.
Steps to Show Widgets On Certain Pages
1. Search for Widget ID
Before providing conditional tags, you must know the widget ID that you want to display on a particular page. How to find it is easy:
a. There are two ways to access the widget editor (actually there are 3, that is through HTML editing, but this way will be more complicated:
- If you are in Blogger login condition, you can directly access "quickedit" directly from blog page, quickedit is tool to edit widget directly, its location usually is at the bottom right corner of widget, in the form of screwdriver and key (screwdriver and wrench) icon. Click the icon on the desired widget and a pop-up window will appear where you can edit the widget content.
- Or access the widget editor via the "Layout" page, then click the "edit" link in one of the widgets section. Then a pop-up window will pop up.
b. Look in the URL / address section of the browser on the pop up window. The widget ID location is at the end of the URL (swipe the URL to the right). Consider the following example image:
c. Save the Widget Id, for example from the example above, The widget Id I want to edit is "HTML8".
2. Provide Conditional Tags On Widget Elements
To display a widget on a particular page, you must add conditional tags (b if cond) to the desired widget element. The following steps to add it in accordance with the example widgets that have been submitted above:
a. Go to the template page (Dashboard> Template)
b. Click "Edit HTML"> Proceed.
c. Do not forget to click / check "Expand Widget Templates" to display all the widget elements in the editor.
d. Press CTRL + F, enter the desired widget ID that you have previously searched and prepared. In this example I will use the widget ID "HTML11" as an example and the following are more or less widget elements of your widget:
How to Display Widgets Only on Static Pages
<b: widget id = 'HTML8' locked = 'false' title = '' type = 'HTML'>
<b: includable id = 'main'>
<b: if cond = 'data: blog.pageType! = "static_page"'>
<! - 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>
How to Display Widgets Only on Archive Page (Archive)
<b: widget id = 'HTML8' locked = 'false' title = '' type = 'HTML'>
<b: includable id = 'main'>
<b: if cond = 'data: blog.pageType == "archive"'>
<! - 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>
How to Display Widgets Only on One Page (Based on URL)
<b: widget id = 'HTML8' locked = 'false' title = '' type = 'HTML'>
<b: includable id = 'main'>
<b: if cond = 'data: blog.url == "Replace with Page URL here"'>
<! - 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>
f. After conditional tags are added, save the template.
If you want to do the same thing on some widgets, you have to do and repeat the same way as above: search widget ID, locate the corresponding widget element in the edit HTML, and insert conditional tags by page type into the widget element. Save and Done.
Hopefully useful and have a nice Blogging.
Hack Concept Displays Widgets On Certain Pages
This is actually the same as the previous article I've mentioned, using conditional tags (b if), one of the Blogger XML tags, to give commands for an element to be displayed on a particular section / page only and to hide it on another page. The difference with the previous way, the way I offer this will not use CSS, but using conditional tags directly on the element to be given commands, which in this case is the widget elements.
Steps to Show Widgets On Certain Pages
1. Search for Widget ID
Before providing conditional tags, you must know the widget ID that you want to display on a particular page. How to find it is easy:
a. There are two ways to access the widget editor (actually there are 3, that is through HTML editing, but this way will be more complicated:
- If you are in Blogger login condition, you can directly access "quickedit" directly from blog page, quickedit is tool to edit widget directly, its location usually is at the bottom right corner of widget, in the form of screwdriver and key (screwdriver and wrench) icon. Click the icon on the desired widget and a pop-up window will appear where you can edit the widget content.
- Or access the widget editor via the "Layout" page, then click the "edit" link in one of the widgets section. Then a pop-up window will pop up.
b. Look in the URL / address section of the browser on the pop up window. The widget ID location is at the end of the URL (swipe the URL to the right). Consider the following example image:
2. Provide Conditional Tags On Widget Elements
To display a widget on a particular page, you must add conditional tags (b if cond) to the desired widget element. The following steps to add it in accordance with the example widgets that have been submitted above:
a. Go to the template page (Dashboard> Template)
b. Click "Edit HTML"> Proceed.
c. Do not forget to click / check "Expand Widget Templates" to display all the widget elements in the editor.
d. Press CTRL + F, enter the desired widget ID that you have previously searched and prepared. In this example I will use the widget ID "HTML11" as an example and the following are more or less widget elements of your widget:
Then add conditional tags after <b: includable id = 'main'> and the closing tag before </ b: includable>. The following conditional tags are based on the page type and how to add them, pay attention to the red tags and that's what needs to be added:
How to Display Widgets Only on Home Page / Index (Homepage)
<b: widget id = 'HTML8' locked = 'false' title = '' type = 'HTML'>
<b: includable id = 'main'>
<b: if cond = 'data: blog.url == data: blog.homepageUrl'>
<! - 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>
How to Display Widgets Only on Post Pages
<b: widget id = 'HTML8' locked = 'false' title = '' type = 'HTML'>
<b: includable id = 'main'>
<b: if cond = 'data: blog.pageType == "item"'>
<! - 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>
<b: widget id = 'HTML8' locked = 'false' title = '' type = 'HTML'>
<b: includable id = 'main'>
<b: if cond = 'data: blog.pageType! = "static_page"'>
<! - 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>
How to Display Widgets Only on Archive Page (Archive)
<b: widget id = 'HTML8' locked = 'false' title = '' type = 'HTML'>
<b: includable id = 'main'>
<b: if cond = 'data: blog.pageType == "archive"'>
<! - 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>
How to Display Widgets Only on One Page (Based on URL)
<b: widget id = 'HTML8' locked = 'false' title = '' type = 'HTML'>
<b: includable id = 'main'>
<b: if cond = 'data: blog.url == "Replace with Page URL here"'>
<! - 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>
f. After conditional tags are added, save the template.
If you want to do the same thing on some widgets, you have to do and repeat the same way as above: search widget ID, locate the corresponding widget element in the edit HTML, and insert conditional tags by page type into the widget element. Save and Done.
Hopefully useful and have a nice Blogging.
Write markup in comments
- To write letters bold using
<strong></strong>or<b></b>. - To write letters italic using
<em></em>or<i></i>. - To write letters underline using
<u></u>. - To write letters strikethrought using
<strike></strike>. - To write HTML code use
<code></code>or<pre></pre>or<pre><code></code></pre>, and please parse code in the parser box below.
Choose the Comment System