Slider trưng bày cho sản phẩm blogspot - Slider Otomatis Untuk Template Toko Online
Slider hôm nay namkna giới thiệuthích hợp với các blog chuyên về bán hàng qua mạng. Nó là một dạng trình chiếu sản phẩm khá đẹp được thiết kế bởi maskolis. Slider có khả năng tùy biến cao, tùy theo sở thích của mỗi người bạn có thể thay đỏi màu nền, số lượng ảnh thumbnail,  số ký tụ mô tả và tiêu đề,...

- Cấu tạo gồm các phần chính sau:

  + Phần 1: Hiển thị ảnh thumbnail lớn được lấy ngẫu nhiên trong bài viết. Nếu bài không có ảnh sẽ hiển thị ảnh no-image.jpeg
  + Phần 2: Hiển thị tiêu đề và mô tả cho ảnh thumbnail lớn.
  + Phần 3: Danh sách ảnh 7 thumbnai nhỏ được định bởi người dùng.

Các bạn có thể xem Demo bên dưới:

View demo

I- Tạo khung thêm tiện ích riêng dưới phần header cho tiện ích.

- Phần này mình hướng dẫn các thêm một khung add wiget trên bài đăng, bạn có thể bỏ qua.
1.1- Đăng nhập vào blog
1.2- Chọn Mẫu
1.3- Chọn chỉnh sủa HTML
1.4- Dán code sau trước thẻ ]]></b:skin>
/* Slide Content
----------------------------------------------- */
.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;} 
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}
.slide .widget {margin:0px 0px 6px 0px;}
1.5- Tìm thẻ:
<div id='main-wrapper'>
- Dán vào trước nó đoạn code bên dưới:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'/>
      </div>
</b:if>
Với các mẫu simple của blog bạn có thể thêm vào trước đoạn mã <div class='main-outer'>
1.6- Save template lại.
- Quay trở lại phần bố cục (layuot) bạn sẽ thấy một khung thêm tiện ích mới xuất hiện.
Tạo khung thêm tiện ích riêng dưới phần header cho tiện ích.

II- Thêm code slider cho blogspot

2.1- Vào mẫu => Chọn Chỉnh sửa HTML
2.2- Dán code sau vào trước thẻ ]]></b:skin>
.shadow{width:950px; height:39px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhheGi5uxLXvYsHU3dA2qznYNErBTz7FGVLJHs6sgmrvzHxLQZXLisq9nVLnU8MIG6CCu4haHi30eh5lvbkSLHd5RkmHvZqHFrTwqbobbCFvsIJrPRlBc2P0q51SvMdyrAmZCZUAOHMHn5-/s1600/shadow1-namkna-blogspot-com.png) no-repeat center;margin:0 auto}
#featured-slider{position:relative;overflow:hidden;width:950px;height:325px;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSHjHWCXgM1iwWmm84svC9d5ENDa_w4ADeBDOxwdPUMOFRNH_txOv-VSwfG4qUGznydw74QQ4ck7iS_9y2gW_9t2X4p4fO0Tcjmh35vL_jVUeRZDix26BAF-hJubDexDDJgLinf-pAAYMt/s1600/slider-bg-namkna-blogspot-com-1.png) repeat-x top;margin:0 auto;padding:0 auto}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:20px;top:10px;z-index:1;width:305px}
#featured-slider .contentdiv img{background:#fff;padding:2px;border:1px solid #ccc;width:297px;height:297px;overflow:hidden}
#featured-slider .sliderPostPhoto{position:relative;height:305px;width:305px;overflow:hidden}
#featured-slider .sliderPostInfo{position:absolute;top:0;left:345px;color:#a1a1a1;background:url();height:190px;width:540px;padding:5px 0 0}
#featured-slider .sliderPostInfo p{color:#0a0a0a;line-height:1.6em;font-size:14px;padding-top:1px}
#featured-slider .featuredPostMeta a{color:#a1a1a1}
#featured-slider .order a {display:block; width:98px; height:40px; bottom:14px; left:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkt1RcfcnKnQOBGYiO_pDjQocWqWU5YIqab8kuZHSgdm_YwoyPpxuGCwuKqBqbft4cEI81c2nslDUQbgJrY0ml25Qik4eMIwA3Gj1a87TrkEdmiq7IWFngRhb2EKBpbS2Mm4-MDEn4Labb/s1600/order-namkna-blogspot-com.png) no-repeat 0 0; position:absolute;  font-size:15px; line-height:13px; text-transform:uppercase; text-decoration:none; font-family: 'Open Sans', sans-serif; color:#fff; font-weight:700; padding:11px 0 0 6px;}
#featured-slider .order a:hover{ color:#515151;}
.featuredTitle{font:bold 24px Tahoma;color:#719429;line-height:1cm}
.featuredTitle a{color:#719429}
.featuredTitle a:hover{color:#0a0a0a}
#paginate-featured-slider{position:absolute;right:0;top:250px;z-index:1;width:595px;height:80px;overflow:hidden}
#paginate-featured-slider ul{width:595px;list-style:none}
#paginate-featured-slider .featured_thumb{float:left;margin-right:15px;width:65px;height:65px;padding:0}
#paginate-featured-slider .featured_thumb:hover{opacity:0.7}
2.3- Dán code bên dưới trước thẻ </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/66256041/slider/namkna.blogspot.com/slider-namkna.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDgPTRGMaiQgVREZADc5Iy_-RKZSj_2Byt8z6Qe1Kq-SGm6gHd7YGkvxBS3Fyvp3cZwKxulHvKALUA67FvrX1yqfWSuDb6GQfouJtNsdIH0S5jaWjvEyFsqEkMuOGHRZTqDpKYFCVW2cR/s1600/no-image-namkna-blogspot-com.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 400;
summaryTitle = 25;

numposts2 = 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 showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
 
  for (var i = 0; i < numposts2 ; 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"><div class="sliderPostPhoto"><a class="crop-foto" href="'+posturl+'"><img width="200" height="150" class="alignright" src="'+img[i]+'"/></a></div><div class="sliderPostInfo"><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">'+pcm+' Comments</a></span><p>'+removeHtmlTag(postcontent,summaryPost)+'...   <a href="'+posturl+'" class="meta-more">View Detail </a></p></div><p class="order"><a href="'+posturl+'">order!</a></p></div>';
document.write(trtd);    

 j++;
}

}

function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
 
  for (var i = 0; i < numposts2 ; 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 = '<ul class="featured_thumb"><a rel="'+i+'" class="toc" href="#"><img width="65" height="65" title="our product" alt="our product" class="featured_thumb" src="'+img[i]+'"/></a></ul>';
document.write(trtd);    

 j++;
}

}
//]]>
</script>
Tùy chỉnh:
- Nếu trong template của bạn đã có file Jquery rồi thì có thể xóa file màu xanh đi.
- Bạn nên downlad file slider.js về và upload lên host riêng để dùng lâu dài nha.
- summaryPost = 400; là số ký tự mô tả cho bài viết hiển thị.
- summaryTitle = 25; là số ký tự của tiêu đề baiw viết hiển thị.
- numposts2 = 7; số hình ảnh thu nhỏ hiển thị.
- showRandomImg = true; hiển thị hình ảnh ngẫu nhiên trong bài viết.
2.4- Thay thế đoạn code ở bước 1.5 thành đoạn code sau:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'>
<b:widget id='HTML82' locked='false' title='feature content slider' type='HTML'>
<b:includable id='main'>
<div id='featured-slider'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</ul>
</div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: &quot;featured-slider&quot;, //id of main slider DIV
contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
toc: &quot;markup&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
nextprev: [&quot;&quot;, &quot;&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
revealtype: &quot;click&quot;, //Behavior of pagination links to reveal the slides: &quot;click&quot; or &quot;mouseover&quot;
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>
</b:includable>
</b:widget>
</b:section>
      </div>
</b:if>
<div class='shadow'/>
2-5- Lưu mẫu lại.
2.6- Quay lại phần bố cục bạn sẽ thấy dưới phần header có một khung với tên "feature content slider".
Slider trưng bày sản phẩm theo nhãn cho blogspot
2.7- Bấm chuột vào chỉnh sửa (edit) và đánh tên laber muốn hiển thị trong slider vào phần nội dung:
Slider trưng bày sản phẩm theo nhãn cho blogspot
28- Lưu tiện ích lại và xem kết quả nha.