It can be frustrating when you're trying to remove a sidebar from a specific page or post in blogger. there isn't a lot of tutorials that you can follow to help you get around this. This post gives a hands-on approach to remove a sidebar that won't break your side.
I will show you exactly how to do it, please follow along with any post whether new or published, it all works like magic. normally you would first publish to get the post/page link (Recommended).
A sidebar is that column that appears, on one side of your website, especially blogs. it contains cards for easy navigation of the site and sometimes ads. When you have the sidebar the body content won't take up 100% percent of your site, you may find yourself wanting the body to take all the width of the page.
Here is where this tutorial comes in to address this challenge such that it doesn't feel daunting. For instance, in our case, we wanted to remove aside from the form builder page which included an iframe. after some time searching the internet, there was not enough help, and the one we found, though it gave us an idea it still had an issue, which broke the site.
Let's dive in. Remember we are dealing with a blogger site, not WordPress or any other Content Management system. if you're using anything other than blogger, you can request a tutorial down below. How to remove the sidebar from a specific page or post in blogger. step one is optional if you already know how to edit a blogger theme via HTML
Step one.
Go to login into blogger.com and in your dashboard select a blog you which you want to make these adjustments to if you have several blogger sites. You will be redirected to your dashboard if you're already logged in. Click theme from the left side navigation, then click the customize down caret, then click Edit HTML.
We recommend that you first backup your current theme. Just in case things break you can revert back to your original site and try again carefully.
Step two.
Click anywhere in the code, and click ctrl+F. Search id='main-wrapper'. Above the main or div tag add the following code.
<input expr:value="data:view.url.canonical" id="full_width" type="hidden" />
Replace the style or add a style as shown below
add style='width: calc(100% - 355px)'; to main-wrapper like below
<main id="main-wrapper" style="width: calc(100% - 355px);"> ...
</main>
Search all #main-wrapper styling in the css and make sure their width is set to 100% For instance, search for #main-wrapper { width:calc(100% - ($(sidebar.width) + 35px));} and remove width:calc(100% - ($(sidebar.width) + 35px));
Add the following CSS we will use, to fix things.
.no-sidebar {
width: 100% !important;
}
To be responsive on mobile add this.
@media only screen and (max-width: 980px)
#main-wrapper, #sidebar-wrapper {
width: 100% !important;
}
Search for aside or sidebar-wrapper. Add the following conditional with the aside tag in the middle. This means that if the page this not the one in the conditional expression, then execute to add the aside tag.
<b:if cond="data:view.url.canonical != "PASTE HERE THE LINK OF THE PAGE OR POST OF INTEREST"">
<aside id="sidebar-wrapper">
...
</aside>
</b:if>
Remember to add the link of your interest.
Save the code/ changes.
Step three.
Go back and move to the page or post you which to remove the sidebar, create one if you haven't already
Move the HTML view and include the following code below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(window).load(function() {
let Page_url = $("#full_width").val();
if(Page_url == "PASTE HERE THE LINK OF THE POST OR PAGE OF INTEREST"){
$("#main-wrapper").removeAttr("style");
$("#main-wrapper").addClass("no-sidebar");
}
});
</script>
Things did not move well, check out the work through by ShortTutorial (though it is not in English)
Publish or update the post Note: If the post is new, click permalink from the right navigation and copy the page link of interest. We wanna thank shorttutorial for the idea.
Check out the Form builder page we used for this post.