Tuesday, January 5, 2016

How to Hide Sidebar in Blogger (and Create Full-Width Page)

How to Hide Sidebar in Blogger (and Create Full-Width Page)

You might be asking "is it possible to hide the blog's sidebar and create a full-width page"? I'd say YES! Continue reading and learn how to do it. You may also visit my other post about how to make a static page as your blog's home page (instead of the blog posts feed).

Step by Step: [1] How to Hide Sidebar in Blogger and [2] Create a Full-Width Page

1. On Blogger dashboard, go to Template > select Edit HTML


How to Hide Sidebar in Blogger (and Create Full-Width Page)

2. On the Blogger's HTML Template Editor, find the code:

<b:template-skin>...</b:template-skin>
<b:include data='blog' name='google-analytics'/>

3. Below that code, add the following code to hide the sidebar:

<b:if cond="data:blog.url == &quot;PAGE-URL-HERE&quot;">
<style>
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer { display: none !important; }
.main-inner .column-center-innerwidth: 860px; margin-left: 0px; }
</style>
</b:if>

So it will look like this:
How to Hide Sidebar in Blogger (and Create Full-Width Page)

4. Change the [ PAGE-URL-HERE ] to the link of the page that you set as the home page (or any specific page where you want the sidebar to disappear). In my example, I command the code to hide the sidebar when the page http://thedreamnovel.blogspot.com/p/welcome.html was loaded.

5. Change the [ width: 860px ] depending on the width of your website. In my example, the full width of my blog is 860 pixels.

It should look like this now:

How to Hide Sidebar in Blogger (and Create Full-Width Page)

Questions? Comments? I'd love to hear from you! :)

No comments:

Post a Comment

Write your comment or message here.

Ads by Google