How To Show/Hide Widget Or Page Element In A Specific Part Of Blogger

U sing blogger is not as handy as WordPress. Though some users might argue with me, but it took a long time for me to setup my silly blog wi...

Using blogger is not as handy as WordPress. Though some users might argue with me, but it took a long time for me to setup my silly blog with blogger. While I have done quite easily and within a very short time via WordPress. Stay tuned, I am going to show my WordPress soon. But not now, today we are going to talk about one of the major blogger problem. Blogspot doesn't give user to customise each and every single post/page/archive on their own. Once you activate any widget, in your blog, it will be displayed in all the pages by default, including your homepage.But what if you want a certain widget to appear only on a certain page or pages, can it be done? Well, there is a hack to do it. Today we're going to show you how. If you have played with blogger for quite a few time, then you might already try to make an specific post/page unique (for example, you might want to design your about me page in a different way). So what to do? You can enable or disable some part, gadget in a specific post/page. Previously I have shared about how to add related post widget to blogger. In that trick, I have made that related post widget visible to only blogger posts. You might want to show it in all pages including home page, archive page. Or you might want to hide your sidebar, a specific widget on a static page. So let's learn how to do this.

Pre-Procedure

Go to Blogger’s Dashboard > Design > Edit HTML. Make sure to Backup Your Template before doing any change. Otherwise you can make it messy.

Now tick on “Expand Widget Templates”.

Getting started

We will use a simple HTML tag <b:if cond= > </b:if>to hide/view any part of your site. We will place the part we are playing with between this tag. We'll also use some blogger tweak here. So let's learn about them first.

  • data:blog.url == data:blog.homepageUrl : Uses to indicate homepage only.
  • data:blog.pageType == "archive" : Uses to indicate archive pages only.
  • data:blog.pageType == "static_page" : Uses to indicate blogger pages only.
  • data:blog.pageType == "item" : Uses to indicate post pages only.
  • data:blog.url == "URL of the page" : Uses to indicate a specific static page.
  • data:blog.url == "URL of the post" : Uses to indicate a specific post page.

Finding the Widget

Go to Dashboard > Design > Edit HTML. Check the Expand Widget Templates check box on top right of the HTML window. Find your widget in the HTML by using Ctrl+F and entering the widget Id in the search box. Like if you want to hide a Widget called “E-mail Subscription” , then you can search for E-mail Subscription. After searching you'll find a group of code like below.

<b:widget id="HTML1" title="E-mail Subscription" type="HTML" locked="false">
<b:includable id="main">

***********/Codes*******
.......................
.......................

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

To Show The Widget

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

***********/Codes*******
.......................
.......................

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

Now look closely on the red marked tag. Make sure that the <b:if> opening will go just below the opening of <b:includable> tag and it will end with </b:if> just before </b:includable>. Here this widget will show on homepage only. You can replace the data:blog.url == data:blog.homepageUrl value with any tag you want from the second step.

To Hide The Widget

If you have understand about how to show an widget in a specific place, then you can do the next step (how to hide an widget) easily. All that you need to do is to replace first = sign from data:blog.url == with an ! Sign. Quite easy, huh? So we just need to change a single sign from the previous code. Let's check out to hide the previous widget from homepage.

<b:widget id="HTML1" title="E-mail Subscription" type="HTML" locked="false">
<b:includable id="main">
<b:if cond='data:blog.url != data:blog.homepageUrl'>

***********/Codes*******
.......................
.......................

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

How To Hide An Element Using CSS

You can hide/show a widget with the previous trick. But what will you do when you need to hide a major page element like sidebar, footer? Well we'll use CSS to do this. The conditional <b:if> tag will remain same like previous – so you're not going to tell it again. Press Ctrl+F in Edit HTML tab and search for </head>. We'll place the CSS just before it. You have two find the CSS class/ID name for the page element you are going to show or hide. Like, on my site – if I'm going to hide sidebar than I have found that with .sidebar class name. So to hide sidebar from homepage, I need to paste the simple code above </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.sidebar {
display: none;
}
</style>
</b:if>

Replace .sidebar with your desired CSS value and also change data:blog.url == data:blog.homepageUrl as you did previously.

Feel free to comment here if you can't understand any part

2 comments :

  1. Thanks! I've been trying to find a site that would tell me how to do that. Blogger can be a pain sometimes!

    ReplyDelete
  2. Amazing writing. Your choice of subject is wonder full. Like to see more of your work. Wish you good luck.

    ReplyDelete