How to Highlight Current Page Tab of navigation Tab In Blogger?

Using Conditional Tag we can Detect the page and by using CSS we will highlight the Page.Just we need to modify the Link List or Page List Widget then give them CSS classes and style them using conditionals Tag.Are we confusing you then do below and understand properly step by steps.

Customizing Navigation Tabs.

At first find the Widget Id of the Navigation Tab.If you don’t know how to find then you can learn from here.After identifying just do below steps.

1. Go to Blogger Dashboard>Template>Edit HTML
2. Back Up your Blog
3. Tick on Expand Widget.
4. Find this similar codes.

   <b:widget id='Linklist1'  title='' type='LinkList locked='false''>
   <b:includable id='main'>
   <b:if cond='data:title'>
   <h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <b:loop values='data:links' var='link'>
          <li><a expr:href='data:link.target'><data:link.name/></a></li>
        </b:loop>
      </ul>
   .....May be More contents here......

5. Just you need to find These Codes and if you use Page List then Line 1 may be different.(i.e instead of LinkList there will be pagelist)
6. Line 8 is reposible for showing links so replace that with these codes.

   <b:if cond='data:blog.url==data:link.target'>
   <li class='br-linkhighlight'>
   <a expr:href='data:link.target'><data:link.name/></a>
   </li>
   <b:else/>
   <li><a expr:href='data:link.target'><data:link.name/></a></li>
   </b:if>

7. Here we have used Conditionals Tags and added Class so now we can style with CSS.Finally Add this CSS in your Template

   .br-linkhighlight {
   background-color: #fafafa;
   }

8. Here in CSS you can change #fafafa to other six digit hex codes.You can get these HTML hex color codes from here.if you don’t know how to add CSS then you can learn from here.
9. Finally Click on Save Template then visit in your Blog you can see that tab are highlighted as your Wish.

Bye pals.Enjoy by Highlighting

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.