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

Answer 2

Here is the code from my blogger

<ul>
    <b:loop values='data:links' var='link'>
      <b:if cond='data:blog.canonicalUrl == data:link.href + "?max-results=7" or data:link.isCurrentPage'>
        <li class='selected'><a expr:href='data:link.href + "?updated-max=01&amp;max-results=7"'><data:link.title/></a></li>
      <b:else/>
        <li><a expr:href='data:link.href + "?updated-max=01&amp;max-results=7"'><data:link.title/></a></li>
      </b:if>
    </b:loop>
  </ul>

I made a modification on the link result and I missed the URL's parameters, so I add this value inside the if condition tag

data:blog.canonicalUrl == data:link.href + "?max-results=7" or data:link.isCurrentPage

When I code the blogger Gdata, I didn't get anything from firebug, so I did the debugging process of the code to see some result inside the include tag then add an element to print out the result, for example to check URL's parameters:

<div>link url :<data:link.href/><br/>Canonical url :<data:blog.canonicalUrl/></div>