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/AVvXsEjtHrSKAWw9fr9kkrs86Fgrr9zsXN20tKHxxLziOW49NMLYS8VngrlUyfkwBR2xoM-UGAv7QtUova4ZTSoXGdiffwVwoe1uzAkHPxF4i0XDI7fdSfiOyB4yGM8dB5TkfUDVTpw3KPsvBXg/s1600/abstract.png) repeat scroll 0%;
}

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

.jimgMenu ul li.nature a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXtx9yUteCfAq8_VgeYunYt7NEDCkjHocBbVgiJIXcCYMcKwHpEUfCM5GdhAaBzhlpMF4afEn3QtiY_OyudCox0w2vZEHNZ_YUn5YARiJDYrAhgKSD78RPe-AagPleI8RRI0JBj-OQhBE/s1600/nature.png) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5mkxWDeY1fcek8ZpBGupqF6inibg99qjDh-wCi5Zg4mLDzZdQX0FEKsbTzJQ7wxiWQT7622vllMJzSiON-zdqhTQ6sPLiveixNYPg3PS1N5xQOZcRsK1xv-X724Vn4KcvwEYBIebN1kg/s1600/car.png) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUFmpAU-tO-hWIliRkvY9sSAOVBrKkEpFa-kH3SOoeiNurANy9xZ_manBnLpBSrRLp7rE35nWAUerpbB2AKzT07AJ6iJMhFbNhTaKyTtN67P16MR9byxqpgLeLWJm4eDr2P6gV52bqV80/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

Posted in: BLOGGER TRICKS