[Ves2] Slider bài mới trượt ngang thumbnail cho blogger
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
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>.
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 blog2- 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}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBRKMd2-ayXy0vKhOia8NN1MFQfv5HqzOiXapZm0cl0CctbCZBQEEqYjmL8PQyCtegmEEE9PRlqIS4aZQMWbG6XKtOycdlfOd3-3VCX8e4vynlWLMRV4mGvWitH6mX-_hAKdtqZSnHcmk/s1600/previous_namkna-blogspot-com.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTgqANChekJPh8nDqis8WXOS-H-bPypZ9v6ZERj20Pi4iGZRTy5SnTQ_r2KQtJWCdtEsobUYDN2iFy28uca3gD9bHJS9v0DBdba1mMZyno2IqWAaOrGfnHoyhdXUowWM-nKeQuTRo91aY/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}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-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-top: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
<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(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8HFBn2SEJdf7UG4pacw1gGwhMiYt3aeiRDvTlYx8y3ftQpKw3aIuYVzpNqJe2-2qFdh3YTnXqW2utYPzdIC0lasTdbqWmEjx0ItLgocoVhhAvwYLJeAvnOezPgzvy-YupM7h1SLMRrLg/s1600/no+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 140; summaryTitle = 25; numposts1 = 12; 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('<ul>'); for (var i = 0; i < numposts1; 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 = ["January","February","March","April","May","June","July","August","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'> <script> document.write("<script src=\"/feeds/posts/default/-/LamQuen24h-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'> (function($) { $(document).ready(function(){ $("#carousel .container").jCarouselLite({ auto: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 LamQuen24h-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.
Share This:
Khóc Cười24h
Chào mừng các bạn đến với Blog Khóc Cười24h. Thông qua blog mình chia sẻ nhiều clip hài hước, nhạc, ảnh vui... Mình rất mong được sự ủng hộ nhiệt tình của các bạn bằng cách comment bài viết, chia sẻ bài viết hoặc liên hệ với mình qua blog này! Mình xin cảm ơn!
No Comment to " [Ves2] Slider bài mới trượt ngang thumbnail cho blogger "