Tạo slider bài viết mới nhất cho blogspot giống hình Ipad đẹp và load nhanh

Tweet

Tạo slider bài viết mới nhất cho blogspot giống hình Ipad đẹp và load nhanh





Cách thực hiện:
- Chèn đoạn code sau vào nơi bạn muốn hiển thị
 <div id='slidertop-trungtam'>
<span class="label-hot"></span>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;http://www.thaiaiti.com/feeds/posts/default/-/Template%20blogger?max-results=&quot;+numpostsslidengang+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=sliderchayngangthaiaiti\&quot;&gt;&lt;\/script&gt;&quot;);
</script> </div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
auto:0,
scroll: 1,
speed: 300, visible: 4,
start: 0,
circular: true,
btnPrev: &quot;#previous_button&quot;,
btnNext: &quot;#next_button&quot;
});
})})(jQuery) </script>
 </div>
- Tiếp theo, chèn đoạn CSS sau vào trên  ]]></b:skin>

#slidertop-trungtam {float: left;width: 628px;overflow: hidden;background:#BB0F1D;height: 325px;border-radius: 6px;}
#carousel{position:relative;display:block;margin: 0 auto;}
#carousel h5{color:#fcff03;font: 12px arial;position: absolute;top: 268px;background:rgba(0,0,0,.7);padding: 5px;width: 177px;height: 18px;}
.label-hot {width: 83px;height: 83px;display: block;position: absolute;margin-left:545px;z-index: 9;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD_1HfWaf7g_UnUe17r5UXCuEJoCex1e2XqPNgH4pVf77WzAZGzvEF_UF3_fK0K6G8ugZs6pNt9Dq8RYXymYnNzuqyeiPQoVTirWPVxEZPmkipp7yrpjBa9uD4IEjp9kEHP97L4yL70sY3/s84/label-chonloc.png) no-repeat 0 0;}
#carousel .container{position:absolute;left:22px;width:584px !important;overflow:hidden;}
#carousel .thumb{float:left;margin-right:5px;}
#carousel .thumb img {float: left;width:186px;height:287px;}
#carousel #previous_button{position:absolute;width:35px;height:54px;top: 125px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTIxS4Ciojc2q1TbIQ_szmkO7byE2tnWyx-yfpq8O1CPsokF3DNeMYh3dBlWH4QD5ajA1SnA38ovfGGXCljbcnptN2BpCGJZlV6GehjgFZLBGRSbTbRKcWT2T5zhgZRDYaCD3HC0MbAF_m/s113/btn-slide-hot.png) no-repeat;
z-index:100;cursor:pointer;background-position: -32px -55px;}
#carousel #next_button{position:absolute;right:0;width:35px;height:54px;top: 125px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTIxS4Ciojc2q1TbIQ_szmkO7byE2tnWyx-yfpq8O1CPsokF3DNeMYh3dBlWH4QD5ajA1SnA38ovfGGXCljbcnptN2BpCGJZlV6GehjgFZLBGRSbTbRKcWT2T5zhgZRDYaCD3HC0MbAF_m/s113/btn-slide-hot.png) no-repeat;
z-index:100;cursor:pointer;background-position: 6px -55px;}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{display:inline;background: #eee;float:left;text-align:left;font:bold 11px Arial;border:1px solid #ff1c00;width:186px;
height:287px;margin:8px 0px 20px 5px;}
#carousel ul li a.slider_title{color: #fff;font: bold 12px arial;display: block;padding-top: 0;height:30px;overflow: hidden;
position: absolute;top: 233px;background:rgba(0,0,0,.7);width: 177px;padding:5px 5px 0px 5px;}
- Chèn đoạn code sau trên </head>


<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:true,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),ul=$("ul:first",div),tLi=$(".car",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var li=$(".car",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden","z-index":"2"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&div.mousewheel)div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return li.slice(curr).slice(0,v)};function go(to){if(!running){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll}else curr=to}else{if(to<0||to>itemLength-v)return;else curr=to}running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());running=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(el,prop){return parseInt($.css(el[0],prop))||0};function width(el){return el[0].offsetWidth+css(el,'marginLeft')+css(el,'marginRight')};function height(el){return el[0].offsetHeight+css(el,'marginTop')+css(el,'marginBottom')}})(jQuery);
//]]>
</script>
- ThaiAiTi chúc bạn thành công. Vui lòng để lại like để tác giả có nhiều chia sẻ hơn