Code Slider hình ảnh hoặc bài viết mới chạy ngang liên tục cho Blogspot - [TỔNG HỢP]



    Giới thiệu

    Hướng dẫn chèn code Slide hình ảnh hoặc bài viết mới hoặc bài viết ở 1 nhãn (Label) cố định với hiệu ứng trượt ngang tự động rất đẹp.

    Xin chào tất cả mọi người, lại là mình đây, hôm nay mình tiếp tục ra một bài viết mới đó là tích hợp Code Slider hình ảnh hoặc bài viết mới chạy ngang liên trục cho Blogspot, các bạn có nghĩ tại sao chúng ta phải nên tích hợp chúng vào Blog không, vì giúp ta tốt cho SEO Website chúng ta được tối ưu! Vậy chúng ta bắt đầu làm nhé! Hãy theo dõi các step dưới nha mọi người!

     Kết quả chúng ta làm là được như thế này

    - Hướng dẫn thủ thuật:

    Bước 1: 
    • Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
    Bước 2:
    • (Ctrl + F )Tìm đến ]]></b:skin> và dán Code dưới đây ngay trên nó
    Code:
    #carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
    #carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(http://2.bp.blogspot.com/-i9rfuXWNIjo/T5LAemTP3XI/AAAAAAAAArY/r7FcfxzgZpk/s1600/scroller-bg.png) repeat center}
    #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(http://3.bp.blogspot.com/-APGScJbAlLM/T5LDZ9LDgkI/AAAAAAAAAr4/vGy7EquPGME/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
    #carousel #previous_button:hover{background:url(http://3.bp.blogspot.com/-4wNqeM6eRvY/T5LGCrdA9iI/AAAAAAAAAsE/4rjwULz47WU/s1600/prev.png) center}
    #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(http://1.bp.blogspot.com/-pSHFy8ff1R0/T5LDZHkHIzI/AAAAAAAAArw/PCfZ762nK3E/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
    #carousel #next_button:hover{background:url(http://2.bp.blogspot.com/-vSaPjyDhEMI/T5LGB-g1_lI/AAAAAAAAAsA/wyUPBLWY15E/s1600/next.png) center}
    #carousel ul{width:100000px;position:relative;margin-top:10px}
    #carousel ul li{background:#fff url(http://3.bp.blogspot.com/-NsKF7TyEX7I/T418sIGTo7I/AAAAAAAAAnc/OdQmhV73piY/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
    #carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
    #carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
    #carousel ul li a.slider_title:hover{color:#cd1713}
    #carousel a img{display:block;background:#fff;margin-top:0}
    

    Bước 3:


    •  Tìm đến </head> và dán code dưới đây ngay trên nó
    Code:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script>
        //<![CDATA[
    (function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,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>
    
    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
    showRandomImg = true;
    aBold = true;
    summaryPost = 140;
    summaryTitle = 25;
    numposts1 = 15;
    label1 = "news";
    function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }
    
    s = s.join("");
    s = s.substring(0,chop-1);
    return s;
    }
    function showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img = new Array();
    document.write('<ul>');
    for (var i = 0; i < numposts1; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }
    
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
    pcm = entry.link[k].title.split(" ")[0];
    break;
    }
    }
    
    if ("content" in entry) {
    var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
    var postcontent = entry.summary.$t;}
    else var postcontent = "";
    postdate = entry.published.$t;
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];
    for(var u2=0;u2<month.length;u2++){
    if(parseInt(m)==month[u2]) {
    m = month2[u2] ; break;
    }
    }
    
    var daystr = day+ ' ' + m + ' ' + y ;
    var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
    
    document.write(trtd);
    j++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>
    

    Tùy chỉnh theo ý bạn:
    numposts1 = 15; là số bài sẽ được gọi từ feed..
    label1 = "news"; là tên của nhãn muốn gọi.
    summaryPost = 140; là số ký tự mô tả
    summaryTitle = 25; là số ký tự phần tiêu đề ngay bên dưới hình ảnh.
    width="145" height="100" là chiều rộng và chiều cao của ảnh thumbnail.
    showRandomImg = true; là lấy ảnh thumbnail ngẫu nhiên trong bài viết. Nếu muốn lấy ảnh đầu tiên thì hãy sửa true thành false.

    Bước 4:

    • Tìm đến <div id='main-wrapper'> và dán code dưới đây ngay dưới nó

    Code:
       
    <b:if cond='data:blog.pageType != "item"'>
    <div id='carousel'>
    <div id='previous_button'/>
    <div class='container'>
    <script>
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    <div class='clear'/>
    </div>
    <div id='next_button'/>
    </div>
    <script type='text/javascript'>
    (function($) { $(document).ready(function(){
    $("#carousel .container").jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: "#previous_button",
    btnNext: "#next_button"
    });
    })})(jQuery)
    </script>
    </b:if>
    

    Trong đó tùy chỉnh:

    Nếu muốn lấy bài viết mới  thì xóa phần /-/&quot;+label1+&quot; đi nhé
    auto:4000,
    scroll: 1, số bài viết cuộn mỗi lần.
    speed: 800, Thời gian chuyển ảnh (tính bằng phần nghìn giây).
    visible: 5, Số bài viết (ảnh thumbnail và tiêu đề) hiển thị trên trang chính.
    start: 0,
    circular: true,

    Lời kết

    Vậy trên đây là mình đã hướng dẫn cách các bạn coder hoặc cách tích hợp code đã có sẵn Slider hình ảnh hoặc bài viết mời chạy ngang liên tục cho Blogspot tốt cho SEO hơn! Trong quá trình các bạn cấu hình lỗi hoặc bị chổ nào coment bên dưới mình sẽ hỗ trợ nhé! Xin cám ơn