How To Create Blogger Static Page Neat & Clean

In This post I am going to explain you how to hide sidebar, footer and header on static page. I am working for this tip last 8 days and  I finally took the time to generalize this tips. Anyone can use the solution in this page, and you'll get what you want  I'm not going to repeat what this tutorial does. Or maybe I will. You get to hide your sidebars and use that space to widen your main posting area, on pages that you choose. You can apply this tweak both on your static pages and your post pages. I have already posted one article on this blog how to show widget only on home or post pages and static pages. when static pages first came out. Than again, Bloggers flexibility and permission to design your page as you like it is one of the main features for which so many people prefer this platform. with ths tip you can create a different Design for each of your static pages with adding few CSS Code Lines. The Adding Code in ths tutorial is to much easier and clear and result is very Beautiful like professional Blogger look. You can see Working Demo on this blog.

Live Demo

Adding this Beautiful Tweak to your blogger Static Pages is just in two steps. and you’re done.

First you need to check what is Tag used in your Template.

1. Go to your blogger Dashboard>> Pages >> and Create a New page. ( Create Blank Page Not a Send Readers to another web address)

and paste this code at the top of your static page, before the content and click preview. if all thing is ok write your content and click on publish.

<style type="text/css">
/*<![CDATA[*/
#footerwrapper,#sidebarwrapper{
height: 0; 
visibility; hidden !important; 
display:none !important;
}
.home-link {
display:none !important;
}
#credits {
display:none !important;
}
#contentwrapper{
float: Center; 
width: 100%; 
margin-left: 0; 
margin-right: 0; 
margin-top:20px; 
margin-bottom: -30px; 
padding-left: 0; 
padding-right: 0; 
background: #fbfbfb; 
color: #000000;
}
.post {
width: 95%; 
margin: 0 auto; 
padding: 0;
} 
.post h1 a {
 text-align: center; padding:5px;
}
/*]]>*/
</style>

What goes into the tags are CSS rules. It depends on what we are trying to change and differs between templates. In the code above, we Remove  blog footer, post footer, feed links and sidebar. This is done in code line 2 to 8. Widen the post area to fill up the spaces vacated by the sidebars. This is done in code line 5. If you want to do this too, find out what’s your header’s or header-wrapper’s width and apply it here.

Identifying and adding your own elements to the code

Your elements’ Ids and classes maybe different from the ones given in the code above. You can find yours by going through your template code. To get an idea what to look for, here’s a sample code snippet, taken from Blogger Tricks’s Template.

#sidebarwrapper,#footerwrapper,#sidebarwrapper, #credits, .home-link {

          height: 0;>

          visibility;

          hidden !important;

          display:none !important;

        }

    

As you can see an element, be it a division, a section or a widget is assigned an ID and/or a class. To remove it from the Page. For an ID you need to add “#” prefix and for a class, add “.” as prefix.

Need Help……!

I am showing in video below Which tags you need for hiding sidebar, header, menu, footer and footer credits. in this code I just add codes which is mostly used in blogger template if your template is with different ids search in your template. For example if you want to hide menu from static page your menu id look like this (#menu) I am not sure but mostly designer use this id for menu. if you cant find Please leave a comments or send me your template on my email address I will try to fix the code. which is compatible with your template. My Email Address is: Tricks.blogger@gmail.com. if this code is compatible with your template. your can change content area width, background Color. font style, font color, font size, if you know about playing with CSS Codes. I highlighted a few of them in blue,

Leave your Comments & Questions Below in Comment Box. Thanks for reading our post.