How To Add Featured Post Content Slider to Blogger
This is very smart featured post content slider for your blogger blog or any other site.You can easily add or remove slides to this slider. Also it is very easy to configure. To add this content slider to your web site or blogger blog, follow the steps given below. You can see the demo of this widget HERE.
Tutorial : New slider was updated to scroll automatically.
1.First go to "Edit HTML" of your Blogger blog.
2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag .
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js' type='text/javascript'></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
/*!
* jCarouselLite - v1.1 - 2014-09-28
* http://www.gmarwaha.com/jquery/jcarousellite/
* Copyright (c) 2014 Ganeshji Marwaha
* Licensed MIT (https://github.com/ganeshmax/jcarousellite/blob/master/LICENSE)
*/
!function(a){a.jCarouselLite={version:"1.1"},a.fn.jCarouselLite=function(b){return b=a.extend({},a.fn.jCarouselLite.options,b||{}),this.each(function(){function c(a){return n||(clearTimeout(A),z=a,b.beforeStart&&b.beforeStart.call(this,i()),b.circular?j(a):k(a),m({start:function(){n=!0},done:function(){b.afterEnd&&b.afterEnd.call(this,i()),b.auto&&h(),n=!1}}),b.circular||l()),!1}function d(){if(n=!1,o=b.vertical?"top":"left",p=b.vertical?"height":"width",q=B.find(">ul"),r=q.find(">li"),x=r.size(),w=x<b.visible?x:b.visible,b.circular){var c=r.slice(x-w).clone(),d=r.slice(0,w).clone();q.prepend(c).append(d),b.start+=w}s=a("li",q),y=s.size(),z=b.start}function e(){B.css("visibility","visible"),s.css({overflow:"hidden","float":b.vertical?"none":"left"}),q.css({margin:"0",padding:"0",position:"relative","list-style":"none","z-index":"1"}),B.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"}),!b.circular&&b.btnPrev&&0==b.start&&a(b.btnPrev).addClass("disabled")}function f(){t=b.vertical?s.outerHeight(!0):s.outerWidth(!0),u=t*y,v=t*w,s.css({width:s.width(),height:s.height()}),q.css(p,u+"px").css(o,-(z*t)),B.css(p,v+"px")}function g(){b.btnPrev&&a(b.btnPrev).click(function(){return c(z-b.scroll)}),b.btnNext&&a(b.btnNext).click(function(){return c(z+b.scroll)}),b.btnGo&&a.each(b.btnGo,function(d,e){a(e).click(function(){return c(b.circular?w+d:d)})}),b.mouseWheel&&B.mousewheel&&B.mousewheel(function(a,d){return c(d>0?z-b.scroll:z+b.scroll)}),b.auto&&h()}function h(){A=setTimeout(function(){c(z+b.scroll)},b.auto)}function i(){return s.slice(z).slice(0,w)}function j(a){var c;a<=b.start-w-1?(c=a+x+b.scroll,q.css(o,-(c*t)+"px"),z=c-b.scroll):a>=y-w+1&&(c=a-x-b.scroll,q.css(o,-(c*t)+"px"),z=c+b.scroll)}function k(a){0>a?z=0:a>y-w&&(z=y-w)}function l(){a(b.btnPrev+","+b.btnNext).removeClass("disabled"),a(z-b.scroll<0&&b.btnPrev||z+b.scroll>y-w&&b.btnNext||[]).addClass("disabled")}function m(c){n=!0,q.animate("left"==o?{left:-(z*t)}:{top:-(z*t)},a.extend({duration:b.speed,easing:b.easing},c))}var n,o,p,q,r,s,t,u,v,w,x,y,z,A,B=a(this);d(),e(),f(),g()})},a.fn.jCarouselLite.options={btnPrev:null,btnNext:null,btnGo:null,mouseWheel:!1,auto:null,speed:200,easing:null,vertical:!1,circular:!0,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null}}(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/*!
* Featured Post Content Slider to Blogger
* http://www.bloggertipandtrick.net/featured-post-content-slider-blogger/
*/
jQuery(document).ready(function ($) {
$(".btt-slider").jCarouselLite({
btnPrev: ".btt-next", // CSS Selector for the previous button
btnNext: ".btt-prev", // CSS Selector for the next button
btnGo: null, // CSS Selector for the go button
mouseWheel: true, // Set "true" if you want the carousel scrolled using mouse wheel
auto: 2000, // Set to a numeric value (800) in millis. Time period between auto scrolls
speed: 1000, // Set to a numeric value in millis. Speed of scroll
easing: "easeOutBounce", // Set to easing (bounceout) to specify the animation easing
vertical: false, // Set to "true" to make the carousel scroll vertically
circular: true, // Set to "true" to make it an infinite carousel
visible: 1, // Set to a numeric value to specify the number of visible elements at a time
start: 0, // Set to a numeric value to specify which item to start from
scroll: 1, // Set to a numeric value to specify how many items to scroll for one scroll event
beforeStart: null, // Set to a function to receive a callback before every scroll start
afterEnd: null // Set to a function to receive a callback after every scroll end
});
});
//]]>
</script>
<style type='text/css'>
#btt-slidearea {
width: 680px;
height: 230px;
background: #242424;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
#btt-slidercover {
margin: 0;
padding: 0;
overflow: hidden;
}
.btt-slider {
overflow: hidden;
position: relative;
}
.btt-slidecontent {
position: relative;
margin: 0px 0px;
height: 200px;
width: 680px;
float: left;
display: inline;
color: #ccc;
font: 13px/18px 'Roboto',Georgia,century gothic,Verdana, sans-serif;
}
.btt-slidecontent img {
position: absolute;
left: 10px;
top: 10px;
padding: 5px;
background: #000000;
border: 1px solid #383838;
width: 270px;
height: 170px;
}
.btt-slidecontent ul {
list-style-type:none;
list-style:none;
margin:0px;
padding:0px;
}
.btt-slidecontent ul li {
list-style-type:none;
list-style:none;
margin:0px;
padding:0px;
height: 200px;
}
.btt-slidecontent a:link, .btt-slidecontent a:visited {
color: #fff;
}
.btt-slidecontent h2 {
font: 18px/22px Georgia,century gothic,Verdana, sans-serif;
margin: 15px 0px 5px 305px;
padding: 0;
font-weight: normal;
width: 350px;
height: 24px;
overflow: hidden;
}
.btt-slidecontent h2 a {
color: #fff;
text-decoration: none;
}
.btt-slidecontent h2 a:hover {
color: #eee;
text-decoration: none;
}
.btt-slidecontent p {
width: 350px;
margin: 0px 0px 5px 305px;
padding: 0;
max-height: 130px;
overflow: hidden;
}
.btt-slnav {
padding: 3px 0px;
background: #000;
}
.btt-prev {
float: left;
width: 24px;
height: 24px;
z-index: 200;
margin-left: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpCUOP0XAbCqeniHR6yjhkf8GsJL85OKsR7U5MGudCTkVRnv0FD7ud8Che2Cur1kkOq1wgyrgg1GJ26mB7d3MWpymJzMWSCfJhV5VSGmwDz79Q2vldoPggQ58e1zTkEfzV3a7CtZYJwR9y/);
}
.btt-next {
float: right;
width: 24px;
height: 24px;
z-index: 200;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2iLAJX3aJbMP7Jzqu3kq60tfe12Qg1fnvoEd74pa0EHH-b56EnKixDSP8hLTZWsUwXzo9s-IXLNcWNGCxzJ2COkQf4mKbJn4_-0MFK4yR33TqoHsVrIcvHPD3mXN_inIVEczs7rkWDLyQ/);
display: block;
}
.clear{
clear:both;
}
</style>
Note : If you need, Host prev.png and nxt.png images yourself.
4.Now go to "Layout" page and click on "Add a gadget".
5.Select "html/java script" and add the code given below and click save.
<div id="btt-slidearea">
<div id="btt-slidercover">
<div class="btt-slider">
<ul>
<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-1" title="#">Title-of-Post-1</a></h2>
<p>Slide 1 Description [...]</p>
<img src="Slide-1-Image-Address" alt="" />
</div>
</li>
<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-2" title="#">Title-of-Post-2</a></h2>
<p>Slide 2 Description [...]</p>
<img src="Slide-2-Image-Address" alt="" />
</div>
</li>
<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-3" title="#">Title-of-Post-3</a></h2>
<p>Slide 3 Description [...]</p>
<img src="Slide-3-Image-Address" alt="" />
</div>
</li>
<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-4" title="#">Title-of-Post-4</a></h2>
<p>Slide 4 Description [...]</p>
<img src="Slide-4-Image-Address" alt="" />
</div>
</li>
<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-5" title="#">Title-of-Post-5</a></h2>
<p>Slide 5 Description [...]</p>
<img src="Slide-5-Image-Address" alt="" />
</div>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="btt-slnav"><a href="#" class="btt-prev"></a><a href="#" class="btt-next"></a><div class="clear"></div></div>
</div>
Note : Replace URL-of-Post-X , Title-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.
Use width=270px and height=170px images for your slides.
And also you can add more slide to this slider.
For examplelook at the code below:
<div id="btt-slidearea">
<div id="btt-slidercover">
<div class="btt-slider">
<ul>
<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">Avatar (2009 film)</a></h2>
<p>James Cameron's epic motion picture, Avatar - in cinemas December 18th worldwide. In the epic action adventure AVATAR, James Cameron, the director of "Titanic," takes us to a spectacular new world beyond our imagination. On the distant moon Pandora, a reluctant hero embarks on a journey of redemption and discovery as he leads a heroic battle to save a civilization. [...]</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA6wOA3NG0hk0jLlHYVWo12xFM8CZFnMaRzNYg6Z40JhvXh30vnJTxVIx1do5k0zzHnNSTQvqeNIMbBO8biry1bEILNRDTFKBb_iX6AtcXn9hqbsTzQnE_Mqka0ijznapvzF0mzMu6Z2G9/" alt="" />
</div>
</li>
<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">2012 Movie</a></h2>
<p>The film briefly references Mayanism, the Mesoamerican Long Count calendar, and the 2012 phenomenon in its portrayal of cataclysmic events unfolding in the year 2012. Because of solar flare bombardment the Earth's core begins heating up at an unprecedented rate, eventually causing crustal displacement[...]</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglnsPMdsuDJAn181nxNNoFrQts7h-pbTflryEtoW6ankuLNJz6g2gOTDH3llNPgJsM9QX_OXdcJ9z1aIHoTtpYXhjw_sX6GyOmf9n_fF6WcFH-GreHDtjffetqIgrqzCdBaFUs-F6AoeF9/+movie.jpg" alt="" />
</div>
</li>
<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">I am Legend Movie</a></h2>
<p>The film briefly references Mayanism, the Mesoamerican Long Count calendar, and the 2012 phenomenon in its portrayal of cataclysmic events unfolding in the year 2012. Because of solar flare bombardment the Earth's core begins heating up at an unprecedented rate, eventually causing crustal displacement[...]</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiatSjyGan8_NdqZBaqyYGD4HbbQuLqOroIeFPqblB0OAF8dF4kC8LL-85OY4Q25O4NsosWZhJHt92N4ZPCuLiv4nWvEZC3jD__tKsauo3SAtkIT_63j_roNgwPXYhOLGDGgW_-qUlytjJV/" alt="" />
</div>
</li>
<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">Transformer Movie</a></h2>
<p>Transformers is a 2007 live-action-thriller film adaptation of the Transformers franchise, directed by Michael Bay and written by John Rogers, Roberto Orci and Alex Kurtzman. It stars Shia LaBeouf as Sam Witwicky, a teenager involved in a war between the heroic Autobots and the evil Decepticons[...]</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Sbdwg0QjHlZ_AuIGF0Kn-0Vl0F8EkUb0jYgYnoSrzyLPhNibZrjFiR-vMt7of0f4CLiahEZAHIMd_LkFtJHXmECuRcMPE4ZcsO6C-ElYy26uVtOUuib0T5RIr38yPktp4c04a-KOCJ3O/" alt="" />
</div>
</li>
<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">Max Payne Game</a></h2>
<p>Max Payne is a BAFTA award winning[1] third-person shooter video game developed by Finnish Remedy Entertainment, produced by 3D Realms and published by Gathering of Developers in July 2001 for Windows. Ports later in the year for the Xbox, PlayStation 2 and the GameBoy Advance were published by Rockstar Games[...]</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMhXjAcSfRRtNKltmo3KFEYWzN7OwrXClWUCsLiUlUK_kUJrDSuyjZ4DtKBBHqphsjy_8TlbUeFLU45e3DFmaKGzP42BYnnbM8qyA2A_lGAR3uVYYL1mHTtriaVKkZ3tVKmjDVWmitKi8P/" alt="" />
</div>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="btt-slnav"><a href="#" class="btt-prev"></a><a href="#" class="btt-next"></a><div class="clear"></div></div>
</div>
Now you are done.
0 Comments:
Post a Comment