How to display widgets on certain pages in blogger

Today I'm going to show you how we can get widgets to display on certain pages within your blogger blog using if conditional tags

so first i recommend you download a backup copy of your template or use a test blog.

Now for this tutorial I'm going to add a simple HTML/JavaScript widget (it could be any kind of widget) in the title field of the widget i named mine "My Widget"

the reason i did this is so that we can easy identify it when we switch to the edit html tab make sure you have the expand widget templates checkbox checked and find the code for your widget here's a screenshot of mine




Now once you have found the widget code you need to decide which page you want it to be displayed on.

Here's the code for displaying widgets on the postpages

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


Here's the code for displaying widgets on the homepage

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


Here's the code for displaying widgets on the archive pages

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


now add it to the widget like i've done in the following screenshot



save and preview your template to see it in action

Now if you use the AdSense widget in your blog posts by default it will show them on the main page with a little tweak we can get them to show on the post pages only by moving the closing if tag further down here's a screenshot of the post widget before and after



Now if you make the above changes to the post widget and save it AdSense will only be displayed on each post page. I hope you enjoyed reading this post dont forget to comment if this works for you ...Read more!

How to split your blogs header into two widgets

This post shows how you can split your blogs header into two widgets like the following screenshot



so i recommend you backup your template or use a test blog for this example I'm going to use the Minima Template so if you are using a different template the code would be different. The default width of the template header-wrapper code is 660px
(if you don't know what I'm talking about see screenshot below)



So I'm going to set the width of the main header section to 350px and float it to the left see screenshot



now that's done we can create the second section for the right widget so copy the following code

#header2 {
float:right;
width:250px;
}


and paste it some where in between the opening and closing skin tags like Ive done below



next copy the following code for the new section


<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>


and paste it like so



now save it and go to the page element tab you should have a new section on the right side of the header here's a screenshot of my result


...Read more!