Apply CSS solely on Post Page, Archive page or solely a specific page on Blogger

This tutorial volition assist yous acquire how to homecoming a CSS entirely on post service pages or homepage, this is helpful if yous desire unlike pattern for home-page too post service pages. 

Blogger is a blogging platform that gives it users a uncomplicated too slow interface to work,but it’s non uncomplicated every bit it looks, at that spot are many things yous tin produce amongst Blogger. Have yous e’er imagined having unlike designs on domicile page too post service pages, that’s possible.

There are many reasons yous desire to convey unlike designs on homepage too post service pages, similar some of my stand upwards lone page similar ‘About me’ page don’t demo header, because I convey add together the CSS inwards page editor inwards HTML trend to enshroud it, this should travel done when yous desire a CSS trend entirely on 1 specific page.

But what if yous desire all post service pages to homecoming some CSS but non the homepage ? If yous convey e’er searched for ‘show gadgets on homepage only’ etc. You mightiness convey constitute an way to display a gadget entirely on homepage or post service pages, but what nearly CSS ? How to homecoming it entirely a post service page or homepage. 

It’s real slow nosotros volition role Blogger’s conditional tags.  

Not entirely HTML but yous tin too wind CSS approximately these tags, hence it entirely renders homepage or post-page, or anywhere yous define. 

Let’s enjoin if yous desire to enshroud header on the post service pages, hence nosotros volition produce this. Go to Blogger Dashboard > Template > Edit HTML > Now notice </head> too i volition order this CSS. 

<style type="text/css"> header {display:none !important;} </style>

Now this is non appropriate if yous desire it to entirely homecoming on  post pages, nosotros haven’t added the conditional tags yet. The next HTML too CSS volition enshroud the header on post service pages.  

<b:if cond='data:blog.pageType == "item"'> <style type="text/css"> header {display:none !important;} </style> </b:if>

You tin come across that I added the conditional approximately the CSS, this volition homecoming the CSS entirely on Post Page. 

You exactly convey to order those conditional tags approximately the CSS or yous tin too order it approximately a HTML to display it on post service page or Homepage.

Display an chemical cistron or CSS entirely on post service pages

This conditional tag volition demo the HTML/CSS  or whatever code entirely on post service pages. The role of these conditional tag has been written above. 

<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 showtime too the concluding trouble of this code is the status tag which decides whether code should wrapped within it should travel loaded or not.  Wrapping whatever code within this detail status tag volition charge the code entirely pages that are of type "item" i.e post service pages.

Display an HTML or CSS entirely on HomePage

Now this tag volition assist yous homecoming a CSS code entirely on homepage. Just recall to wind the CSS rules inwards a <style> tag earlier adding it within 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 entirely alter inwards the conditional tag hither is 'data:blog.url == data:blog.homepageUrl' this exactly agency if the weblog URL (which is the electrical flow page URL) is equal to the homepage URL hence charge the materials within it.

What is yous desire it entirely for a specific link on weblog ?

But sometimes yous may desire to charge or homecoming a code entirely on a specific page or a URL on your page. It tin too travel achieved amongst blogger’s conditional tag, hither the status attribute is a chip unlike every bit it compares for the weblog 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 yous desire the code to homecoming on. Example :

<b:if cond='data:blog.url == "">  <style type='text/css'> div { width:10px; height:10px; color:black; font-size:5px; } </style> </b:if> 

Or exactly on the Static Pages

Or if yous computer programme to charge a code on exactly static pages too hence 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 null to a greater extent than than conditional statements that checks for a status too if it is truthful hence performs the chore given to it too inwards our example it’s exactly parsing code.

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

Understanding this is non necessary but it tin travel helpful if yous computer programme to endeavour out to a greater extent than conditional things inwards blogger (and it’s fun to experiment amongst these designs). In the higher upwards code the snippet betwixt the double quotes afterwards cond is the affair that the parser on the server reads.

Each of the page on your weblog holds information for itself, information similar what type of page it is, what is its URL etc. So this variable data:blog.pageType volition output the type of the page. And hence using the comparision operator == we compare the value of  data:blog.pageType amongst static_page too if it matches the parser exactly includes the code within that detail conditional tag too is sent to the customer (browser).