23 December, 2013

Blogger: Different Styling for different page type

Sometimes we want to hide or reorganize the structure of our blog layout.
The syntax of the blogger is somehow complex or maybe you're not familiar with.
So here is the solution:

which we can use this solution to rearrange our layout.


E.g. I want to show the right panel when the pagetype is index page or static page. You can see my home page.
But if you go into some item page, I don't want you to see the right panel.
So how to implement it?

  • Step 1, assign class to body element:
<body expr:class='data:blog.pageType'>



Page type
Class name
Index pages .index
Post pages .item
Archive pages .archive
Static pages .static_page 

  • Step 2, add css rules:
e.g.
.item #primary
{
   width:750px;
   margin:0px 20px;
    padding: 10px;
}

.item #secondary
{
   display:none;
}

Please check my blog to see how it works.