This tutorial will help you learn how to render a CSS only on post pages or homepage, this is helpful if you want different design for home-page and post pages.
Blogger is a blogging platform that gives it users a simple and easy interface to work,but it's not simple as it looks, there are many things you can do with Blogger. Have you ever imagined having different designs on home page and post pages, that's possible.
There are many reasons you want to have different designs on homepage and post pages, like some of my stand alone page like 'About me' page don't show header, because I have add the CSS in page editor in HTML mode to hide it, this should be done when you want a CSS style only on one specific page.
But what if you want all post pages to render some CSS but not the homepage ? If you have ever searched for 'show gadgets on homepage only' etc. You might have found an way to display a gadget only on homepage or post pages, but what about CSS ? How to render it only a post page or homepage.
It's very easy we will use Blogger's conditional tags.
Not only HTML but you can also wrap CSS around these tags, so it only renders homepage or post-page, or anywhere you define.
Let's say if you want to hide header on the post pages, then we will do this. Go to Blogger Dashboard > Template > Edit HTML > Now find
Blogger is a blogging platform that gives it users a simple and easy interface to work,but it's not simple as it looks, there are many things you can do with Blogger. Have you ever imagined having different designs on home page and post pages, that's possible.
There are many reasons you want to have different designs on homepage and post pages, like some of my stand alone page like 'About me' page don't show header, because I have add the CSS in page editor in HTML mode to hide it, this should be done when you want a CSS style only on one specific page.
But what if you want all post pages to render some CSS but not the homepage ? If you have ever searched for 'show gadgets on homepage only' etc. You might have found an way to display a gadget only on homepage or post pages, but what about CSS ? How to render it only a post page or homepage.
It's very easy we will use Blogger's conditional tags.
Not only HTML but you can also wrap CSS around these tags, so it only renders homepage or post-page, or anywhere you define.
Let's say if you want to hide header on the post pages, then we will do this. Go to Blogger Dashboard > Template > Edit HTML > Now find
</head> and i will put this CSS. <style type="text/css">
header
{display:none !important;}
</style>
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
header
{display:none !important;}
</style>
</b:if>
You can see that I added the conditional around the CSS, this will render the CSS only on Post Page.
You just have to put those conditional tags around the CSS or you can also put it around a HTML to display it on post page or Homepage.
Display an element or CSS only on post pages
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
div {
width:10px;
height:10px;
color:black;
font-size:5px;
}
</style>
</b:if>
The first and the last line of this code is the condition tag which decides whether code should wrapped inside it should be loaded or not. Wrapping any code inside this particular condition tag will load the code only pages that are of type
"item" i.e post pages.Display an HTML or CSS only on HomePage
Now this tag will help you render a CSS code only on homepage. Just remember to wrap the CSS rules in a
<style> tag before adding it inside the conditional tag. <b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
div {
width:10px;
height:10px;
color:black;
font-size:5px;
}
</style>
</b:if>
The only change in the conditional tag here is
'data:blog.url == data:blog.homepageUrl' this simply means if the blog URL (which is the current page URL) is equal to the homepage URL then load the stuff inside it.What is you want it only for a specific link on blog ?
But sometimes you may want to load or render a code only on a specific page or a URL on your page. It can also be achieved with blogger's conditional tag, here the condition attribute is a bit different as it compares for the blog URL.
<b:if cond='data:blog.url == "POST-URL-GOES-HERE">
<style type='text/css'>
div {
width:10px;
height:10px;
color:black;
font-size:5px;
}
</style>
</b:if>
Replace PUT-THE-POST-URL-HERE with the URL of the page you want the code to render on. Example :
<b:if cond='data:blog.url == "stramaxon.blogspot.com/2012/05/earn-money-online-by-writing.html">
<style type='text/css'>
div {
width:10px;
height:10px;
color:black;
font-size:5px;
}
</style>
</b:if>
Or just on the Static Pages
Or if you plan to load a code on just static pages and then this conditional tag is for you.<b:if cond='data:blog.pageType == "static_page">
<style type='text/css'>
div {
width:10px;
height:10px;
color:black;
font-size:5px;
}
</style>
</b:if>
How does this works?
These are nothing more than conditional statements that checks for a condition and if it is true then performs the task given to it and in our case it's just parsing code.<b:if cond='data:blog.pageType == "static_page">
Understanding this is not necessary but it can be helpful if you plan to try out more conditional things in blogger (and it's fun to experiment with these designs). In the above code the snippet between the double quotes after
cond is the thing that the parser on the server reads. Each of the page on your blog holds data for itself, data like what type of page it is, what is its URL etc. So this variable
data:blog.pageType will output the type of the page. And then using the comparision operator == we compare the value of data:blog.pageType with static_page and if it matches the parser simply includes the code inside that particular conditional tag and is sent to the client (browser).