Sliding Image Navigation Bar For Blogger

Hey friends, 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/AVvXsEizz-ChKtSrID-0qdCvWQeuODE5tqx8Iima6XBnZompjt5M9xSgfcR42lRMSJkal-neJmaJed83mT3x26jvhjCJ-NXhkxyFmgKGIKeRe7lzF5ZEZYWZ3J_zcoBTyFb0JU_CljfWPWeUT98/s1600/abstract.png) repeat scroll 0%;
}

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

.jimgMenu ul li.nature a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYjjvgXKh3qXAtH2Xs_WaAUfSOCzrsvXw0OGDt5n7sYLYVdjRayRzL9_P4XBkJTeX74IwM6_TMVp0x2kWOqO5qQlNaptughtwDNVA0_4Q6HZtypGEZ_Ymmnp5KTeFPLXzBCO3hn0NhcEM/s1600/nature.png) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6q5pMYv3L2A03Vk2Uan00ilrKRR5JM7dbBWWRYuJGlYoVz8Wnt-PWoQeJ3djFT42pXshEO8XFXaW-DZmHGhzXruHuWjZQsBcmvLuuIVkGZqEplaTMVarnoJRavbXDGRQjSNvRj_Xxkc8/s1600/car.png) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCmYZknz0mGbstHL1kt1EjBcwK6Y4PdppB_5qfUxVF-kNjOZxCoDFSe5hA7YtRUno2qkXL3MRiGmr1iGvrF5irdt942rHTYB3hLQWVic7B2lmPC2ieo4urXKIvc9pr3m_yApoPBT6BPmc/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