How to Display Different Widgets on Different Pages in Blogger: A Step-by-Step Guide

Introduction

In Blogger, you can show different widgets on different pages. For example, you might want to show a "Popular Posts" widget on the homepage and a "Related Posts" widget on your blog post pages. This helps make your blog look cleaner and gives visitors the most relevant content. You can do this using conditional logic with JavaScript or Blogger’s built-in conditional tags.

Problem & Reasoning

By default, Blogger shows widgets across all pages. However, you might not want the same widgets to appear everywhere. For example, showing a "Popular Posts" widget on your homepage makes sense, but showing it on every blog post might not be helpful. The same goes for the "Related Posts" widget, which should only appear on blog post pages. Using conditional logic, you can show widgets only where they make sense.

Solution

To display different widgets on different pages in Blogger, follow these simple steps: identify page types, use conditional JavaScript or HTML, and add the widget containers. Let’s walk through each step.

1. Identify Page Types

Blogger pages have unique URLs, which makes it easy to identify the page type. Here are the URLs you’ll be working with:

• 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 check which page the visitor is on and display the right widget. Here’s how to do it:

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 or footer).

b. Add a New HTML/JavaScript Gadget:

• Click Add a Gadget.
• Choose HTML/JavaScript from the list.

c. Add the JavaScript Code:

Add this JavaScript to show the correct widget:

<script>

  var currentURL = window.location.href;

 

  // If it's the homepage

  if (currentURL === 'https://yourblog.blogspot.com/' || currentURL === 'https://yourblog.blogspot.com/index.html') {

    document.getElementById('popularPostsWidget').style.display = 'block';

    document.getElementById('relatedPostsWidget').style.display = 'none';

  }

 

  // If it's a blog post

  else if (currentURL.match(/\/\d{4}\/\d{2}\/.+\.html/)) {

    document.getElementById('popularPostsWidget').style.display = 'none';

    document.getElementById('relatedPostsWidget').style.display = 'block';

  }

 

  // If it's a static page (like About or Contact)

  else if (currentURL.match(/\/p\/.+\.html/)) {

    document.getElementById('popularPostsWidget').style.display = 'none';

    document.getElementById('relatedPostsWidget').style.display = 'none';

  }

</script>

3. Use Conditional Tags

You can also use Blogger’s built-in tags to control which widget shows up on specific pages. Here are some examples:

a. For the Homepage:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

  <!-- Your widget code here -->

</b:if>

b. For a Blog Post:

<b:if cond='data:blog.pageType == "item"'>

  <!-- Your widget code here -->

</b:if>

c. For a Static Page (by URL):

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

  <!-- Your widget code here -->

</b:if>

4. Add Widget Containers

Make sure to add unique IDs for 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

After you add the code, save your changes and preview your blog. Check if the widgets show up only on the pages you specified. For example, the "Popular Posts" widget should only appear on the homepage, and the "Related Posts" widget should only show up on blog posts.

Use Case Example

Imagine you have a tech blog. You want to show the "Popular Posts" widget on your homepage to highlight your best content. But on individual blog posts, you want to show a "Related Posts" widget to keep readers engaged with more content similar to what they are reading.

You can use the JavaScript or conditional tags to detect the page type. On the homepage, the "Popular Posts" widget will appear. On blog posts, the "Related Posts" widget will show instead. This makes your site more user-friendly and helps keep visitors on your site longer.

Conclusion

By using conditional JavaScript or Blogger’s built-in tags, you can easily control which widgets show up on which pages. This method helps you create a more organized and engaging layout by displaying only the most relevant content for your visitors. Whether you use JavaScript or conditional tags, you can make your blog look cleaner and more tailored to your audience’s needs.