Hướng dẫn cách tạo Slide ảnh dạng Joss Banget Slider cho Blogspot

Hướng dẫn cách tạo Slide ảnh dạng Joss Banget Slider cho Blogspot. Sau đây Bít Tuốt Xin chia sẻ với các bạn cách tạo 1 Accordion Slider cho blog hay website của mình.

Xem Demo

Cách tạo Joss Banget Slider 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>.

#featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
#featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
.featuredTitle a{color:#f7441a}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtG8knIqWDIWJiKW4peaFf807dxWfvEDjgq1_iBKTXkjkxl4lcfR-gCJdAwZnlgJl0SzYARSBkclESzXyy_t823YvwoOIc8U3H-wEGs9sFWwlw_adSmKNuTdgL8VC9g7wbxsB-UzfAqgM/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }
a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixmXRwCnx8x6m9elMt0g8buxAou1Bh8KECbwnRBeb3Iq3xJBdXuS1IO30EYGv71pKixz6Fuy5TdNVdfVam3WG6HSJ179ea-EJNlCsaMBaM7t9h8mfcGiLMeN18tcAGVMwwS_FefX0Aro0/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0}

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/jquery.innerfade.js' type='text/javascript'/>
<script src='https://sites.google.com/site/seovnpro/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrxfucvm9nSp0Xr71lR7nORMCkoihvPkisrw5IRua7QlI3nqtgzZKNSLGXRJDRWR2lZyl5DYDT2Z4-4kuZmLazYJhGsdmHRFKaTpg4WvsNBoknbXDp4hKsYysOXhwP6t4fBfh7KoiZbh8/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts  = 7;

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('<div class="slides">')
 if (numposts <= json.feed.entry.length) {
  maxpost = numposts;
  }
 else
       {
    maxpost=json.feed.entry.length;
    }
   for (var i = 0; i < maxpost; 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 trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';
 document.write(trtd);


 j++;
}
    document.write('</div>')
}

//]]>
</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='featuredSlider'>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/tên label cần hiển thị?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='navigation'>
<ul class='pagination'/>            <script>
$(&#39;.slides&#39;).cycle({
  fx:     &#39;fade&#39;,
  speed:  &#39;slow&#39;,
  timeout: 3000,
  pager:  &#39;.pagination&#39;
  });
</script>
</div>           </div> <!--end .container-->
</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