Attractive Sliding Hover Slideshow For Blogger

This is amazing slideshow for your blogger. All bloggers, need to make a attractive their blog. So ,today im going to explain,how to add sliding hover effect slideshow for blogger. Its jquery slideshow, which include CSS,HTML jquery Im include 5 post for this slideshow and you can link your post to this images. Attractive Photo Gallery With Jquery Zoom Effect is another Jquery image gallery.Follow these steps to add it to your blog.Im included demo for this post. you
can check it.

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 code by using Ctrl+F ]]></b:skin>

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

#slider {
  border:1px solid #aaa;
  border-top:none;
  margin: 0;
  padding: 0;
  width: 957px;
  height: 320px;
  overflow: hidden;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px; }
.kwicks { position:relative }
.kwicks li{
 width: 192px;
 height: 320px;
 display: block;
 overflow: hidden;
 padding: 0px; }
.fadeout {
  border-right:1px solid #aaa;
  display: block;
  position: absolute;
  right: 0;
  width: 300px;
  height: 320px;       
  z-index: 4;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh46sqo-tQocILEaHOUHTwKDOPxwyq_obMV1bxkIMtQw15G9tlwBhY09sDvOsZNWguqtS0wycSYv2nn3HyMAbM1YfKB3R7cZFaporVUquNomX7rkWzb88b15PIyLaliy0MFq9gTJR7XKvw4/) repeat-y scroll top right transparent; }
#kwick_5 .fadeout { border-right:none }
.kwicks.horizontal li { margin-right: 0px; float: left; }
.kwicks.vertical  li { margin-bottom: 5px; }
.kwicks .excerpt {
  background: #fff;
  color: #000;
  opacity: 0.9;
  filter:alpha(opacity=90);
  position: absolute;
  padding: 10px;
  bottom: 0px;
  display: block;
  width: 100%; }
.excerpt strong { 
    font-family: "Trebuchet MS",Arial,Helvetica,san-serif;
    font-weight: normal;
    letter-spacing: 0.4px;
    height: 76px;
    line-height: 26px;
    font-size: 14px;
    display:block;
    text-transform:uppercase; }

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

8. Paste below code Before </head> code

<script type='text/javascript'>//<![CDATA[
jQuery.easing['jswing']=jQuery.easing['swing'];jQuery.extend(jQuery.easing,{def:'easeOutQuad',swing:function(x,t,b,c,d){return jQuery.easing[jQuery.easing.def](x,t,b,c,d);},easeInQuad:function(x,t,b,c,d){return c*(t/=d)*t+b;},easeOutQuad:function(x,t,b,c,d){return-c*(t/=d)*(t-2)+b;},easeInOutQuad:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t+b;return-c/2*((--t)*(t-2)-1)+b;},easeInCubic:function(x,t,b,c,d){return c*(t/=d)*t*t+b;},easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b;},easeInOutCubic:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t+b;return c/2*((t-=2)*t*t+2)+b;},easeInQuart:function(x,t,b,c,d){return c*(t/=d)*t*t*t+b;},easeOutQuart:function(x,t,b,c,d){return-c*((t=t/d-1)*t*t*t-1)+b;},easeInOutQuart:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t+b;return-c/2*((t-=2)*t*t*t-2)+b;},easeInQuint:function(x,t,b,c,d){return c*(t/=d)*t*t*t*t+b;},easeOutQuint:function(x,t,b,c,d){return c*((t=t/d-1)*t*t*t*t+1)+b;},easeInOutQuint:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t*t+b;return c/2*((t-=2)*t*t*t*t+2)+b;},easeInSine:function(x,t,b,c,d){return-c*Math.cos(t/d*(Math.PI/2))+c+b;},easeOutSine:function(x,t,b,c,d){return c*Math.sin(t/d*(Math.PI/2))+b;},easeInOutSine:function(x,t,b,c,d){return-c/2*(Math.cos(Math.PI*t/d)-1)+b;},easeInExpo:function(x,t,b,c,d){return(t==0)?b:c*Math.pow(2,10*(t/d-1))+b;},easeOutExpo:function(x,t,b,c,d){return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b;},easeInOutExpo:function(x,t,b,c,d){if(t==0)return b;if(t==d)return b+c;if((t/=d/2)<1)return c/2*Math.pow(2,10*(t-1))+b;return c/2*(-Math.pow(2,-10*--t)+2)+b;},easeInCirc:function(x,t,b,c,d){return-c*(Math.sqrt(1-(t/=d)*t)-1)+b;},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+b;},easeInOutCirc:function(x,t,b,c,d){if((t/=d/2)<1)return-c/2*(Math.sqrt(1-t*t)-1)+b;return c/2*(Math.sqrt(1-(t-=2)*t)+1)+b;},easeInElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;},easeOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b;},easeInOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b;},easeInBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b;},easeOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b;},easeInOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b;},easeInBounce:function(x,t,b,c,d){return c-jQuery.easing.easeOutBounce(x,d-t,0,c,d)+b;},easeOutBounce:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b;}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b;}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b;}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b;}},easeInOutBounce:function(x,t,b,c,d){if(t<d/2)return jQuery.easing.easeInBounce(x,t*2,0,c,d)*.5+b;return jQuery.easing.easeOutBounce(x,t*2-d,0,c,d)*.5+c*.5+b;}});


/*
 Kwicks for jQuery (version 1.5.1)
 Copyright (c) 2008 Jeremy Martin
 http://www.jeremymartin.name/projects.php?project=kwicks
  Licensed under the MIT license:
  http://www.opensource.org/licenses/mit-license.php
 Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}  }h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);
$(document).ready(function() {
           $('.kwicks').kwicks({
    max : 700,
           easing: 'easeOutQuart',
    spacing : 0,
    });
});

//]]></script>

9. Go to blogger and click drop-down like 1st step and select Layout

10. Click Add Gadget and select 'HTML/Javascript"

11. Paste below code.

<li id="kwick_1">
<span class="fadeout"></span>
<div class="excerpt">
<strong>Your-First-Post-Title-Here-With-Description</strong></div>
<a href="Your-First-Post-Url-Here" rel="bookmark"><img src="Your-First-Image-Url-Here" width="700" height="320" /></a></li>

<li id="kwick_2">
<span class="fadeout"></span>
<div class="excerpt">
<strong>Your-Second-Post-Title-Here-With-Description</strong></div>
<a href="Your-Second-Post-Url-Here" rel="bookmark"><img src="Your-Second-Image-Url-Here" width="700" height="320" /></a>
</li>

<li id="kwick_3">
<span class="fadeout"></span>
<div class="excerpt">
<strong>Your-Third-Post-Title-Here-With-Description</strong></div>
<a href="Your-Third-Post-Url-Here" rel="bookmark"><img src="Your-Third-Image-Url-Here" width="700" height="320" /></a></li>

<li id="kwick_4">
<span class="fadeout"></span>
<div class="excerpt">
<strong>Your-Fourth-Post-Title-Here-With-Description</strong></div>
<a href="Your-Fourth-Post-Url-Here" rel="bookmark"><img src="Your-Fourth-Image-Url-Here" width="700" height="320" /></a></li>

<li id="kwick_5">
<span class="fadeout"></span>
<div class="excerpt">
<strong>Your-Fifth-Post-Title-Here-With-Description</strong></div>
<a href="Your-Fifth-Post-Url-Here" rel="bookmark"><img src="Your-Fifth-Image-Url-Here" width="700" height="320" /></a></li></ul>