17:24 - 04/08/2015

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

    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://lh5.googleusercontent.com/-eIB3U_exQfU/UhMNDBDFfZI/AAAAAAAAFVg/-VV745QYpyM/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://lh4.googleusercontent.com/-Y4GthWC5mQg/UhMMO5uR1KI/AAAAAAAAFVE/CRGA1DsW_C8/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://lh4.googleusercontent.com/-Y4GthWC5mQg/UhMMO5uR1KI/AAAAAAAAFVE/CRGA1DsW_C8/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

Bình luận & Góp ý
  1. cảm ơn bạn, chúc bạn thành công tốt đẹp, có cơ hội mình sẽ mua 1 template

    Trả lờiXóa