How to Show a Widget Based on the Page in Blogger

 In Blogger, you can display different widgets on different pages by using conditional JavaScript, conditional Tags inside the widget.

For example, a Popular Posts widget on your homepage and a Related Posts widget on your blog post pages.

There are few steps that you need follow that is Identify the Page Types, use conditional Javascript or HTML, and Add widget containers.

Below we’ll see them in detail,

1.    Identify Page Types

In Blogger, pages have specific URLs that help identify whether it's the homepage, a static page, or a blog post page:

Homepage URL: https://yourblog.blogspot.com/

Static Page URL: https://yourblog.blogspot.com/p/page-name.html

Blog Post URL: https://yourblog.blogspot.com/yyyy/mm/blog-post-name.html

 

2.    Use Conditional JavaScript or HTML

You can use JavaScript to detect the type of page and display the appropriate widget.

a.    Go to Blogger Layout:

·       In your Blogger dashboard, click on Layout.

·       Find the area where you want to add the widget (e.g., sidebar, footer).

b.    Add a New HTML/JavaScript Gadget:

·       Click on Add a Gadget.

·       Choose HTML/JavaScript from the list.

 Add the following code in your Blogger template,

 

<script>   // Get the current page URL   var currentURL = window.location.href;     // Detect if it's the homepage   if (currentURL === 'https://yourblog.blogspot.com/' || currentURL === 'https://yourblog.blogspot.com/index.html') {     // Display Popular Posts widget     document.getElementById('popularPostsWidget').style.display = 'block';     document.getElementById('relatedPostsWidget').style.display = 'none';   }   // Detect if it's a blog post   else if (currentURL.match(/\/\d{4}\/\d{2}\/.+\.html/)) {     // Display Related Posts widget     document.getElementById('popularPostsWidget').style.display = 'none';     document.getElementById('relatedPostsWidget').style.display = 'block';   }   // Static pages (like About, Contact, etc.)   else if (currentURL.match(/\/p\/.+\.html/)) {     // Hide both widgets     document.getElementById('popularPostsWidget').style.display = 'none';     document.getElementById('relatedPostsWidget').style.display = 'none';   } </script>

 

3.    Use Conditional Tags:

In the HTML/JavaScript gadget, use Blogger’s conditional tags to show or hide the widget based on the page. Below are some examples of how to control widget visibility:

a.    For the Home Page:

<b:if cond='data:blog.url == data:blog.homepageUrl'>   <!-- Your widget code here --> </b:if>

 

b.    For a Specific Post Page:

<b:if cond='data:blog.pageType == "item"'>   <!-- Your widget code here --> </b:if>

 

c.     For a Specific Static Page (by URL):

<b:if cond='data:blog.url == "https://yourblog.com/p/your-page-url.html"'>    <!-- Your widget code here --> </b:if>

 

d.    For a Specific Label Page:

<b:if cond='data:blog.url == "https://yourblog.com/search/label/YourLabel"'>    <!-- Your widget code here --> </b:if>

 

Replace <!-- Your widget code here --> with the actual HTML or JavaScript code of your widget.

4.    Add Widget Containers

Make sure your widgets have unique IDs. Add your widgets like this:

<div id="popularPostsWidget" style="display:none;">   <!-- Popular Posts Widget Code --> </div> <div id="relatedPostsWidget" style="display:none;">   <!-- Related Posts Widget Code --> </div>

 

5.    Save and Check:

Save the gadget and preview your blog to check if the widget is showing up only on the specified page.

This method allows you to control where widgets appear based on the page or post in Blogger