Display Gadgets On Only The Home Page Or Post Pages In Blogger




| 67 comments

In this post we have a great Blogger trick that shows you how to have chosen gadgets appear only on your blogs home page or post pages.There are a number of reasons you may want to only display a gadget on either post page or home page for example if you use the read more feature you will want gadgets above and below the posts on the post pages.As AdSense only allow 3 units per page you may want to have a gadget within a post which will allow for an extra unit on the home page.You could even give your home page a totally different design to the posts.There are many reasons and I'm sure you will find this Blogger trick very useful designing your blog.So starting with Gadgets only on the Home page lets see how its done.

Update : You can also make gadgets only appear on the page of a specific post.

Update 2: Display Gadgets Added Directly To Your Template On Only Home Or Post Pages.

Steps To Display Gadgets On Home Or Post Pages

If the gadget you want is not already on your blog add it first.For this example i am using a test blog and i am going to use the same recent posts widget.I have already added it to the blogs sidebar.

Name The Gadget - You will later have to find the gadget in your blogs template so to make this easy make sure the gadget has a name or title, i am looking for my recent posts gadget so it has the title recent posts if the gadget you want to move does not have a title just give it the title xxxxx and you can remove it when finished.

Step 1 - In your dashboard Click 'Layout' > 'Edit Html' > Tick the 'Expand widget templates' box


Blogger layout

edit html blogger

Expand widget templates blogger


Step 2 - Now you want to find the gadget in your template so i looked for 'Recent Posts' you look for the title of your gadget or xxxxx if you used that name.
The easiest way to do this is to click 'CTRL and F' for a search bar to help find the code - for more info on this click the extra help link at the top of the post.

You want to find a section of code similar to the one below :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>

For some gadgets like your archive the section will be larger but you want everything between :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>

And

</b:includable>


Step 3 - Now we have the code for the gadget we have to add two pieces of code to make it display on the home page only.You can see the two pieces of code i added to make this happen in red below :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>

Copy the code in red and add in place for your gadget.

Take you time and make sure you have it added correctly, once your sure you can save your template.

Adding a gadget to your blog post pages only

To make a gadget display on the post pages only follow the same steps to find the gadget in your template.The only difference is the code added.This time you use the two piece of code shown below :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>

Once again copy the code in red and put it in place for your gadget.
When your sure the code is added properly save your template and your done.

You can do this with as many items in your sidebars as you like and with any gadgets, if you need extra help you only need ask in the comments.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

67 comments:

  1. Very cool! I had been wanting to use the scrolling latest posts widget but didn't want it to be on my home page because readers can already see the latest posts with my template style the way it is.

    I didn't know that the code for blogger widgets once made through the layout page could be found in the html of the template so I'm glad you mentioned that, I had been wanting some of those codes for a static page I'm trying to make and they dont show up in the code box of the layout page.

    I also like your new social media icons under latest updates. Every time I stop by you have something new, I love it!

    ReplyDelete
  2. Thanks Emily,

    I dont think i will everv be happy with the appearance of the blog.Every time i go doing some research for upcomming posts i find somthing and think 'That looks good, i want that'.You would think it's a good thing knowing how to take almost anything from any website and using it on Blogger but somtimes i end up wasting hours that could be much better spent :D

    Paul.

    ReplyDelete
  3. Is there a way to make a gadget appear on only ONE of the extra "Pages" that Blogger allows us? Or, a way to ad a gadget to one Blog Post that I can create a hyperlink to?

    ReplyDelete
    Replies
    1. Did you have a solution for that ? I really need to add a gadget to my "forums" page.

      Delete
  4. Hi Kate,

    I tested it out and yes it can be done ! Yay, i wasnt sure if it would work.

    It's somthing i wouldnt have thought of doing but could be very useful.

    There is no way i could explane how to do it in a comment so right now im gonna write a post and show exactly how to do it.

    I will have the post published in 10 minutes, i presume you have subscribed to comment replys so i will pop another comment here whan the post is live.

    Paul.

    ReplyDelete
  5. Hi again kate,

    This is the post showing exactly how to have gadgets on one post : Gadgets on one post

    Let me know if you need more help,

    Paul.

    ReplyDelete
  6. Thanks for this! The advice here worked perfectly, the first time!!

    ReplyDelete
  7. Wow! you made it so incredibly easy. Thanks

    ReplyDelete
  8. Thank you so much! You're very helpful

    ReplyDelete
  9. Perfect. Exactly what I was looking for. Thank you!

    ReplyDelete
  10. Thank you, this tricks really help me out

    ReplyDelete
  11. Thanks for the tip. I got it to work, but am having one issue. I added a gadget to one of my post pages. The problem now is that every other post page now has some blank space where the poll is. Does anyone have a fix for this?

    ReplyDelete
    Replies
    1. I have this same problem. Let me know if you know the fix.

      Delete
  12. Here is the link from my last post.
    http://kcdistrict7.blogspot.com

    Thanks,

    Jason

    ReplyDelete
  13. is there a way to change its font sytle?

    ReplyDelete
  14. Thanks,this tips helped me a lot.

    ReplyDelete
  15. Awesome !! That was very simple indeed
    i used it for linkwithin gadget to appear only below posts and not on the main page.!!

    ReplyDelete
  16. For some reason I can't get this to work. I followed the steps exactly and it's not hiding the link within off my main page. I want it to appear on the blog post page only since I want to start offering "read more" to make for a cleaner home page.

    ReplyDelete
  17. Thanks, this tutorial helped me a lot.

    ReplyDelete
  18. pls show my blog how it is?

    ReplyDelete
  19. I've been looking for this. Thanks!

    ReplyDelete
  20. I want the gadgets to appear on all pages except static pages likes contact us, about me, privacy policy, etc..
    so can you tell me how to do that...

    ReplyDelete
  21. @ TechArena - Check the update 2 link at the top of the post for details on have gadgets on only static pages.

    ReplyDelete
  22. Is there a quick way to hide ALL THE WIDGETS on the right and left side bars of the homepage. I have a three column template and want all my widgets on the left and right hidden on the home page and static pages of the blog, to clean it up. BUT I do want all the widgets to appear on the post pages. I have it set up in blogger that each post have it's own url. Is there a more direct way to hide all the widgets on the right and left of home page rather than going through each one separately and having to add the hide code again, each time I add a widget. I'm having a challenge figuring it out and would appreciate any help to streamline this! Thanks!

    ReplyDelete
  23. Dear this is not working for Popular posts widget,, how can I hide my popular posts ,, and only display on homepage

    ReplyDelete
  24. It worked. I've removed Linkwithin gadget from home page... I don't know how to thank.. i was searching for this

    ReplyDelete
  25. is thera a way to put two conditions for <b if ??..i want to appear something in main page and post pages..is it possible?

    ReplyDelete
  26. Thank you so much for this. Much appreciated and works a treat.

    Best Regards

    ReplyDelete
  27. i have my text box with a 1px border. when i add this code, the text is removed on pages other than home, but an empty box (the 1px border) remains. how can i fix this so that the border no longer shows, too?

    ReplyDelete
  28. For those getting the error:
    The value of attribute "cond" associated with an element type "null" must not contain the '<' character.

    This is how I finally got it to work:






    instead of





    After Looking everywhere for this solution and not finding it... Well the code works perfect. I love it!

    ReplyDelete
  29. Paul, I tried to do your instructions but hit some dead ends. Are your steps written for the new interface or the old one? I wasn't able to do the steps in either. For instance, in the new interface, I don't see the option "EXPAND WIDGET TEMPLATES." There is a button for EDIT HTML but I don't see anything with coding like yours. <b:widget id=

    Can you help? Thanks. Dwight (temporarily using my friend Anne's login)
    dwightokita@gmail.com

    ReplyDelete
    Replies
    1. I switched over to the old Blogger interface and now I see the HTML coding I think.

      Delete
    2. This worked. Thanks. The only thing now is the issue noted by Jason Stock and Kathryn Adams. Where I removed 2 gadgets, there are thin white strips. Is there a way to remove them? Did that happen because I added some spacing in the html? Here is the blog I'm working on:

      http://avecpleasure2012.blogspot.com/

      Delete
  30. Hello Paul,

    This is nice post.
    But how can I add a Box or border in my social buttons just like yours: (If You Enjoyed This Post Please Take 5 Seconds To Share It).

    How can I add Box and Text in it?
    Can you Help me that?
    Thank you so much.

    -jayryan09-

    ReplyDelete
  31. Thanks for the post. Was very useful.

    ReplyDelete
  32. Great! This post helped me a lot. Thank you.

    ReplyDelete
  33. hi...i want to show recent post links below every posts .what to do?

    ReplyDelete
  34. I tired this and it worked, thanks! But, there is a little empty box on the pages where the widget is not displayed.

    Any ideas?

    ReplyDelete
  35. Wow really great Article!! Really superb!!! Is there any way that i create a page in my blogger without sidebar. I have removed gadgets by following ur steps. But the side bar still exists. That is the space is limlited for my new page. Limited in the sense of width. Please help out me! Thanks a lot for sharing this article!

    ReplyDelete
  36. Just what i was looking for, amazing. Spent two days looking for this solution.

    ReplyDelete
  37. Thanks for the tip. Took some fishing after the blogger interface overhaul, but finally figured it out.

    ReplyDelete
  38. sir i am trying to put share this gadget likw you have below post tiltes, but in my case it is showing some error, please help me how to fix it.

    ReplyDelete
  39. Hello,

    Love your blog!
    How does this work with the new Blogger interface?

    When I do cntrl+f to find my widget, there is no "" etc. The coding has completely changed.

    Can you please provide a work around for showing a widget only on the homepage?

    Thank you! :)

    ReplyDelete
  40. Thank you so much for this code, Paul. Works perfectly!

    ReplyDelete
  41. thanks mate, ive already hide one of my widget on my homepage.

    ReplyDelete
  42. Hi, following the instruction I get and error The element type "b:if" must be terminated by the matching end-tag "". So i can´t save the changes.


    Thanks!

    ReplyDelete
  43. Not working for me i don't know why?

    ReplyDelete
  44. Thank you so much very helpful widget

    ReplyDelete
  45. Thanks for the info provided. It really help me. Keep it up!

    ReplyDelete
  46. Thank You for the info. Simple instructions. Very easy to follow. Works perfectly!

    ReplyDelete
  47. thanks...this was really simple and easy to understand

    Regards, Mohit Kumar, Blogger @ www.thegeeksolutions.in

    ReplyDelete
  48. Thanks for your posts, they are really helpful, but i have some problem with the HTML. i found the Widget title but i cant find the code u post here in my HTML. i want the widget to appear only in my post page

    can u pls help out

    thanks

    ReplyDelete
  49. Thanks!!!
    is that possible to show a html gadget only for a particular blog post and not for others?

    ReplyDelete
  50. Is it possible to show the widget in BOTH of two cases:

    1.) On the home page if the post is complete (no jump link), AND
    2.) IF there is a jumplink for that post on the home page, show that widget ONLY after clicking the jump link?

    So, is there a way to make both of these cases true? Currently, I can either hide it on the home page which hides it from full posts appearing on the home page. Or, on post pages only which makes it available after the jump link but not on full posts on the home page.

    Hoping for a way to integrate these two into one piece of code! Many thanks for any help to do this.

    ReplyDelete
  51. Thank you very much for this post keep posting more and more it help me a lot on my blog now showing linkwithin only on my post pages thank you once again.

    ReplyDelete
  52. Man, you rule, thank you very much!

    May I ask you if there is a way to show the widget by labels? I mean, my blogger is in 2 languages and I would like the widget, to show, for example, the related texts in english below a text in english, and the related texts in japanse below a text in japanese..

    Thanks again

    ReplyDelete
  53. How to hide the blank mark left on home page after displaying widgets only on post pages.

    ReplyDelete
  54. Can anybody answer this above question ???

    ReplyDelete
  55. Thank you, Exactly what I was looking for. Worked like a charm....

    ReplyDelete
  56. Thank you so much! I had no idea where I could even start to have this implented into part of my blog! :)

    ReplyDelete
  57. Hi, i have a blog at http://ads2020.blogspot.com and it is showing FB, Twitter buttons on home page as well, i wanted to remove them from the HP, but i can't find the exact code you have told. Could you please help me? thanks

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us