Assamtechtricks

Change the layout of each static pages of blogger

You might have faced problem in changing the layout of each static pages in Blogger blog. We all want to design or build our blog like a professional one, but problem arises when we think of changing the layout of static pages. Google blogger has no feature for customizing each of the static pages uniquely. But some customization in HTML codes of the blog template may turn it to the possible. Before get in to this tutorial you should know the exact width of the main-wrapper. I will explain the whole process in the following.

Part I
To know the width of main-wrapper
1) Go to Template-----Edit HTML
2) Click on Expand Widget Templates
3) Search for #main-wrapper by pressing Ctrl+F
4) Under #main-wrapper find the width, the code will be like


#main-wrapper
{padding:0px 0px 0px 10px;width:380px;
float:left;
word-wrap:break-word;
overflow:hidden;
}

In my case the main-wrapper is of width 380px
Now lets come to the main tutorial

Part II
Follow the following steps to change the layout of static pages
In this tutorial i will only show the method of changing the background, size of main-wrapper and also some customization of header, footer and sidebar.
1) Follow up to step (2) of part I
2) Search for ]]></b:skin> by pressing Ctrl+F
3) Just bellow ]]></b:skin> paste the following codes


<b:if cond='data:blog.url == &quot;your static page url&quot;'>
<style>
.header,.sidebar,.footer {display:none;}
#outer-wrapper {width: 660px; padding:0;}
#main-wrapper{background:url(background image url); width: 660px; margin: 0;}
</style>
</b:if>

4) Now change the highlighted yellow line with the URL of your static page
5) Change the highlighted green line with the URL of your background image, please note that the background image width should not be more than 380px (in my case) i.e., more than that of the main-wrapper width. Otherwise your page will not look good.
6) In the above codes I have kept header, sidebar and footer hidden. If you want any of them to show then simply delete the word from the codes.

This is all about the tutorial, to hide a sidebar or a footer from all static pages read the following tutorial