Cách tạo Slider Blogspot với nhiều ảnh



Cách tạo Slider ảnh cho Blogspot .Slide ảnh này có 1 cái hay ho là nó sẽ hiển thị 1 list 5 ảnh và khi bạn hơ chuột vào ảnh nó sẽ hiên ra với cỡ lớn hơn ở phía trên có kèm theo tiêu đề và mà tả sơ qua bài viết Sau đây Bít Tuốt Xin chia sẻ với các bạn cách tạo 1 Slider này cho blog của bạn

Xem Demo

Cách tạo Slider ảnh cho Blogspot - Website

Bước 1: Đăng nhập vào Blog ==> template (Mẫu) ==> Chọn Chỉnh sửa HTML ==> Dán đoạn code sau vào trước thẻ đóng ]]></b:skin>.

#featuredContent{float:left;width:407px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpWfDUM3Q_b2zWtHckR6KzzVagPfF0VDrrMhJ3K4wxt6f37FMkjMpPpVCb-OSQyjzKE7wGQ2MPGj2yMqcy50f7N8eUpclZvTe_0LRyhMyAuVVQjsbF9UTt1lGwSZEMJZOmmDQx1M4BgoqW/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}

Chú ý: Các bạn down các ảnh từ link ảnh bôi mài xanh kia rồi up lên host riêng của mình để tránh trường hợp các file ảnh này bị xóa mất gây ra lỗi hiển thị.

Bước 2. Thêm đoạn code dưới lên trên thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
< script src='https://sites.google.com/site/seovnpro/contentslider.js' type='text/javascript'/>

< script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrtIQp7lvXPigSAazsoU94fIWZtpjxa0BctGdRLWRVW5uaJTcwzvy3VW1XrZFuYvyCHqfG0Td5iTxZJF6lJizac59zGdvO7veb9-ksy2P3_Y8D4Ok3LqAntvuZ1Ze805SP-9LvsUbozW0/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 100;
summaryTitle = 25;

numposts3 = 5;

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 showrecentposts3(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; 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 = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
    document.write(trtd);


    j++;
}

}

function showrecentposts4(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; 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><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
    document.write(trtd);

    j++;
}

}

//]]>
< /script>

Lưu ý:
- Nếu website hay blog bạn mà có dòng tương tự như này <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> thì các bạn ko cần phải thêm cái này <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> vào nữa.

Bước 3: Tìm thẻ sau: <div id='content-wrapper'> rồi dán đoạn code dưới đây lên trên thẻ tìn được
(Đây là cách tạo ra 1 widget dạng HTML/Javascript ,và cho phép nó chỉ hiển thị ở trang chủ.Các bạn không nhất thiết phải cho code dưới lên trên <div id='content-wrapper'> mà có thể cho vào vị trí tùy ý mà muốn hiển thị khác nhưng bạn phải có kiến thức chút về HTML, CSS )

<b:if cond='data:blog.url == data:blog.homepageUrl'>
< b:section id='slider' maxwidgets='1' showaddelement='no'>
< b:widget id='HTML96' locked='true' title='Accordion Slider' type='HTML'/>
< /b:section>
< /b:if>

Lưu ý:

- HTML96 - slider: Cái này bạn đặt tên ko được trùng nhé
- Accordion Slider: Tên của widget sẽ tạo

Bước 4: Nhấn lưu lại

Bước 5:  Quay lại Phần tử Trang tìm tới phần Layout(Bố cục) bạn sẽ thấy 1 Wiget mới với tên Accordion Slider bạn bấm vào chỉnh sửa (Edit). Xóa cái tên Accordion Slider đi và dán đoạn code bên dưới vào:

<div id='featuredContent'>
< div class='sliderwrapper' id='featured-slider'>
< script>
document.write("<script src=\"/feeds/posts/default/-/tên label của bạn?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
< /script>
< /div>
< div id='paginate-featured-slider'>
< ul>
< script>
document.write("<script src=\"/feeds/posts/default/-/tên label của bạn?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
< /script>
< /ul>
< div class='clear'></div>
< /div>
< script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
< /script>
< /div>

Chú ý: Nếu các bạn muốn slide ảnh này chạy theo nhãn thì để phần chữ màu đỏ trên giữ nguyên và thay tên Label bạn muốn hiển thị vào

- Nếu bạn muốn nó chạy bài mới nhất thì thay đoạn chữ màu đỏ thành : /feeds/posts/default?max-results

Chúc các bạn thành công !

Bài viết được viết bởi: bittuot.blogspot.com - Bít Tuốt Blogspot

Đừng quên nhấn LIKE và Chia Sẻ để ủng hộ Bít Tuốt nếu bài viết có ích !

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..