Deferent Layouts in Each Page of Blogger Template is Easy Now

This neat little tweak is similar to the  Hide Widget/Gadgets tweak I posted a couple of weeks ago – only with this tweak you can change the layout, the background, or pretty much whatever you want. This is more of a tutorial then just a copy and paste tweak because every template is different and I cannot give you a universal code that will work for everything. Instead I am going to walk you through this tweak and show you how it works. Should you encounter any problems just drop me a line in the comments.
1. Go to Design --> Edit HTML.
2. Search for (CTRL+F opens up a text bar where you can insert the code you are looking for):

</head>

3. Directly before that tag you will want to insert one of the codes below, depending on which pages you want the layouts to be different on. (These codes are called „Conditional“ tags.)
Homepage:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Post Pages:

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

Static Pages:

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

Specific URL:

<b:if cond='data:blog.url == "Blog Post URL"'>

Make sure to replace the text in blue with the URL of the post of your choosing.
4. Now you need to add a style tag and the CSS rules you want to change after the line(s) of code you just added.
Example:

<b:if cond='data:blog.pageType == "static_page"'> <style>
body { background:url(Image URL);}
</style>
</b:if>

I colored everything so I can break it down for you more easily. The line in green is the Conditional tags code. It needs to be closed with a </b:if> tag. The line in orange is to designate a CSS rule followed by a closing style tag.  The line in red is the CSS rule its self. You can add multiple CSS rules between the style tags.
Something like the code above would change the background for the older templates. For newer templates you will need to use a different code (you will find it in my next post).
Lets say you are using an older template and you want the layout for the static pages to differ from the rest of your blog.

<b:if cond='data:blog.pageType == "static_page"'> <style> body { background:url:(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png)repeat fixed center center;}
#sidebar-wrapper { display: none;}
#main-wrapper { width: 700px;} </style> </b:if>

With the code above you would change the background, the sidebar and all its gadgets would be hidden, the main blog post area would be wider to fill the space for the hidden sidebar. All this would only take place on the static pages, the rest of the blog would appear as normal.
The possibilities for what you can do are endless. I might suggest experimenting with it on a test blog before applying it to your main blog. If you have knowledge of CSS then you can figure it out pretty easily. On the new designer templates it might be a bit more difficult to do, but it all works the same. You just need to figure out the CSS rule to add.
That´s all!
Good luck!