How To Eliminate the Sidebar from Specific Pages in Blogger:
Warning: Always backup your template before making any changes and always preview before you save changes. This way you don't lose all the contents and layouts applied to your site.
The first thing you want to do is go to your Blogger Dashboard. Then find the blog you are wanting to make changes to and click on the "Design" link for that specific blog. Now up towards the top of the page you will most likely see: "
Page Elements",
Edit HTML and "
Template Designer". Click on
Edit Html.
Now that you are on the page hit Control F - this should bring up a search box function that will allow you to search the content of the page you are on for a specific query. Now type in /head . What should be highlighted in your pages HTML is the following tag/code </head> . Ok, don't do anything just yet - you will need the code below. But there are a few notes before we get there.
Sidebar names - many themes have different names for their sidebars - you may have to change the sidebar names to fit the names of your themes sidebars. Since my theme has 3 sidebars (named Sidebar, Sidebar2 and Sidebar3) I had to add additional "conditional tags" for each sidebar. Not everyone will have to do that.Not sure how to find the
names of your blogger sidebar? Read here.
Removing the sidebars is misleading what it does basically is makes the contents invisible but the space used by the sidebar is still there. So
to increase the width of the page so that the content spans the entire width of the page you will need to add a conditional tag. That is why you see the following code below
#main-wrapper{
width: 900px;
}
If you do not want to increase the width of the page where the sidebars are being removed then simply remove the code above from your code snippet below.
Next Highlight the following code snippet:
<b:if cond='data:blog.url == "http://your pages url goes here for the page where you want sidebar removed"'>
<style>
#sidebar{
display: none;
}
#main-wrapper{
width: 900px;
}
</style>
</b:if>
Here is what the code on my page used here (check out the difference between the main page and the Boutique) looks like and what I used to remove all three sidebars from my static blogger page and increase the pages width for this particular page:
<b:if cond='data:blog.url == "http://my pages url here"'>
<style>
#sidebar{
display: none;
}
<b:if cond='data:blog.url == "http://my pages url here"'>
<style>
#sidebar2{
display: none;
}
#main-wrapper{
width: 900px;
}
<b:if cond='data:blog.url == "my pages url here"'>
<style>
#sidebar3{
display: none;
}
</style>
</b:if>
Now go back to your page and
right above the tag
</head> paste the code. So it should look like this:
Pasted Code
</head>
If for any reason the above code does not work on your "Blogger" (blogspot) pages and you need help use the Contact me link at the top of the page to send me an email and I will do my best to find the code that will work for your pages.
Read More ->>
