Highlighting current page tab in navigation bar

Let your readers know where they are on your blog. How? By highlighting the tab of the page they are currently viewing. See the demo on my widget showcase blog.

We can detect the current page by using conditional if tag in the navigation bar HTML code. Normally we would have to use one set of conditional if tags for each link/tab.

But if your navigation tabs is made of a LinkList gadget, you can reduce the tags to just one set.  Here’s how:

(Note: If you use a PageList gadget as a navigation bar, you can skip steps 2 and 3. The gadget already has a built-in current page detection code).

 

1. Finding the navigation bar LinkList code

1. Find the navigation bar’s widget Id (hint: the Id starts with “LinkList”, followed by a number). For the sake of this tutorial we will address the Id as YourWidgetId.
2. Go to Dashboard > Layout > Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates check box on top right of the HTML window.
5. Look for the navigation bar LinkList code by searching for the widget id you identified in step 1 (Use Ctrl+F). The code should look something like this:

   <b:widget id='YourWidgetId' locked='false' title='' type='LinkList'>
   <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>

2. Modifying LinkList code

1. Replace code line 7 with this code:

   <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'><data:link.name/></a></li>
   </b:if>

2. The final code will look like this:

   <b:widget id='YourWidgetId' locked='false' title='' type='LinkList'>
   <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'>
          <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'><data:link.name/></a></li>
          </b:if>
        </b:loop>
      </ul>

3. Highlighting the tab

To style the tab, you simply add a styling rule in CSS, like this: 

#YourWidgetId .selected {
background-color: #fff;
border-bottom: none;
/* add more styling declarations here */ 
}

And place it before ]]></b:skin> line in your template code.

Enjoy!

Adding a section (with Add a gadget link) in Blogger layout

A  section is an area in Blogger layout that acts as a widget/gadget container. It is sometimes mistakenly addressed a page element. In Layout > Page Elements tab, you can identify a section by the presence of an Add A Gadget link.

To add a widget, simply click the Add A Gadget link in your preferred location and proceed with selecting a widget. But what if your preferred location doesn’t have an Add A Gadget link? In other words there is no widget container there.

Well we can always make one, by adding a section tag in template HTML. Here is the code:

<!-- New widgets container Start -->
<b:section class='NewContainer' id='NewContainer'/>
<!-- New widgets container End -->

You are free to change the Id and class names.

In this tutorial we will add a section under the header. This is a perfect place to put horizontal navigation tabs. Here are the steps:

1. Go to Dashboard > Layout > Edit HTML.
2. Back up your template.
3. Since we are placing the new section under the header, we need to find the header code:

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
   </b:section>
   </div>

4. Paste the section code right below the header code, like this:

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
   </b:section>
   </div>
   <!-- New widgets container Start -->
   <b:section class='NewContainer' id='NewContainer'/>
   <!-- New widgets container End -->

5. Click Save Template.
6. Go to Layout > Page Elements to view the result. You should see a newly added section under the header.

   

7. Now you can add all the widgets you want into the new container.
8. To style the section, you simply add a styling rule in CSS, like this: 

   #NewContainer { 
   /* add styling declarations here */ 
   }

   And place it before ]]></b:skin> line in your template code.

9. That’s it, enjoy!

How to find Blogger widget Id and section Id

Let’s say you want to change the text color in one of your widgets, in the sidebar. You know this is done in the stylesheet and you can even find the code for the sidebar. But changing the code for the sidebar will affect the whole sidebar. Then how do you address only that particular widget?

You need something unique -an Id, a widget Id that is. With a widget Id, you can:

• Use it as a selector in stylesheet when styling the widget. ( To use an Id as a selector, you need to add the pound sign “#” as a prefix, as in #YourWidgetId {} ).
• Use it with Javascript getElementById method to access the widget content.

If you add a widget via Add A Gadget link in Page Elements, Blogger will automatically generate an Id for the widget, without telling you what the Id is. To find the Id, you’d normally have to search inside the template HTML code.

Well I have found a simpler and more straightforward way, without the need to go into your template HTML.

As an example I’m going to check my Recent Posts widget Id and the corresponding section Id. Follow me through the steps:

1. Go to Layout > Page Elements and locate the widget.
   
2. Click the Edit link and widget configuration window will pop up.
   
3. Notice there is an url of the widget on top of the window. What we are looking for is somewhere within that url.
4. Click maximize (the square icon) on top right corner of the window to view the window in full screen.
5. Now we can see the url in full (click for larger picture).
   This is the url: 

   http://www.blogger.com/rearrange? blogID=4979338887936179759&action=editWidget&sectionId=sidebar4&widgetType=null&widgetId=HTML4

There they are, sectionId=sidebar4  and widgetId=HTML4. So  the section Id is sidebar4 and my Recent Posts widget Id is HTML4.

Notice you can also find your blog Id (blogID) in the url.

Mission accomplished! Enjoy!

Put a widget inside a scroll box

My Tall Widget

With this CSS code, a scroll bar is automatically added if widget content exceeds the set height.

Scroll to see the rest of the content.

You've reached the end of the content.
Oh about the picture. See the tower next to Burj Khalifa? That could be your BlogList in a couple of years. So better put it in a scroll-box now :)

Has your BlogList grown so tall that it’s beginning to wear down your readers? Making them click the scrollbar over and over again just to view the next widget?

If you do, then it’s about time you stop it from testing your readers’ patience and taking over your blog valuable screen space. Put tall widgets where they belong -inside a scroll box.

This tutorial will place your widget content in a scroll box. The title will be held static, visible at all times.

Let us begin,

1. Identify which widget is going into a scroll box.
2. Find the widget Id.
3. Go back to Dashboard > Layout > Edit HTML. Find this line of code in your template:

   ]]></b:skin>

4. Add the code below immediately before (above) the line.

   /* Scroll box by Blogger Sentral START */
   #YourWidgetId .widget-content {
   height: 200px;
   overflow: auto;
   }
   /* Scroll box by Blogger Sentral END */

   • Replace YourWidgetId with the widget Id you got in step 1. (You can also replace the whole selector with any element Id and this code will put that element in a scroll box).
   • Change height as you like.

Here’s a live example -a Post Title List widget in my Blogger Widget Showcase blog.

Enjoy!

 

Before you leave:

• Do you find this article useful? Share it via Tweet This or Add This buttons below.
• Any suggestion, question or comment? Please post it in the comments below.