Monday, 5 June 2017

How to Create Full Width Page and Hide Sidebar in Blogger


Under:
No doubt, Blogger is a one of the best blogging platform though it is not so flexible. Being a blogspot user we thought that hiding a certain element on our webpage is quite difficult task and cannot be done. But we must know that it all depends on CSS and XML and we can easily hide or remove a certain element with the help of a little css coding. So today we are going to learn how to hide sidebar in your blogger blog and create a full width page with no sidebar.

Removing Sidebar and Increase Width of  Pages:

Just follow the below simple steps to hide sidebar in your certain blogger page or post :

1. Go to Blogger.com >> Add New Page/Post
2. Now select Edit HTML tab of Blogger Template.
3. Paste the following CSS :
<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:99%!important;} .post { width:99%!important; }
</style>

4. Replace width:99% according to your needs, you can even uses pixels instead of percentage i.e. 960px.
Additional Coding : If you also want to hide Titles from a certain page, then just paste the following code before </style> in above coding. ( it will not effect crawling as bots can easily see these things)

.post-title, .post-labels, post-icons, post-author {display:none!important;}

5. Now publish it and then visit your site to check your blog pages with perfect look.

This code hides the sidebar of your blog and gives a more professional look to your blog pages.
I hope you successfully publish your full width page/post. If you face any difficulty let me know in comments.

0 comments:

Confused? Feel free to ask!

We love comments! We appreciate your queries but to protect from being spammed, all comments will be moderated by our human moderators. Read our full comment policy here.
Let's enjoy a happy and meaningful conversation ahead!

 

Facebook

Recent Comments

Copyright © 2017 All Rights Reserved by BBeginner.Com ׀ Designed by Hammad Ansari. DMCA.com Protection Status