How to Hide Blogger Widgets on Home Page

Recently I revised BPwebnews to show post excerpts on the homepage. The revision made the theme a magazine style, with ‘read more’ links. So now, there is no need to list recent articles in the sidebar on the home page. The ‘recent posts’ gadget is still useful when visitors arrive on a specific post — they need only look in the sidebar for other articles that might interest them. This post will show you how to hide gadgets depending on which type of page is viewed.


Revise the template to hide recent posts on the home page.

  1. Go to Blogger Dashboard, Select Layout, Edit Html.
    Create a backup of your template by pressing “download full template.”

    Check the Expand Widget box so you can find the right code.

  2. Basically, you’ll  find the section that contains the widget code, add a conditional if-statement at the start of the ‘includable’ and an end-if tag just before the close of the last ‘includable for that widget.’ Search for the lines in green and insert the four red lines. (copy and paste). You must put them in the proper position.

    Here’s all of the gadget code but you only need to add 2 lines after and 2 before the green sets. Remember your code might say gadget2 instead of gadget1, etc. Two of the red lines are optional comments, as they serve to identify the code if you need to remove it later. (<!– >) 
    _____________

    <b:widget id=’Gadget1′ locked=’false’ title=’Recent Posts’ type=’Gadget’>
    <b:includable id=’main’>

    <!– only display if not home page  –>
    <b:if cond=’data:blog.pageType == “item”‘> 

      <!– only display title if it’s non-empty –>
      <b:if cond=’data:renderingUrl != &quot;&quot;’>
        <b:if cond=’data:title != &quot;&quot;’>
          <h2 class=’title’><data:title/></h2></b:if>
        <b:if cond=’data:gadgetSnippet != &quot;&quot;’><data:gadgetSnippet/>
        <b:else/>
          <div class=’widget-content’>
            <b:if cond=’data:trackingUrl != &quot;&quot;’>
              <img expr:src=’data:trackingUrl’ height=’1′ width=’1’/>
            </b:if><iframe expr:height=’data:height’ expr:id=’data:moduleId’ expr:name=’data:moduleId’ expr:src=’data:renderingUrl’ frameborder=’0′ style=’width: 100%; display: block’>
            </iframe></div></b:if><b:else/><data:errorMessage/></b:if><b:include name=’quickedit’/>

    <!– added 9/2009 for non-homepage –>

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

  3. Press the blue Preview button to see that the gadget is hidden on the home page.

    If there are errors, just ‘clear edits’ and backtrack, otherwise ‘save template.’

Summary

You can use this method for any gadget by expanding your template and searching for the title you used in the sidebar. If you want to show something only on the homepage and not on single posts then instead of
<b:if cond=’data:blog.pageType == “item”‘>    use

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

If you found this post useful, leave a comment to let me know. Grab the BPWebnews tips button and share the luv with others. Get future posts in your RSS feed or by email.


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


24 Comments

  1. Thanks for sharing. It's a great step by step tutorial 🙂 Love it! I'll try it on my blog, hope its works sister.

  2. Welcome. Glad you found this post useful. I like your web design. Black/shades of gray are always dramatic. You have to watch the font color and size — grayish-white contrast is low (may need a color closer to white) and the font size is too small for people who don't have your 20/20 vision 🙁 I wouldn't want visitors to miss your content.

    Recent blog:=- How to Hide Blogger Widgets on Home Page

  3. Lee, I look forward to seeing how you use this conditional CSS. You have a unique blog design. I do worry that the side bar is only legible if you use the mouse hover — visitors just may not be interested enough to figure it out. You need the sidebar to help new readers navigate the site since there is no header menu…

  4. aw..( I'm sorry for posting an irrelevant comment here..) thanks ok I increased the opacity a little..but i'm working so i can replace it with little transparent png files as background, so i'll have the frosted glass effect and still be legible..
    i temporarily removed this conditional code because that "index" widget i was using was limited to displaying only 10 recent posts..still looking for a replacement.

    btw, something's wrong with the link 'About Blog Catalog' in your 'Learn How To:' section..

    Recent blog:=- "Recaptcha" Really Hates Spam

  5. Apparently you're hiding the entire second sidebar on a single page. Seems to me you want some of those widgets visible when someone comes in from a search engine to one post, e.g. the search box or googlefriend. To answer your question, you can not have the post column width resize to be wider when you hide the second sidebar. At least not very easily — it would take some CSS tricks involving testing for hidden column and using a different post width. So I recommend you may want just one sidebar and then specify which widgets to hide. Otherwise move a widget to sidebar2 so that it always shows something…

    Recent blog:=- How to Show Blogger Table of Contents by Label Name

  6. Nothing is impossible but you may have to pay a CSS/HTML person to change your template. You're better off widening the post column by the width of the middle side bar, move all widgets to the right sidebar and eliminate the middle sidebar — on home and single pages. then selectively show widgets on homepage, etc. If you don't know basic CSS/Html you may have to hire someone or find a friend but this method suits your purposes more. Or you can find a nice single sidebar template! Why pay for something you may throw away later…

    Not sure where you got the template but you can ask their support people… Let me know how it works out.

    Recent blog:=- How to Show Blogger Table of Contents by Label Name

  7. Yes, this might be the best solution of all. Anyway, I'll try around cz i do love the middle sidebar 🙂 If you feel like, i can attach you the template to test.

  8. I'd give you the code if I could see the solution quickly (I did view the CSS and source) but this one is not simple. If you like the middle bar, why do you want to not show on single page? The post text has 475 characters, plenty of space. So I suggest you move a couple of things to always show in the right sidebar.
    You can even have a video on single pages or 'popular post…' etc.

    Maybe the designer can tell you how to delete the sidebar-wrapper and let the 2 sidebars float. Use flexible widths for post and rightsidebar but keep the middle at 165 fixed, then maybe if one is omitted the other 2 will expand. not sure, just guessing. But I don't have time to experiment…

  9. Hello Jenn, I like it when readers add value to the mix! This is great. Decreasing load time is very important on its own. Not to mention, the goal to reduce widgets that might distraction from your great content. Let me know what the stats show.

Comments are closed.