Sliding Image Navigation Bar For Blogger

I have one more stylish navigation bar for blogger. This navigation bar is jquery powered and having a sliding effect on mouse hover. I hope it will be very useful for you and will attract the visitors in your blog. So, let's start the coding:

Follow The Instructions Below:

• Login to blogger and navigate to Template > Edit HTML > Proceed > Expand Widget Templates.
• Now, search for the code </head> and just before it, copy and paste this code:

<script src='https://pctricksguru.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='https://pctricksguru.googlecode.com/files/jquery-easing-1.3.pack.js' type='text/javascript'/>
<script src='https://pctricksguru.googlecode.com/files/jquery-easing-compatibility.1.2.pack.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function () {

  // find the elements to be eased and hook the hover event
  $(&#39;div.jimgMenu ul li a&#39;).hover(function() {
 
    // if the element is currently being animated (to a easeOut)...
    if ($(this).is(&#39;:animated&#39;)) {
      $(this).stop().animate({width: &quot;310px&quot;}, {duration: 450, easing:&quot;easeOutQuad&quot;});
    } else {
      // ease in quickly
      $(this).stop().animate({width: &quot;310px&quot;}, {duration: 400, easing:&quot;easeOutQuad&quot;});
    }
  }, function () {
    // on hovering out, ease the element out
    if ($(this).is(&#39;:animated&#39;)) {
      $(this).stop().animate({width: &quot;78px&quot;}, {duration: 400, easing:&quot;easeInOutQuad&quot;})
    } else {
      // ease out slowly
      $(this).stop(&#39;animated:&#39;).animate({width: &quot;78px&quot;}, {duration: 450, easing:&quot;easeInOutQuad&quot;});
    }
  });
});
</script>

• Now, search for the code ]]></b:skin> and just before it, copy and paste this code:

/* slider www.pctricksguru.com*/

.jimgMenu {
 position: relative;
 width: 670px;
 height: 200px;
 overflow: hidden;
 margin: 25px 0px 0px;
}

.jimgMenu ul {
 list-style: none;
 margin: 0px;
 display: block;
 height: 200px;
 width: 1340px;
 }
.jimgMenu ul li {
 float: left;
}

.jimgMenu ul li a {
 text-indent: -1000px;
 background:#FFFFFF none repeat scroll 0%;
 border-right: 2px solid #fff;
 cursor:pointer;
 display:block;
 overflow:hidden;javascript:;
 width:78px;
 height: 200px;
}

.jimgMenu ul li.landscapes a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkaiVhcpGg1El7hgRv6TTj5fo-Ps-Elo6cjKGhPunWIy4BP4MyXiSuvvpdS5SoGTHsIGggIFly25OrcXJz_e62fIcyRjnevDOEUIPaGHqw9z3_7IMLSTqcjyIfX-xe3OeDIhYstx-D9nM/s1600/abstract.png) repeat scroll 0%;
}

.jimgMenu ul li.people a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifIa9O1QXO11fdckUEwa7VXz-SYWhOIVLRer9Jya_CCfb658up05MAAynHGLuGIlCWj5SY8qgt6-cpwoyH9IePyX4s25XWj7fLnnXfNCPapXbE1lpKRwiVeqXGygHMSk-_UzP-PTMTbkE/s1600/games.png) repeat scroll 0%;
}

.jimgMenu ul li.nature a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2FFbqbezeU3o7xsID3oZd2Yn6xWU_7HM36c80OLNunn3F_gXer2Kyv3j3-idPzWQagHxsxLZEnr9f1Yk7hLXraoKs2F6SGNDP0Ffjd1f0PFRfmoxziW1pF2ifvX1gBRuOR0TrzJur_LU/s1600/nature.png) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSzKYdAEet0iHQ7C-m6ju5ej1iRx0dqHvT5ZjrshKIszwk3z90iHyF-aKbfyh3pXYlPNpN_p38XZqL1gVw-KeIkF3OQbUJkhgX4eCsuiXp3TXAhZsdLQveapPWen56qD4uQuO2x4kVPLs/s1600/car.png) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidePXVY7s848Yv7TnQ7VFyA0gMp05poOX1lKSltLN-Wlic6aBJwyoI5ztEEWr-auNTG_JoHMl2ueY__2TqSFUZyv9b4nk5dMnJaj0omrsvpHV-tFg-qAyJiSzWvUqLqWMSMG4aWu-MahU/s1600/landscape.png) repeat scroll 0%;
 min-width:310px;

}
.clear {
 clear: both;}

• Now, save the template.
• Go to layout and add a new HTML/Javascript widget.
• Copy and paste this code in the html content box:

<div class="jimgMenu">
  <ul>
    <li class="landscapes"><a href="#">Landscapes</a></li>
    <li class="people"><a href="#">People</a></li>
    <li class="nature"><a href="#">Nature</a></li>
    <li class="abstract"><a href="#">Abstract</a></li>
    <li class="urban"><a href="www.pctricksguru.com">Urban</a></li>
  </ul>
</div>

• Save the gadget and see your blog.

Note: Replace # with your target link and red text with your desired text.

See Demo Here