Slider hiển thị bài mới theo label cho Blogspot

Tweet

Thêm 1 mẫu Slider bài viết đẹp và chuyên nghiệp cho Blogspot

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