But, today nosotros volition innovate a greatly novel as well as improved Slide on Hover Feature Post Widget for Blogger alongside JQuery effect. It volition alter the entire reflection of your blog. In this widget yous tin add together upwardly to 5 featured posts alongside their large images, titles as well as fiddling descriptions. So today nosotros volition going to Add Sliding on Hover JQuery Featured Post Widget for Blogger
How This Slide on Hover Slider Widget Works:
This is non an ordinary slider, it is totally dissimilar from all other sliders which makes it unique. Basically this Slide on Hover Slider consist of 5 featured posts as well as when always you'll house your mouse on whatever sure enough shipping service inwards the slider, it volition expand the shipping service that yous convey selected.
So I am sure enough yous would dear to come across the alive demo, thus hither it is laissez passer on it a seek earlier adding it to your blog.
So I am sure enough yous would dear to come across the alive demo, thus hither it is laissez passer on it a seek earlier adding it to your blog.
I am sure enough later viewing the alive demonstrate yous would dear to add together it inwards your blog. So without wasting whatever fourth dimension allow us start our mouse rolling on our tutorial.
Adding Style Sheet CSS to Blogger Template:
In every widget CSS plays anchor role, thus starting fourth dimension nosotros volition insert manner canvas to our blogger template
- So Go To Blogger >> Your Blog
- Now Click Template
- Now Backup Your template (Incase whatever affair goes wrong)
- Now Click on Proceed >> Edit HTML
- Now Search for the Following Code inwards your template alongside (CTRL+F Shortcut to Search)
]]></b:skin>
- So when yous found ]]></b:skin> then just higher upwardly it glue the next code.
/* MBL-Slide-On-Hover-Featured-Slider-Widget */
#slider {
border:1px enterprise #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 enterprise #aaa;
display: block;
position: absolute;
right: 0;
width: 300px;
height: 320px;
z-index: 4;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2QKTRVLNb4yADGbOh0nPEJN9ZB4nhms7NENW2k5ZWXT7HuXtJz4N0k-LqHzb5MuoHtaGG2JCYsfcXE59z8Msd36omM0pm6Bh2gSNLTYthuPYvXQ2PfWbrHFnltYChPNbx7M7nIAisodgD/) repeat-y scroll move past times correct 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 rigid {
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; }
- Now After Pasting the higher upwardly code inwards your template salvage your template past times pressing Save Template button
Adding JQuery Scripts To Blogger Template:
Now nosotros volition add together Jquery Scripts inwards our template to exercise so.
- Go to Blogger >> Your Blog >>
- Now Click >> Layout >> Add a Gadget
- Now Select >> Add HTML/JavaScript >> And as well as thus only paste the next code there
<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 nether the MIT license:
http://www.opensource.org/licenses/mit-license.php
Any as well as all occupation of this script must live accompanied past times this copyright/license honor inwards its nowadays 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>
- Now After pasting the higher upwardly code salvage the gadget past times pressing Save button.
Inserting The Basic Html Of slider:
Now nosotros volition insert the virtually of import thing, which is the basic HTML. It is the consummate construction of our widget. Where nosotros volition insert all of our featured shipping service details shape images to description.
- So Go To Blogger >> Your Blog >>
- Now Click Layout >> Add a Gadget
- Now Select >> Add HtML/Javascript >> And straightaway only glue the next code there
<ul class="kwicks horizontal" >
<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>
Customization:
To Customize your First Featured Post:
Replace Your-First-Post-Title-Here-With-Description with your shipping service championship as well as description.
Replace Your-First-Image-Url-Here with the URL of your image
Replace Your-First-Post-Url-Here with your shipping service URL
To Customize your Second Featured Post:
Replace Your-Second-Post-Title-Here-With-Description with your shipping service championship & description.
Replace Your-Second-Image-Url-Here with the URL of your image
Replace Your-Second-Post-Url-Here with your shipping service URL
To Customize your Third Featured Post:
Replace Your-Third-Post-Title-Here-With-Description with your shipping service championship as well as description.
Replace Your-Third-Image-Url-Here with the URL of your image
Replace Your-Third-Post-Url-Here with your shipping service URL
To Customize your Fourth Featured Post:
Replace Your-Fourth-Post-Title-Here-With-Description with your shipping service championship as well as description.
Replace Your-Fourth-Image-Url-Here with the URL of your image
Replace Your-Fourth-Post-Url-Here with your shipping service URL
To Customize your Fifth Featured Post:
Replace Your-Fifth-Post-Title-Here-With-Description with your shipping service championship as well as description.
Replace Your-Fifth-Image-Url-Here with the URL of your image
Replace Your-Fifth-Post-Url-Here with your shipping service URL
- Now After Customizing all v Featured Posts,Press the Save Button and View the Blog it would live perfect photograph finish!!!!!
The slider is even thus really much new, if yous experience whatever difficulties inwards adding this widget to your weblog experience gratis to ask. I would dear to aid you. So thats it for now, till as well as thus peace blessings as well as happy sliding :)
No comments:
Post a Comment