How to Display widget on specific pages/posts In Blogger

When you add a widget (or a gadget as Blogger would call it) to your blog, by default the widget would appear on all pages –homepage, index, archive, post and static pages. But what if you want a certain widget to appear only on a certain page or pages, can it be done? In other words can you select on which page or pages the widget appears?  The answer is yes you can -using  conditional tags.

You might notice my Live visitor widget only appears on Home page. That’s because I applied this very trick to it. Okay let’s proceed:

1. Find your widget ID

 To address a widget id in HTML or CSS, you need to know the widget's ID. Here is How to find Blogger Widget ID and Section ID

2. Locate the widget code in HTML
* Login to Blogger
* Go to Dashboard >Design>Edit HTML
 (Note : before you make any changes please make sure that you have Backup your HTML)
* Check the Expand Widget Templates, Check box on top right of the HTML Window.
* Find your widget id in the HTML using Ctrl+F and entering the widget ID in the search box.


Your widget code might look like this. It may be a little different, but it's okay.



3. Applying the conditional tags

Insert the opening tag <b:if cond='Condition'> immediately after <b:includable id='main'> and the closing tag </b:if> immediately before </b:includable> as shown below. The code checks whether the condition is true, and executes the content if it is.


To show a widget on index pages (i.e. homepage, archive and label pages), replace 'CONDITION' with 'data:blog.pageType == "index"'

So the proper code will look <b:if cond='data:blog.pageType == "index"'>

To show widget only on post pages
replace 'CONDITION' with <b:if cond='data:blog.pageType == "item"'> the attribute refers to post pages.

To show widget only on Static pages replace 'CONDITION' with <b:if cond='data:blog.pageType == "static_page"'>


To show widget only on archive pages replace 'CONDITION' with <b:if cond='data:blog.pageType == "archive"'>

To show widget only on homepage replace 'CONDITION' with <b:if cond='data:blog.url == data:blog.homepageUrl'>

To show widget on a specific page/url replace 'CONDITION' with  <b:if cond='data:blog.url == "http://emdadblog.blogspot.com"'> Provide your own url in "http://emdadblog.blogspot.com"

To show widget on pages other then the specified page replace == with != for example to show widget on pages other then hompage,following code should like this <b:if cond='data:blog.url != data:blog.homepageUrl'>
4. Save and enjoy.

8 comments:

  1. Hi,
    can you help me? How show widget only on home and archive but not on post pages?
    Thanks.

    ReplyDelete
  2. ah, ok, now seen: "To show widget on pages other then the specified page".... Thanks anyway!

    ReplyDelete
  3. Your code for displaying widgets on certain conditions rocks. I just implemented on http://www.kitchengarden101.com/ and it works great. It doe not display adsense on the main page.

    ReplyDelete
  4. Hurm....can't work it out properly...
    get this message instead even i copy paste exactly like you stated here...

    "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:section" must be terminated by the matching end-tag ""."

    Can help me with this area?
    Thanks..

    ReplyDelete
  5. @Shah

    Hello Sir,

    Sorry for late response.

    Actually the problem appear when the closing tag does not properly close. Please make sure that you have use the closing tag properly.

    If you can't solve the problem don't hesitate to contact with me at emdadekh@gmail.com

    Thanks.

    ReplyDelete
  6. Tutorials and tips are useful because I just knew I could put the widget on a certain page ..

    ReplyDelete
  7. hi. do you knwo i i could display a widget on a couple of pages only? I know how to make it display on home/archive/posts pages...but I want to know how to make it disaplay on page x, y, and z. (without having to create 3 widgets)

    ReplyDelete
  8. Great tip, thanks once again.

    ReplyDelete

Let us know, what you think about this blog