Monday, October 19, 2009

[Blogger Hacks] Different look for Home Page and Post Page

It is some times quite nice to have two different layouts for your blogger blog home page and post page. Main reason behind it is to highlight the post content more in the post page and give a general overview of your blog in the home page. It will definitely increase the reader ship of your blog.


Default Blogger templates dose not follow this kind of layout. It is pretty much running the same template for the home page as well as for the post page. But it is quite possible to do a pretty decent two different layout for home page and post page.

As you know CSS will come in handy in this process and you need to have a little idea about how CSS is working and get things done in CSS in order to make it work. Only reason why I am telling this is that from CSS you can control the layout as you want and it totally depends on the layout you want to have. I can alway help in that case if you tell me what exactly you want to achieve. If you feel bit lazy you can find so many advanced template in blogger template sites.

Let have a look how we going to control the Blogger blog layout. Before you start make sure that current template is backed up and keep it in a safe place.

There is a HTML code that you can use to check whether you are in a blogger blog post page or different page.

That is

<b:if cond='data:blog.pageType != &quot;item&quot;'>


This will only apply the code inside this tag when you are not in blogger post page. That means when you are in your home page it applies the code inside this if condition.

Best part is you can apply the same condition for the style sheet of your blog. That mean you can have two different style sheet for your blog. One will apply when you are in home page and the other one applies when you are in the blogger post page.

Following is a sample CSS with the conditions.


#main-wrapper {
width:780px;
float: $startSide;
}

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>

#main-wrapper {
width:380px;
float: $startSide;
}

.post-labels{display:none;}.post-author{display:none;}
.post-backlinks{display:none}

.post-body{padding:0px;}
</style>
</b:if>


This CSS will control your blog template as follows. In the homepage it will make your posts width to 380px and when you go to post it will be 780px. Also when you are in the home page it will not show you the labels, author or the backlinks option. But it all will be there in the post page.

This is just a sample and you can do many things base on your imagination. So if you need any help I would love to help you getting your blog cool. Leave comment or use the contact me form to drop a message.
Blog Widget by LinkWithin