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.
- Find similar code like this:
- 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
<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'/>
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'>Because the ID it had already obtained #HTML6 (just an example), then the code becomes like this:
<b:if cond='data:blog.pageType != "item"'>
#ID{display:none}
</b:if>
</style>
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#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)
- Save template
<style type='text/css'> <b:if cond='data:blog.pageType != "item"'> #ID{display:none} </b:if> </style>
Description: Hide the sidebar widget on blogger Rating: 4.5 Reviewer: Zein Okeh - ItemReviewed: Hide the sidebar widget on blogger
0 komentar:
Post a Comment
Sorry if my english is bad