How To Hide Sidebar on Home/Index/Posts/Static Pages on Blogger Templates

Today, I will introduce you an important and essential tips. Many of Blogger has blog on Google Blogger (Google Blogspot Blog) . Google provides us this blog for free.By a Google account we can use it free continuously.It have not only too much features but also so much features to control overall bloging .But, It gives us a limited Option tools on it to control easily .But,By using Programming Code we can customize and modify it on various types.The Tips is

How To Hide Sidebar on Home Page, Index Page, Posts Page, Static Page and Maximize main width.

Let's Start ;

Follow this instruction given below ;

1. At first , Login you blog and select the blog which template need to back up.

2. Click on template option from blogger Dashboard.

3. Now ,Back Up your template for your templates safety.

If ,You have no experience or idea about "How To Back Up Blogger Templates".

You can go through this link to know "How To Back Up Blogger Templates".

4.Then click on "Edit HTML"

5.After that press ctrl+f from your keyboard .After pressing you will see a "Search Bar" .

6. Type the code are given below on that Search Bar" and press enter .

</b:skin>

7. After finding that upper code Copy and Paste the given below code just After / Below upper code ( </b:skin> ) .

<b:if cond='data:blog.pageType'>
<style>
#sidebar-wrapper {display:none;}
#main-wrapper{width: 70%;float:left; margin: 0 auto;}
</style>
</b:if>

8. Now, You need to modify this code depending on your own wish or blogger template capacity or style.

Like:

( i ) #sidebar-wrapper : You must change it by your sidebar name which you want to hide .

( ii ) width: 70% : Change the width as your own wish .

( iii) <b:if cond='data:blog.pageType'> : You need to change it when you need to hide sidebar in specified location whether or not .

Now, I will provide you some code which will helps you to show or hide sidebar some fixed location .These are given below :

1. To hide Sidebar from Home Page

Use this code given below :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#sidebar-wrapper {display:none;}
#main-wrapper{width: 70%;float:left; margin: 0 auto;}
</style>
</b:if>

2. To hide Sidebar from Index Page

Use this code given below :

<b:if cond='data:blog.pageType == "index"'>
<style>
#sidebar-wrapper {display:none;}
#main-wrapper{width: 70%;float:left; margin: 0 auto;}
</style>
</b:if>

3. To hide Sidebar from Posts Page

Use this code given below :

<b:if cond='data:blog.pageType == "item"'>
<style>
#sidebar-wrapper {display:none;}
#main-wrapper{width: 70%;float:left; margin: 0 auto;}
</style>
</b:if>

4. To hide Sidebar from Static Page

Use this code given below :

<b:if cond='data:blog.pageType == "static_page"'>
<style>
#sidebar-wrapper {display:none;}
#main-wrapper{width: 70%;float:left; margin: 0 auto;}
</style>
</b:if>

5. To hide Sidebar from Fixed Page

Use this code given below :

Hints : You should need to change PAGE URL HERE by your web page link where to hide sidebar.

<b:if cond='data:blog.url == "PAGE URL HERE"'>
<style>
#sidebar-wrapper {display:none;}
#main-wrapper{width: 70%;float:left; margin: 0 auto;}
</style>
</b:if>

After all, Save Your Template and exit from there.

That's end .I wish everybody will be able to do it .

Tags: