101 Blogging Tips: Tip #59 (Hiding Sidebars)

by | Dec 21, 2012 | 101 Blogging Tips | 0 comments

Thumbtack-purpleI'm excited to share this series with you, called "101 Blogging Tips". In the series there will be 101 blogging tips that you can begin applying to your blog today! Don't wait, get started now!

Tip #59: Want to create a page without sidebars?

In August 2011, I wrote a Newsletter (for newsletter subscribers only) that outline the process of creating landing pages. But today's focus is on creating "pages" that hide the sidebars!  Typically used for landing pages, but you can use it for any reason. 

In Tip #21 we discussed loading time, your site's loading time – how long does it take your blog's home page to load?  And in that article we discuss the use of landing pages and how they can improve your site's load time…and if hiding the sidebars….imagine how fast it will then load?

 

In TypePad

View this article by TypePad, although it is incorrect for the 3 column blog. You have to use the code I reference here. But you can view TypePad's article if you are using a 2-column blog.

First, create your page. At the very end after you edit….go to Edit HTML. You will then copy in the code below. 
Then DO NOT go back to the other view! Just click PUBLISH so it keeps these settings. (which shows a page with no sidebars). You can use this code on any other pages you create for your blog. 

This is if you are using a traditional, 3 column format, a sidebar on each side. If you have customized the CSS to make the width of your blog larger, then you need to set the 870px to the width of your blog.

<style> 

.layout-three-column #container { width: 870px;} 

.layout-three-column #alpha { width: 0px;} 

.layout-three-column #beta { width: 100%;} 

.layout-three-column #gamma { width: 0px;} 

</style>

You can see Jennifer's example her in her TypePad blog: 
http://www.anewinkonlife.com/a-new-ink-on-life/about-me.html   


In Blogger

Unlike the TypePad and WordPress approaches, the changes discussed here for Blogger applies to "all" pages you create in Blogger (not Posts, but Pages).

  • Go to Design, Edit HTML.
  • Find this code in your template HTML:

<body>
—–if you are using Layout templates 

OR

<body expr:class='"loading" + data:blog.mobileClass'>
—-if you are using Designer template. 

  • Right beneath it, copy and paste this code: 

<b:if cond='data:blog.pageType == "static_page"'>

<style> 

.blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important;}

 

#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}

</style></b:if>  

  • If using one of Blogger's Design Templates, replace

 

#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}

with this:

.main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;} 

  • Save changes and that's it. You're done with removing the sidebars for your pages!  

Since  Blogger does not have a "set front page" option like WordPress or TypePad, you need to purchase a domain and forward it to your new home page.

NOTE: Make sure you either have a navigation bar (or using the Pages gadget) or in the home page itself have links to your main blog area so visitiors can quickly find your posts and other areas of your blog!

 

In WordPress

This is best accomplished using Themes. Many WordPress themes have a full-width option. So when you are creating a Page, on the right side, you can choose Full-Width and that hide the sidebars. Yes, it's that easy!

Happy Holidays!!!!

Heather Wright-Porto
Blogs By Heather * WordPress Hosting * Buy a Domain * Stamping and Blogging

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest