How to Hide or Show CSS Effect in a Specific Page of your Blog

In my previous tutorial, I shared to you on how to hide or show widgets in a specific page of your blog and it is quiet helpful especially if we try to focus our readers in our content only. But do you know that we can also show or hide CSS effect in particular page of our blog and some of our blog pages ? Sounds interesting! Please follow the steps below.

Hiding or Showing CSS Effect in a Specific Page of your Blog

Step 1. Select one of  the CSS Effect that you made in your page. You can found this above the
 ]]></b:skin tag of your template.

For example in my case I want to show only the effect of the following CSS in specific page in my blog.

.sidebar .widget {
border:2px dashed #FF0000;
padding:0;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
background-color:none;
}
.sidebar .widget:hover {
border:2px ridge #DF0101;
padding:0;
} 

Step 2. Now in order to show the above CSS in my choosen page, I used the Blogger conditional tag below

<b:if cond='data:blog.url == "URL of the page"'>

Step 3. Then I put a <style> tag  at the upper and lower part of the CSS like the one below:

<b:if cond='data:blog.url == &quot;http://codes2tipsandtricks.blogspot.com/2013/08/how-to-animate-moz-normal-border-in.html&quot;'>
<style>
.sidebar .widget {
border:2px dashed #FF0000;
padding:0;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
background-color:none;
}
.sidebar .widget:hover {
border:2px ridge #DF0101;
padding:0;
}
</style>
</b:if>

Step 4. Now, after I made that set of codes above, I placed it below the ']]></b:skin' tag.

Just follow the steps which I  illustrated above in order to show a CSS effect in your particular page.

Hiding CSS in Other Pages of your Blog

1. Show  CSS only in home page,

<b:if cond='data:blog.url == data:blog.homepageUrl'>

 2. Show CSS only in post pages

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

3. Show the CSS in a specific page as illustrated above

<b:if cond='data:blog.url == "URL of the page"'>

4. Hide CSS on a particular page

<b:if cond='data:blog.url != "URL of the page"'>

5. Show only CSS in a static pages

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

6. To hide CSS in a static page

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

7. Show CSS only in Archive pages

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

8. Hide CSS only in Archive pages

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

9. Hide CSS  in post pages

<b:if cond='data:blog.pageType != "item"

Hope you find this tutorial a helpful one!
Check also

• Content Spoiler or Show More/ Show Less Effect
• How To Add Go Up And Go Down Buttons Using The JQuery Slide Effect

Peace out to all bloggers around the world!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook