Attractive Sliding Hover Slideshow For Blogger

Your-First-Post-Title-Here-With-Description

Your-Second-Post-Title-Here-With-Description

Your-Third-Post-Title-Here-With-Description

Your-Fourth-Post-Title-Here-With-Description

Your-Fifth-Post-Title-Here-With-Description

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/AVvXsEh9xIQ8sprrpHcmwQ5a-vCuFfQToHWUtRKoPcGJE5ya0ua-cRJApTvgcndObmbiUcGdfaOngU8wtXlGia71vXf3_3C9NUusi2AEHTyvVSYWkeXmBV2-Cm76HZbViPWKICBentS23ySp7Eew/) 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>

 *Replace with your URLs

12. Now save your template. You are done.