Stylish jQuery Image Menu For Blogger

• Landscapes
• People
• Nature
• Abstract
• Urban

In this  tutorial im gonna   explain,  how  to add jQuery photo  slider   for   blogger.  This  will  be   really  cool with     blogger.  You  can    add    it    above     to  your blogger  post with nice  looking  images  with  links  to your blog post.For this slider we are using jQuery  and jquery-easing  effects. Check  below link  for demo.Its not hard to add to your blog. Get my earlier slideshow

post here

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* slider www.bloggertrix.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/AVvXsEjw3QhvzpqSjMsiQY_cpi1c1feXynHsn9GKwfIAdW-b_ezkLwwrCu1ZxIF2g6dZGwdKPrcAM8jSdT6pvESv_uugXJX7OVeE7lWWMlVORhnkMqrpg6NcUIqaF9GtShyphenhyphenB0Jj8OMJrZS7AdXk/s1600/abstract.png) repeat scroll 0%;
}

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

.jimgMenu ul li.nature a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxKNiiKIeYQ5ctgP99VRqawIi554xHFd5ZjOs1cLaSur-7BWLPs9SFPs-Y2IAiqUdsi4ZoEKI7Qg_O_oijO2zayfNe2vbqLED6-QBpq-8v6mU-4FJWuewr2BVOhoPDEyvzZzqJArw6VWU/s1600/nature.png) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4oZQWuzfRc8jGVlkLlV5Ap-zqGYxDT2sMaUydXV7t8MExXsfKp54hEPj0O4YXmAFO8rwkAqOK4DOW6PyZ8fM0_PsoZsb9sHmH9-qofMPTDWF5n_PSjrv-xdUkc0xT3TaJOPsqQN2vIpQ/s1600/2010-gqbycitroen-concept-car.png) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVTrsCYKnV1N4WIbuzKkKuFZLA-8cZqgbdQIt08ynXK_i27vOL5S3mNlDj43gvasnzIr3voitjBzB6xUuL6MXFzsadWnu83NsPD5vzf_MUDcB13YSiFa7kT4mIxk4NGJc6lYQMt91BhE/s1600/landscape.png) repeat scroll 0%;
 min-width:310px;

}
.clear {
 clear: both;}

7. Again Find this tag by using Ctrl+F    </head>

8. Paste below code Before </head> tag

<script src='http://bloggertrixcode.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://bloggertrixcode.googlecode.com/files/jquery-easing-1.3.pack.js' type='text/javascript'/>
<script src='http://bloggertrixcode.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>

9. Go to blogger and click Layout

10. Click Add Gadget and select 'HTML/Javascript

11. Paste below code.

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

You can change images links on 6th step code.

12. Now save your HTML/Javascript'.
    You are done...