Thursday, 14 March 2013

Sliding Image Navigation Bar For Blogger

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(http://4.bp.blogspot.com/-GpnKGJiVNjk/UUGch1Hr0DI/AAAAAAAAAN0/WDxASvAJZt8/s1600/abstract.png) repeat scroll 0%;
}

.jimgMenu ul li.people a {
 background: url(http://3.bp.blogspot.com/-QuvywsZmvLI/UUGcigEKpvI/AAAAAAAAAOA/cxAW2YIWH0I/s1600/games.png) repeat scroll 0%;
}

.jimgMenu ul li.nature a {
 background: url(http://4.bp.blogspot.com/-qu_q-bRmKO8/UUGcj9P5mnI/AAAAAAAAAOI/_xZD9_LPq_o/s1600/nature.png) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
 background: url(http://3.bp.blogspot.com/--LC6tElMyFI/UUGchuzb_8I/AAAAAAAAANw/vDzCaADwMKY/s1600/car.png) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
 background: url(http://3.bp.blogspot.com/-FSHsIp3ao8c/UUGcj0CLAxI/AAAAAAAAAOM/KMfkg9PcNVI/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.
Share:

0 blogger:

Post a Comment

Custom Search Box

Subscribe Our Newsletter

Advertise With Us

Blog Archive