Monday, June 5

Use CSS :active Property in Blogger

Use CSS :active Property in Blogger

05:15
CSS :active is used to select and style the active link. Link becomes active when you click on it or when you are at the link page. These active links can be styled using CSS :active property. But if you are using blogger platform you will find that :active selector do not work on label pages. Which means you can not put any effect to links on label pages or category pages. For, demo check my category pages (desktop only).

Table Of Contents

Disadvantages of using simple :active in blogger

  1. You will have to put java scripts to run :active selector which will make your pages load slow.
  2. If you are using simple :active on label pages you will find the :active selector will not work when you click on next to view next posts.
  3. To use :active you will have to define all the selector (link , visited , hover etc.) of the link.

Alternate and best way to customize active links


The alternate and best way to highlight or customize links on blogger label pages is using conditional tag. Blogger have predefined label pages conditional tags which can be used as CSS. Codes inside the conditional tags only work when condition is true. Meaning if you use conditional tag to add CSS for a link then these CSS will only work when this link is active. Same true for label conditional tags , the CSS will only work for the described label page.

How to use :active in blogger label pages?


Step1: Add a Class to link - if you are already using class in links then skip this step.

Link for label page look like something ⇣

<a href="http://www.livthreads.com/search/label/blogger">BLOGGER</a>

Now add class="ltactive" to link before href tag ⇣

<a class="ltactive" href="http://www.livthreads.com/search/label/blogger">BLOGGER</a>

Step2: After adding class now search for ]]></b:skin> in your theme html codes and paste below conditional CSS after it.

<b:if cond='data:blog.searchLabel == &quot;blogger&quot;'>
<style>
.ltactive{

<< YOUR CSS FOR ACTIVE LINK HERE >>

</style>
</b:if>

Step3: Add CSS for active link and change green text with your label name, Save changes.