Different Layouts on Different Pages (Blogger)

This is kind of a tweak like the  Hide Widget/Gadgets only with this tweak you can change the layout and background or pretty much whatever you want. This is more of a tutorial then a copy and paste tweak because every template is different and I cant give you a universal code that will work for everything. So instead I am going to walk you through this tweak and how it works. Feel free to ask questions or anything in the comment box below.

First you need to go to Design--> Edit HTML--> Click CTRL+F (A Text Bar will open up)--> Input code below.

</head>

This will locate that tag in your HTML page.

Directly before that tag you will want to use one of these codes below, depending on what page you want the layouts to be different on.

(These 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 blue text with the URL of the specified URL of your choosing.

We need to add a style tag and the CSS rules we want to change after the line of coding your 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. The blue is my Conditional tags code and followed with a closing b:if tag. The orange is to designate a CSS rule followed by a closing style tag.  Then the red is my 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.

Lets say I am using a older template and I want to have a different layout for the  static pages then I do for the rest of my 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>

What this code above would do is change my 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. And all this would only take place on the static pages, the rest of the blog would appear as normal.

The possibility's are endless for what you can do. 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.