How To Remove Sidebar and Increase Width of Certain Pages:
The steps are straightforward and would hardly soak 10 minutes to complete so just do as follows.
- 1. Go to Blogger.com >> Add NEW Page/Post
- 2. Now select HTML TAB on Blogger Post Editor
- 3. Paste the following CSS and XML Code:
<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
</style>
4. Replace width:98% according to your needs, you can even uses pixels instead of percentage i.e. 960px.
Additional Tips: If you want to exclude Titles from a certain page, then just paste the following code before </style> in above coding. Bots and crawlers will continue to fetch your Title, but human visitors will not view them because with the help of CSS we have concealed them.
.post-title, .post-labels, post-icons, post-author {display:none!important;}
- 5. Now Publish it and then visit your site to witness a perfect full width page without sidebar.
How Does the Whole Process Works:
Now after successfully increasing the width of your page, you would be curious to learn how the whole process works. Fundamentally, there is no magic behind it because the whole credit goes to Style sheet (CSS). If you have noticed in above CSS, we have used {display:none !important;} which is responsible for hiding the sidebar and etc. Moreover, you can even use display:none to hide any widget from any page or post but make sure you attach proper CLASS Ids to complete the process.
Where and Why You Should Use Full Width in Pages?
Before we could jump onto our tutorial, let us first quickly rap up, where we can utilize the full-width pages. Now you may have seen those WordPress websites which uses stretched in size, whenever they want to add an Infographics to their posts. In that same way, you can either use them in about us or advertise here pages, so that you can gain maximum attraction out of your every visitor.
EmoticonEmoticon