How To Create A Blog Navigation Using The Blogger Labels Widget

In this tutorial you will learn how to create a Navigation Bar using the Blogger Labels widget.

We will use the Blogger Simple template and style it using the Twitter Bootstrap 3 framework.

If you want to follow the tutorial step by step but don't know how to apply the Blogger Simple Template and integrate the Twitter Bootstrap 3 framework, you can find a tutorial here.

1.

First off all, we will remove the Blogger Navbar so that it will not conflict with the static navbar we will create in this tutorial.

If you are unsure how to do this you can find a tutorial here.

2.

We will now start editing Blogger template. Go to Template --> Edit HTML

3.

We will open a div and add a Blogger section.

Add the following code right after the opening of the body tag:

<div id="header" class="navbar navbar-default navbar-fixed-top section"> 
 <b:section class='navbar' id='customnavbar' maxwidgets='1' showaddelement='no'>

 </b:section>
</div>

If you have also added the Twitter Bootstrap 3 framework as suggested above your blog will now look like this:

At this point we will also remove the entire Simple Theme CSS. Remove the entire content of inside the skin tag leaving only this:

<b:skin>
 <![CDATA[#Label2{margin-top:-1px}]]>
</b:skin>

4.

Now we can integrate the Labels widget into the Navbar. Add the folowing code to the Navbar you inserted at the opening of the body tag:

    <div class='navbar navbar-default navbar-fixed-top section' id='header'>
      <b:section class='navbar' id='customnavbar' maxwidgets='1' showaddelement='no'>
        <b:widget id='Label2' locked='false' title='Labels' type='Label'>
          <b:includable id='main'>    
   <div class='collapse navbar-collapse navbar-ex1-collapse navbar-right' role='navigation'>          
                <ul class='nav navbar-nav'>
                  <b:loop values='data:labels' var='label'>
                      <b:if cond='data:blog.url == data:label.url'>
                        <li class="active">
       <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
      </li>
                      <b:else/>
      <li>
                         <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                        </li>
                      </b:if>
                  </b:loop>
                </ul>
   </div>
          </b:includable>
        </b:widget>
      </b:section>
    </div>

We will also need to ad a bit of JavaScript to remove some of the classes Blogger adds, otherwise this will interfere with the styling. We are also adding the container class to one of the divs.

  <script type='text/javascript'>
    $(&#39;#Label2&#39;).addClass(&#39;container&#39;).removeClass(&#39;Label widget&#39;);
    $(&#39;#customnavbar&#39;).removeClass(&#39;section&#39;);
  </script>

You can add this code before the closing of the body tag.

Your Blog should now look like this:

5.

As a last step we can add the Blog Title to serve as a Home Button on the Navbar. Change the Navbar code to this:

    <div class='navbar navbar-default navbar-fixed-top section' id='header'>
      <b:section class='navbar' id='customnavbar' maxwidgets='1' showaddelement='no'>
        <b:widget id='Label2' locked='false' title='Labels' type='Label'>
          <b:includable id='main'>   
   <div class='navbar-header'>
          <button class='navbar-toggle' data-target='.navbar-collapse' data-toggle='collapse' style='margin-bottom:5px;margin-top:11px' type='button'>
             <span class='sr-only'>
               Toggle navigation
             </span>
             <span class='icon-bar'/>
             <span class='icon-bar'/>
             <span class='icon-bar'/>
          </button>
          <a class='navbar-brand' expr:href='data:blog.homepageUrl' style='padding:18px 15px 12px 15px;'>
             <data:blog.title/>
          </a>
        </div> 
   <div class='collapse navbar-collapse navbar-ex1-collapse navbar-right' role='navigation'>          
                <ul class='nav navbar-nav'>
                  <b:loop values='data:labels' var='label'>
                      <b:if cond='data:blog.url == data:label.url'>
                        <li class="active">
       <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
      </li>
                      <b:else/>
      <li>
                         <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                        </li>
                      </b:if>
                  </b:loop>
                </ul>
   </div>
          </b:includable>
        </b:widget>
      </b:section>
    </div>

Your Blog should now look like this:

You can now apply your own style on top of this or keep the Navigation as is.

Please leave your questions and suggestions in the comments section below