Google Blogger Template - Highlighting Active Tabs on Blog without using Jquery or Javascript?

Question

This question is about Google Blogger Template manipulation. People developing/changing or manipulating Blogger templates in any way know its syntax hence can provide some input.

Is there anything wrong in the below code:

<b:section class='navbar-collapse collapse' id='navbar' showaddelement='no'>
 <b:widget id='LinkList1' locked='false' title='navbar' type='LinkList'>
  <b:includable id='main'>
   <ul class='nav navbar-nav navbar-right'>
   <b:loop values='data:links' var='link'>
    <b:if cond='data:blog.url==data:link.target'>
     <li class='selected'><a expr:href='data:link.target'><data:link.name/></a></li>
    <b:else/>
     <li><a expr:href='data:link.target' expr:title='data:blog.url==data:link.target'><data:link.name/></a></li>
    </b:if>
   </b:loop>
   </ul>
  </b:includable>
 </b:widget>
</b:section>

Not sure why the comparison fails when I open the link: http://sandbox-mahavir-munot.blogspot.in/p/about-us.html

Below is the firebug output of the above executed snippet, The title attribute shows the result of the comparison when I open the URL: http://sandbox-mahavir-munot.blogspot.in/p/about-us.html in the address bar.

<ul class="nav navbar-nav navbar-right">
 <li><a title="false" href="http://sandbox-mahavir-munot.blogspot.in/">Home</a></li>
 <li><a title="false" href="http://sandbox-mahavir-munot.blogspot.in/p/about-us.html">About Us</a></li>
 <li><a title="false" href="http://sandbox-mahavir-munot.blogspot.in/p/contact-us.html">Contact Us</a></li>
</ul>

Any pointers to this is highly appreciated!!

Thank you in advance.

Mahavir Munot

Answer 1

I was able to fix this issue by modifying the snippet as shown below:

<b:section class='navbar-collapse collapse' id='navbar' showaddelement='no'>
 <b:widget id='LinkList1' locked='false' title='navbar' type='LinkList'>
  <b:includable id='main'>
   <ul class='nav navbar-nav navbar-right'>
   <b:loop values='data:links' var='link'>
    <b:if cond='data:blog.canonicalUrl==data:link.target or data:blog.url==data:link.target'>
     <li class='selected'><a expr:href='data:link.target'><data:link.name/></a></li>
    <b:else/>
     <li><a expr:href='data:link.target' expr:title='data:blog.url==data:link.target'><data:link.name/></a></li>
    </b:if>
   </b:loop>
   </ul>
  </b:includable>
 </b:widget>
</b:section>

I also had to modify the Blogger LinkList widget to change all the Non-Canonical URLs to Canonical URLs.

Here is the link to the conversation with the Blogger expert that helped me to fix this issue: Blogger Forum