How to Display Widgets on Certain Pages/Posts in Blogger

If you want a specific widget to show up on a certain page, post, or labels page within Blogger, you can do this by editing the HTML in your Layout Editor. We are going to be using Conditional Tags in the HTML to tell a widget where to appear and where not to appear. It's not as difficult as it sounds!

Disclaimer: Please download a backup copy of your current template/design so you can add it back in just in case something goes wrong!

Moving on!

Let's add a Test Widget to our blog to test this out. Go into the Layout tab of Blogger, then click on Page Elements. Add an HTML/Javascript widget. Simply write Testing inside of it and title it Test Widget. Save the widget addition and click on Edit HTML from the menu at the top.

Now, check the box at the top right corner of your Editor Window. It should say "Expand Widget Templates." Then, click on the Editor Window and hit Command-F. This will bring up a box that allows you to search within the Editor for a specific word. Type the title of your widget into the box. It should jump down the page to the HTML for the Widget you want to use. (If not, try searching for:  <div id='sidebar-wrapper'> then spotting your Widget title in the HTML below.)

You should then see a set of code, like the highlighted text in the image below:

This code is the HTML for your widget. Now, just below the tag <b:includable id='main'>   we are going to paste a new Conditional Tag to designate where this widget will show up.

You can use the following Conditional Tags:

Display the Widget Only on the Homepage
<b:if cond='data:blog.pageType == &quot;index&quot;'>

Display Widget On Specific Page
If you've created a page on your blog (About Me, Contact, etc.) you can choose to have a widget show up only on that particular page. Here's the code to use:
<b:if cond='data:blog.url == "PLACE_YOUR_URL_HERE"'>


Display Widget On a Label Page
We often place labels in the bottom of our Post Editor. Sometimes we put widgets in our sidebar so readers can find posts on one particular label, or they can click on the label at the bottom of the post and see all posts with that label. To have a widget only show up on a particular label page, like a list of resources for adoption when an Adoption label is clicked you will use the following code:
<b:if cond='data:blog.url == "http://BLOG_NAME.blogspot.com/search/label/LABEL_NAME"'>

You can also find the URL to place here by clicking on the label and copying the URL from your browser bar.

Now, the LAST STEP!

This is important. You will need to place this closing tag: </b:if> just above this tag: </b:includable> 

Hopefully this has helped! If something went wrong, please let me know in the comments and I'll do my best to address it!