Slider hôm nay JM(quangvietmkt) giới thiệu ,thí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.
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 Content1.5- Tìm thẻ:
----------------------------------------------- */
.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;}
<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.
II- Thêm code slider cho blogspot
2.1- Vào mẫu => Chọn Chỉnh sửa HTML2.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/AVvXsEgDpr5Bd5WS7KtyQ1WmYdcEL3tQrlfnS_guhOT0cg0_kFsv-FHLpSRuo3gmHDrCrJiHT9aCU2BOnjHL9R18G7QDr0Nk38-6sOwYkHAjDkUpmXhP02S1pNI_XDVqe1363PcfdpPFf1xxDGB2/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/AVvXsEgOsXBho8gI8EGRK7-crqvHRXPy4Oy2nX1dWx8UB35WqOrc8w2NhtvV9juzkFmP3r9FegZOsOTSAE8eebIFNnp6QA-UJl0oGZyjFPzk8O9t5NCG9qzltmHzrlIFFDhL-7ZK63vOgtJXF7oc/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/AVvXsEjpJZ3SSnvivzpcEnQ6qJDXv0aiNx7jUC4ZKqdVe4Qk6p2x39aZCFKAF7uGa0c5T4tIfkjEIx2iBmdnknL9FIt1XmIDwzBftltkdL1wta-3PX299IPGjrPlJMyLPFFt_d8CbRf9hJsgbGRL/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/quangvietmkt.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/AVvXsEje8LBD9Zg6X2DuCa2YqrT_lSZgaqqsi-cS66E6l9I3QUGeiLpRXgGSkwJV0mCiXRh2UETRNuehc6GQDEqCj7J5CA5rGgfmpA_e8VqypFya3kxcJeC5tpBd2DNqrr4kyRS0cNR6GhTOyYj9/s500/cooltext987481804.png";
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("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</ul>
</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: "click", //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>
</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".
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:
28- Lưu tiện ích lại và xem kết quả nha.
No comments:
Post a Comment