Widgets in the new Blogger are the code behind the new Page Elements. You can add Page Elements to your blog from the Page Elements subtab of the Template tab. To add widget or page elements to your blog login at Blogger.com and click on Layout link on Dashboard. Then click the Add Page Element link in the sidebar.

After adding a Page Element to your blog it can be seen on all your blog pages unless you wrap the widget in conditional tags. You can decide on which pages OR PAGE the widget should appear..............


WIDGET ON POST PAGES ONLY

If you want to put the widget only on the post (item) pages then paste this line :

Code:

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

immediately after the main includable line of code in the widget :

Code:

<b:includable id='main' var='top'>

For this login at Blogger.com and click on Layout link on Dashboard. Then click Edit Html subtab of Template tab. Put a check in the Expand Wdgets Template checkbox at the top of the Template code box and scroll down to the widget code. Lastly in the widget code add a </b:if> before the immediate next </b:includable>. This is how the whole widget code will look like after the change :

Code:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

WIDGET CODE

Code:


</b:if>
</b:includable>
</b:widget>


This widget will only appear on the Post Pages.

WIDGET ON MAIN PAGE ONLY

If you want the widget to appear only on the Main Page of the blog use the code below :

Code:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>


WIDGET CODE

Code:


</b:if>
</b:includable>
</b:widget>


This widget will appear only on the Main Page.

WIDGET ON SPECIFIC BLOG PAGE

There are some cases in which you may want the widget to appear only on a specific page. For example there may be some pages on your blog with heavy traffic and you may want to put some advertisements there. Create the advertisement widget by pasting the Ad. code in a Html widget. Then modify the code as shown below :

Code:


<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "BLOG_PAGE_URL"'>


WIDGET CODE

Code:


</b:if>
</b:includable>
</b:widget>


Replace the CAPS : BLOG_PAGE_URL with the permalink of your post. As an example I have added two Amazon Ads. at the bottom of the middle column on the How to add Picture to Beta Blog Header page of this blog. They are not present on any other page.

WIDGET ON SPECIFIC LABEL PAGE

You can specify a widget to appear only on specific label pages. This is useful when you want to represent your labels with icons. For example you may have posts on books and when the label books is clicked in your blog the sidebar will show a book icon. For such widgets you can use this code :

Code:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "http://BLOG_NAME.blogspot.com/search/label/LABEL_NAME"'>


WIDGET CODE

</b:if>
</b:includable>
</b:widget>