But, today nosotros volition innovate a greatly novel together with improved Slide on Hover Feature Post Widget for Blogger amongst JQuery effect. It volition alter the entire reflection of your blog. In this widget y'all tin sack add together upward to 5 featured posts amongst their large images, titles together with footling 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 unlike from all other sliders which makes it unique. Basically this Slide on Hover Slider consist of 5 featured posts together with when e'er you'll house your mouse on whatever for sure post inwards the slider, it volition expand the post that y'all accept selected.
So I am for sure y'all would dear to run into the alive demo, thus hither it is plough over it a endeavor earlier adding it to your blog.
So I am for sure y'all would dear to run into the alive demo, thus hither it is plough over it a endeavor earlier adding it to your blog.
I am for sure subsequently viewing the alive present y'all 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 kickoff nosotros volition insert mode 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 amongst (CTRL+F Shortcut to Search)
]]></b:skin>
- So when y'all found ]]></b:skin> then just inwards a higher house it glue the next code.
/* MBL-Slide-On-Hover-Featured-Slider-Widget */
#slider {
border:1px venture #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 venture #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 exceed 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 inwards a higher house 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 practise so.
- Go to Blogger >> Your Blog >>
- Now Click >> Layout >> Add a Gadget
- Now Select >> Add HTML/JavaScript >> And thus simply 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 together with all utilisation of this script must live accompanied past times this copyright/license detect 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 inwards a higher house code salvage the gadget past times pressing Save button.
Inserting The Basic Html Of slider:
Now nosotros volition insert the almost of import thing, which is the basic HTML. It is the consummate construction of our widget. Where nosotros volition insert all of our featured post details cast images to description.
- So Go To Blogger >> Your Blog >>
- Now Click Layout >> Add a Gadget
- Now Select >> Add HtML/Javascript >> And at 1 time simply 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 post championship together with description.
Replace Your-First-Image-Url-Here with the URL of your image
Replace Your-First-Post-Url-Here with your post URL
To Customize your Second Featured Post:
Replace Your-Second-Post-Title-Here-With-Description with your post championship & description.
Replace Your-Second-Image-Url-Here with the URL of your image
Replace Your-Second-Post-Url-Here with your post URL
To Customize your Third Featured Post:
Replace Your-Third-Post-Title-Here-With-Description with your post championship together with description.
Replace Your-Third-Image-Url-Here with the URL of your image
Replace Your-Third-Post-Url-Here with your post URL
To Customize your Fourth Featured Post:
Replace Your-Fourth-Post-Title-Here-With-Description with your post championship together with description.
Replace Your-Fourth-Image-Url-Here with the URL of your image
Replace Your-Fourth-Post-Url-Here with your post URL
To Customize your Fifth Featured Post:
Replace Your-Fifth-Post-Title-Here-With-Description with your post championship together with description.
Replace Your-Fifth-Image-Url-Here with the URL of your image
Replace Your-Fifth-Post-Url-Here with your post URL
- Now After Customizing all 5 Featured Posts,Press the Save Button and View the Blog it would live perfect photograph finish!!!!!
The slider is nevertheless rattling much new, if y'all experience whatever difficulties inwards adding this widget to your weblog experience gratis to ask. I would dear to attention you. So thats it for now, till thus peace blessings together with happy sliding :)
No comments:
Post a Comment