Hide one of sidebar widgets in homepage blogger

Previously, we have discussed the trick to remove the post widget in homepage in blogger. Apparently, there is a new question similar to the question, i.e. “what if it is the one of sidebar widget that we try to hide, so the sidebar widget will not appear in the homepage, but it appears in the single posts”.
Can it be? The answer is yes, and it’s easy and simple to do that. Such a trick is usually done to make a blog look more attractive and is assumed to be more interesting than ever.
Before we enter the tutorial to hide one of sidebar widgets in homepage, we had better equate the perception about the terms that Kang Rohman uses, i.e. Homepage and Single Post.
Homepage here means the front page of a blog, e.g. Kang Rohman has a blog with the homepage address as http://www.blogspottutorial.com. You can see this address at your browser address bar.

Single Post is the full page of an article. It is when you read an article fully, i.e. by clicking the title of the article or if the blog uses “read more function”, you can click the words “read more”. The address of a single post is the combination of homepage address and the title of the article. Below is one sample of Single Post URL.

Well, now you should’ve got it, so let’s go to the point.
The first step you have to do is to identify the sidebar widget that you want to remove in the homepage. You can use a method, i.e. by knowing the title of the sidebar widget. Do the following instructions.

Knowing Sidebar Widget from its title

The easy way to know the sidebar widget to remove from the homepage, in my opinion, is from the sidebar title. From that, we will know the ID of the widget. Follow the steps below.

• Please login to blogger with your ID
• Click Design.
  
• Click Edit HTML.
  
• Find the code similar to: <b:widget id='HTML14' locked='false' title='Tutorials For Beginner' type='HTML'/>
  <b:widget id='HTML11' locked='false' title='Blogger Templates Gallery' type='HTML'/>
  <b:widget id='HTML4' locked='false' title='Latest Free templates' type='HTML'/>
  
• Every blog may have the different code, so Kang Rohman writes “similar”. Copy and then paste the above code on notepad or the like.

From the above illustration, Kang Rohman’s blog has three widgets, and the important things you should pay attention are the texts printed in red and orange, i.e.:

• HTML14   -   Tutorials For Beginner
• HTML11   -   Blogger Templates Gallery
• HTML4     -   Latest Free templates

The red-printed texts are the IDs of the sidebar widgets and the orange-printed texts are the titles of the sidebar widgets. Now we have known the IDs of the sidebar widgets and then we will choose which widgets that will disappear from the homepage, but will appear in the single post page.
In order not to make this tutorial come to a dead-end, we will see the following explanations of the IDs:
HTML14
Since it is an ID, in the CSS code, we will need the sign ( # ) to place in front of it, so it will be like this:
#HTML14
Creating the CSS code
The CSS code to mask or hide an ID in a web page is as below:
#ID {display:none}
For above ID, i.e. #HTML14, then the code would be like this:
#HTML14{display:none}
The above CSS code is to hide the widget permanently, while we want the widget to disappear in the homepage and appear in the single post. For this purpose, we can use the “If Condition function” in blogger.

CSS function using If Condition

The method we will use in this tutorial is the CSS with the If Condition function. The code to display a sidebar widget only in the single post is as below:

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#ID{display:none}
</b:if>
</style>

For this tutorial, we have used #HTML14 (only example), so the code would be like this:

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#HTML14{display:none}
</b:if>
</style>

Where do we place the code? We can place it below the code ]]></b:skin> or above the code </head>
Still confused? Just follow the steps below to place the code:

• Please login to blogger with your ID
• Click Design
• Click Edit HTML.
• Find the code ]]></b:skin>
• Copy and then paste the code below, exactly below the code ]]></b:skin> (Remember the ID here should be replaced with your own!) 

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#ID{display:none}
</b:if>
</style>

• Click SAVE TEMPLATE.
• Done. See the result.

From the long tutorial you have been reading from the beginning until here, the bottom line is only to install the CSS code using if condition, nothing else

However, perhaps you are wondering the reverse thing from above tutorial, i.e. how to display a sidebar widget only in the homepage, not in the single posts.
It’s very simple to solve this. Just pay attention the following code:

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#ID{display:none}
</b:if>
</style> 

So, you only need to replace the exclamation mark ( ! ) that is printed in red with the equal sign ( = ), and then the function of the code will be in reverse.

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#ID{display:none}
</b:if>
</style>

That’s all! :)) GL everyone

SUBSCRIBE VIA RSS FEED

If you liked the article on this blog, Please CLICK HERE to subscribe for free via email, that way you will get a shipment every article there is an article that appeared in HARAJUKU COLLECTION