How to Remove Sidebar & Default Headings in Blogger

Complete Guide on How to Remove Sidebar & Default Headings or Titles in Blogger - Dots Created

Removing sidebar and default headings can be applied to pages as well as posts of the blog but as posts are specific to a particular topic and should be in proper format to maintain the professionalism across the whole blog contrary to that pages are used to represent information or elements that are common to whole blog. So I recommend you to use these only for pages.

Pages are more of a collective information to the blog, and it’s always better to represent them in a clean and easy to follow format as they constitutes the important and crucial part of blog like contact forms, policies and other important sections. Sometimes the bloggers wants to customize the way their headings and content throughout the page works and in that case, the default one either should be removed or customized to new. 
If you like to create a new Heading for your page and want to customize it to put a soothing user interface, it’s always better to remove the default one from the page as it avoids redundancy and ensures better interface to the readers.
Also removing side bar clears more vacant space on left and right side of the page content and aligns the content box in centers. This vacant space around the important information brings more comfort to the reader’s eyes and more professionalism to the blog.
So let’s move ahead to the technical part…

How to Remove Sidebar in Pages/Post of BlogSpot:

Step 1: EDIT the page and toggle HTML mode from Compose mode as shown in Image below.

toggle HTML mode from Compose mode in blogger. Edit HTML in Blogger
Step 2: Paste this CSS styling some where in between the HTML code and update the page.

<style type=”text/css”>
.sidebar-wrapper {
display: none !important;
}
#blog-posts-wrapper {
width: 98% !important;
margin: 0;
.post {
width:98%}
</style>
Step 3: If even after this styling the side appears on the page, EDIT HTML of the template you are using and find the classes used for sidebar and replace with the ones mentioned in the styling above. Or you can let us know in comment section and we will try to help you out.

This is how a page looks like after removing sidebar. Screenshot taken from DotsCreated Website.

Dots Created Contact Us page without Sidebar in Blogger - Learn How to Remove Sidebar in Blogger  - Dots Created

How to Remove Default Heading or Title in Pages/Posts:

Step 1: EDIT the page and toggle HTML mode from Compose mode as shown in Image above.
Step 2: Paste this CSS styling at the beginning of the HTML code and update the page.

<style>
.post h1 {display:none !important;}
</style>
This will remove the default heading put up by blogger using the Title of the page.

Let us know of experiences and feedback in the comment section below. Also If you are facing any kind of difficulty applying these steps or in doubt, please comment below, we will be happy to help you.

Don’t forget to share it with your friends.

Leave a Comment