Tiện ích Slider ves 2 này được phát triển trên vesion 1 của maskolis, Với đôi chút cải biến về giao diện như: nó lấy ngẫu nhiên một ảnh thumbnail từ các bài viết mới nhất (recent post) và hiển thị dưới dạng một slider trượt ngang. Hiệu ứng chuyển ảnh mượt mà dựa trên thư viện JQuery
Các bạn có thể xem ảnh minh họa hoặc demo bên dưới:
¤ Slider bài mới nhất trượt ngang với thumbnail ves 2 cho blogger!
1- Đăng nhập vào blog
2- Chọn Mẫu (Template)
3- Chọn chỉnh sủa HTML (Edit HTML)
4- Dán code sau trước thẻ ]]></b:skin>.
#carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
te;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-
#carousel .container{position:absol
uright:5px;}
evious_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr7no50T6vPy6sJIQHRH9npQP3ahty5k0ONikPxGZomz7UanmiiwCX9ns0SLgygN_k92NL0_Qh4-Omq82ulxuI-n3laPntd_W-jsUKUu8HMmu8kxc8HK0C-8vwmnTicYzmXlyIX-fXChg/s1600/previous_namkna-blogspot-com.png) center;z-index:100;cursor:pointer;}
#carousel #p
r
carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEH5rJi2UyXPEBlGiKitbiALTTkUOHzA70-fWDx3R2kvRrU05p13OAInwVrP1RFVg7LYP7MrXRhRVJzkyGJ8VPG0bBuM6JMwUVRpgAEWihkxkr5COVCvMp7WSAXaePhucLVLHvH_qQKXQ/s1600/next_namkna-blogspot-com.png) center;z-index:100;cursor:pointer;}
#
carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
##carousel ul{width:100000px;position:relative;margin-top:10px}
t-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-
#carousel ul li{background:#ebebeb;display:inline;float:left;te
xtop:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}
» Tùy chỉnh:
- width:980px; là độ rộng của slider
- height:125px; là chiều cao của slider
5- 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://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>
script type='text/javascript'>
<//<![CDATA[
imgr = new Array();
om/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
imgr[0] = "http://2.bp.blogspot.
cshowRandomImg = true;
Bold = true;
a
summaryPost = 140;
summaryTitle = 25;
numposts1 = 12;
unction removeHtmlTag(strx,chop){
fvar s = strx.split("<");
){
if(s[i].indexOf(">")!=-1)
for(var i=0;i<s.length;i+
+{
] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
s[
i}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
.floor((imgr.length+1)*Math.rand
function showrecentposts(json) {
j = (showRandomImg) ? Mat
hom()) : 0;
img = new Array();
document.write('<ul>');
feed.entry[i];
var posttitle = entry.
for (var i = 0; i < numposts1; i++) {
var entry = json
.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
lternate') {
posturl = entry.link[k].href;
br
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == '
aeak;
}
}
for (var k = 0; k < entry.link.length; k++) {
== 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if
if (entry.link[k].rel == 'replies' && entry.link[k].type
("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
xOf("<img"); b = s.indexOf
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.ind
e("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;
,6,7,8,9,10,11,12];
var month2 = ["January","February","March","April","May","June","July","A
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,
5ugust","September","October","November","December"];
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="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
» Tùy chỉnh:
- width="100" height="90" Lần lượt là chiều rộng và chiều cao của ảnh thumbnail.
- summaryPost = 140; Là số ký tự mô tả khi dê chuột vào ảnh hoặc tiêu đề.
- summaryTitle = 25; Là số ký tự tiêu đề tối đa hiển thị trên slider. bạn nên để vừa phải không nên quá nhiều ký tự sẽ làm sấu slider.
- numposts1 = 12; là số bài viết hoặc ảnh thumbnail sẽ hiển thị trên slider. bạn không nên cho quá nhiều sẽ ảnh hưởng tới tốc độ load.
- 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.
- Nếu blog của bạn đx có thư viện Jquery rồi thì xóa phần màu cam đi nha.
6- 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.pageType != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
"&l
<script>
document.write
(t;script src=\"/feeds/posts/default/-/Namkna-label?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
auto:
(function($) { $(document).ready(function(){
$("#carousel .container").jCarouselLite({
4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
</b:if>
» Tùy chỉnh:
- Thay Namkna-label thành tên nhãn bạn muốn hiển thị trên slider.
- Nếu muốn hiển thị cho toàn blog xóa phần màu xanh đi.
- visible: 5, Số bài viết (ảnh thumbnail và tiêu đề) hiển thị trên trang chính.
- 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).
- Mẫu SIMPLE đặt code sau dòng: <div class='columns-inner'>
- Tiện ích này hiển thị chỉ ở trang chủ, trang nhãn và trang chuyên biêt, trang lưu trữ nên nếu bạn muốn cho nó hiển thị ở tất cả các trang thì hãy xóa phần màu xám đi nha.
Chúc thành công!
Nguồn :http://namkna.blogspot.com/2013/05/slider-bai-moi-truot-ngang-thumbnail.html
.jpg){kind=avatar}
0 nhận xét:
Post a Comment