Find info about electronics prices, discounts, top deals in link, like US below.

Hide the sidebar widget on blogger


How to hide it is one of the sidebar widgets , sidebar widgets are removed so it will not appear on the front page or home page, but will appear on the single post page.

The trick is quite simple. This tricks are usually applied to make the blog more visible and more attractive to assume more interesting than usual.

Before getting into the tutorial, it helps us match the first perception of the Home Page and Single Post.

Home page in question is the front page of a blog, eg name of the home page of this blog its homepage address is http://new-ones.blogspot.com. To see this, you should pay attention to the address stated on your internet browser address bar.

While intended as a single post is a full page of an article. This is when you read an article in full, way is to click on the title of the article or by clicking the link read more. address a single post is a blend of address article home page with the title.
example : http://new-ones.blogspot.com/2011/10/microsoft-antivirus-mark-google-chrome.html.

The first step you should do is identify the sidebar widget  that want to be removed from the home page. The method used is the sidebar title dri recognize itself. Try to do the following:

Recognizing the title Sidebar from Sidebar Widget

An easy way to identify the widget in the sidebar that would remove from the home page is the title of the sidebar. From there it will be in the know the ID of the widget. The following steps:

  • Please login to blogger with your ID.
  • Click the Design.
  • Klik tab Edit HTML.
    Edit HTML on blogger
  • Find similar code like this:
  • <b:widget id='HTML6' locked='false' title='About us' type='HTML'/> <b:widget id='HTML9' locked='false' title='Subscribe Template Via Email' type='HTML'/> <b:widget id='HTML5' locked='false' title='Subscribe article Via Email' type='HTML'/>
  • Every blog is different code, so wrote that is similar to the above code. Copy the code was on the note pad or other text editor.
  • From the example above, blogs has 3 widgets, and that important you should notice is printed in red and orange that is:
  • HTML6 - About us
  • HTML9 - Subscribe Template Via Email
  • HTML5 - Subscribe  article Via Email
The Red text is the ID of the widget sidebar and orange text is the title or titles of existing widgets in the sidebar. From here of course we can already know the ID of each of the existing widget, and the next step is where the widget is in the desired order on the page home page does not appear, but on the single post page widgets can appear.
In order for this tutorial is not a dead end, Okay then we take the example for this ID:

HTML6

Since this is an ID, in the CSS code will only need to add a hash mark (#) in front of him, so it becomes like this:

# HTML6

Creating a CSS code

CSS code base to create an ID dI do not appear in a web page is like this:
#ID {display: none}
Because his ID was already in the know ie # HTML6, then the code becomes like this:
#HTML6 {display: none}


The problem is we do not want the widget is not in the show permanently, but only on the home page only, whereas in the single post page can appear. The solution of this is to use the function if condition in blogger.

CSS function using If Condition

The method will be used in this tutorial with CSS function using if condition. The code to display a sidebar widget appear only on single post is as follows:

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#ID{display:none}
</b:if>
</style>
Because the ID it had already obtained #HTML6 (just an example), then the code becomes like this:
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#HTML6{display:none}
</b:if>
</style>

Where to put the code? You can save it under the code

]]></b:skin>
or above this code
</head>

The following details how to setup:
  • Please login to blogger with your ID.
  • Click the design.
  • Click the Edit HTML tab.
  • Find the code
  • ]]></b:skin>
  • Copy and paste the following code under the code
  • ]]></b:skin> 
    (remember!The ID should be changed according to the template of your blog)
    <style type='text/css'> <b:if cond='data:blog.pageType != &quot;item&quot;'> #ID{display:none} </b:if> </style>
  • Save template
Good luck..!!


Description: Hide the sidebar widget on blogger Rating: 4.5 Reviewer: Zein Okeh - ItemReviewed: Hide the sidebar widget on blogger

Posted by: Zein Okeh Share Everything, Updated at: Thursday, October 13, 2011

0 komentar:

Post a Comment

Sorry if my english is bad

Related Posts Plugin for WordPress, Blogger...
Powered by Blogger.