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
Thanks! I've been trying to find a site that would tell me how to do that. Blogger can be a pain sometimes!
ReplyDeleteAmazing writing. Your choice of subject is wonder full. Like to see more of your work. Wish you good luck.
ReplyDelete