Put a Widget on a Specific Page or URL. ~ The Blog Doctor.
Loading...

Put a Widget on a Specific Page or URL.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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 :

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

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

<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 :

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

WIDGET 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 :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>

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


WIDGET 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 :

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


WIDGET 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 :


<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>



Replace BLOG_NAME and LABEL_NAME with actuals.


38 comments:

BlogmasterPg said...

Very good work! I'm looking for that hack just for some times.. Thanks. I'òll translate in my language and I'll pubblish in My Italian blogge blog, good bye, Vin. And Hav a good Xmas you and your family.

Englandman312 said...

This site is pretty helpful. THNX

vin said...

BlogmasterPg,

Happy Xmas to you and Your Family!

Do also include a link to my blog. :-)

Kaze said...

Hey there Vin,

Since I posted on your site, I've been getting emails, some quite odd, from "Dummies Guide to Google Blogger Beta" Somehow, when I posted, my email address was attached to the post or something. How do I unsubscribe to this post so I don't get any more mail?

Example:
I love you.
You're beautiful.
Don't ever change.
This puppy is excellent!
I used it on my blog.
Next stop -- I'm putting your badge on my blog!
Thanks bunches,
Paula

vin said...

Kaze,

Seems like you have subscribed to the comment feed from my blog. LOL :-)

There may be an unsubscribe link at the foot of the email. Just click it. If you have subscribed through a third party like Feedblitz/Feedburner you will have to login in your account there to unsubscribe.

It may also be due to some transient Blogger comment problem!!

Apoorv Khatreja said...

Dude, I have a problem. This code worked for some widgets on my blog, but suddenly it has stopped working for any of the widgets! Now, when i add that code inside the body of a widget (exactly as you mentioned here, after the "b:includable id='main'", and the "/b:if" before the "/b:includable" - I've replaced angle brackets with quotes because blogger treats it as HTML tags and won't accept my comment) I get an error when I save my template! The error is :

"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 content of elements must consist of well-formed character data or markup."

The totally weird thing is that it has worked at some widgets on my page, but now refuses to work! Has blogger updated something which disables such features? Try it out on your blog and then help me!

Vin said...

Apoorv,

The error could be because of some other code being erased by mistake. The code is working in my example page. See the Amazon Ads. at the bottom of the center column on this page :

How to Add Picture to header

They do not appear on any other page.

huamulan03 said...

Very useful, thanks ^^

Rachel said...

This is fantastic, thank you very much. Now all I ned to do now is work out how to do it for my blogs in blogger which do not have the new widget style editing. I edit th elinks in the main code and I want some to just show on the homepage. Do you have a guide on how to do this? Thank you.

Vin said...

Rachel,

In the Classic Templates you can use their conditional tags like this in the template :

<MainPage>

Code for whatever you want to appear on the Main Page.

</MainPage>

APAN said...

hello vin

hmm... i'm french so exuse me for my english.

any way !

I just want the widget to appear on two or three specific pages :

I tried with
"
b:if cond='data:blog.url == "http://1" or = "http://2" or = "http://3"'
"

but I didn't succed :-(

please, could you explain me !

hey ! my english is not so bad ! ;-)

Vin said...

Apan,

That cannot be done with this code. You may have to do it with Javascript or try using the loop condition. For example :

<b:loop values='data:posts' var='post'>
......
......
</b:loop>

Sarah said...

Hi Vin,
This is Sarah. I have got my widgets to show on specific label pages, but I noticed there are these spaces put on the pages where they do not show. For instance, if you look at my main page, you will see 3 spaces in between the categories and survey. Is there a way to get rid of those spaces? Thanks.

Vin said...

Sarah,

No way except by making them less evident by getting rid of their border lines.

Kellogg's Camels said...

Vin,

I have the same question as Sarah as I also have spaces. Now I read your comment about making the borders less evident...is there a way to make only certain borders e.g. white so that for instance on my page http://www.kelloggscamels.com the four widget empty blocks would only be one white box with solely borders above and below?

Thanks,
John

Vin said...

Kellogg's Camels,

Vin,

Look for code like this :

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
...
}

which defines the widget borders in the sidebar. Change 1px in border line to 0px and save. For individual widgets you can specify widget by ID :

#HTML7 {
border-bottom:...
}

Mitch Canton said...

subscribed!

Dude, you're awesome. Screw Google Groups, I got more info in one hour here than I did all night last night in Blogger help. Thanks.

Parimal said...

I get this error msg when I do as you suggest


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:if" must be terminated by the matching end-tag "".

Vin said...

Parimal,

Check that you have included the </b:if> tag in the correct place.

DirtDigger (Tessa) said...

Hey Vin,

Those lines that are left when making a widget show only on certain pages has been brought up over at Blog Buster http://xrl.in/17my Amanda mentioned a line in the CSS- would you know what she is referring to? There has been no answer as to what line she is talking about- Anything I can search for to delete?

Thanks,

Tessa

Vin said...

DirtDigger (Tessa),

The widgets show up as empty spaces on other pages. Then the bounding borders of the widgets are seen.

Look for border lines in the widget code and delete them to get rid of the lines :

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Like the border-bottom line in above code.

DirtDigger (Tessa) said...

Thanks Vin,

That did the trick-

Another question. When making a widget show only on a certain label page- can I make it show on more than one label page? how do i add another label page name?

I'd love for you to see my blog i'm working on- it will be set to not private next week, i'll be sure to send you the link.

Tessa

Vin said...

DirtDigger (Tessa),

Try putting in two conditional statements followed by two </b:if> tags. Try it on a test blog first.

DirtDigger (Tessa) said...

Hello Vin,

I have set one of my widgets to show up on a certain label. When you click on that label in the label list (or cloud) on the main page, the widget shows. If you click on a title to a post in that label the and go to that post page (that has that label) the widget does not show. I tried putting in 2 conditional tags for the widget- one for the certain label and one for post pages. It didn't work. Also tried putting in a conditional tag for label and then one for a specific page in that label, that didn't work. Is there a way to get a widget to show this way- set for a specific label, but will show on a post's page that has that label? I hope I explained this ok. Thanks for all your help.

Tessa

KESHAV SAINI said...

Hi Vin,

Can't we carry out these changes in edit layout page as i have little knowledge of html.

What i want to do is, to show different Ads on the top of each page and on the sidebars.

Currently if i put the code by creating a html widget in layout page, the Ad is shown over all the pages making it as default.

Or can you suggest me a complete code by visiting my blog at http://theartofstart.blogspot.com
and explaning briefly where to put that code? I want to preconstruct the widgets on sidebar and top so that whenever i get some html code i can directly put in the widget.

KESHAV

Vin said...

KESHAV SAINI,

The Edit Layout page is only for rearranging position of gadgets.

Since it applies to ALL blog pages you cannot specify a gadget to appear on a specific page from here.

Just follow the steps in the above post.

Todd @ Home Construction Improvement said...

I'm having a hard time making this work for "FEED" widgets. It works fine in Firefox but it makes IE freeze up with an error. Any suggestions?

Vin said...

Todd @ Home Construction Improvement,

Which version of IE?

Todd @ Home Construction Improvement said...

IE 7.0.6 - I found a fix. Instead of using the FEED widget I ended up converting the feed to a script and then using the HTML widget.

CLUB said...

Hi! So your blog is great! Found exactly what I needed to have music on the main page and off all others. However, I am a total blog /code novice and not sure where this coding goes to make the adjustment. Please help! Thanks so much!!!

Here is the code from the HTML widget that adds the music on my blog. Again, just want it on the main page and no others but not sure where to put the code you listed for main page only within the below code...


div style="width:300px;"object width="300" height="110">param value="http://media.imeem.com/m/vf5LB97gP1" name="movie"/>param value="transparent" name="wmode"/>param value="backColor=000000&primaryColor=000000&secondaryColor=000000&linkColor=000000" name="FlashVars"/>embed width="300" src="http://media.imeem.com/m/vf5LB97gP1" height="110" wmode="transparent" flashvars="backColor=000000&primaryColor=000000&secondaryColor=000000&linkColor=000000" type="application/x-shockwave-flash">div style="float:left;padding:4px 4px 0 0;">/div/embed/object/div

Vin said...

CLUB,

You have to insert the code in the widget in the Template Code (Layout---->Edit Html tab) box and NOT on the Page Elements tab.

Go through above post again.

MarieDenee said...

Thank you! This is working great as I am creating new pages!

Ammy said...

Vin you are Really a Doctor and i am Patient !! i want to show my widget on all label pages all item pages everywhere but not on home page..
what will be the code..
thanx in advance
plz mail ...
mittal.ankur1988@gmail.com

Ammy said...

Got it Already working now just change the word item with archive and it will show on all pages except homepage

BobsBlitz.com said...

AWESOME! Thank you!

Bob

Anonymous said...

Thanks for the great widget tip. I was working on a blog for PRS 22 custom and it blew my mind how difficult it was to add a widget the way you described. Thanks a lot for the info.

directorylist said...

can we use this method for the contact us,About Us pages like that pages in the blogger. And where we have to insert the code wt mention above in the top of the page code or were

Robert Downey veste said...

Thanks for the post it is very useful.
Robert Downey veste

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.