Slider Trượt phân trang cho blogspot

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:

VIEW DEMO

¤  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}
#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/AVvXsEjO30OaN9M5qXFPDN_yyri7FEIFxU5HetYvhUK8rcpiPwDGdp2eY20DClINQg3eHWfXOF1VVxj5kpsG3f8pyd-2lcyicmpp_I_CGabL5qB3OK14xFxMNhxSvtwOS5mcjZhx2HJ05UgGyXY/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/AVvXsEgjZkjWSzkBUGa4RI9TywndzS_UluZ-ulj8o6ppcDhrM7VdUEbTbVBHszleWHCZ5WMxrY3PtPayaXd913aYqGRsA4wRFXiHaCbkwMDL4nLDet-aQF-Elw4fh24SKfwdGtvNwL9aoYYW_hE/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

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();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0CesWhuPTjvjnTtqGPY-BEhCEdavULRRqHGaNPYA-WZ_bzKlpyhZ0w4gCQIIPMSPqyGm2WOyRDR8xdrwAMyPdqklpIyemT8gEpgM8Onw8DJDiiXBOZSmSJ5S8uIe9Gr3ysoN0g-voqDo/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 != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Namkna-label?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>   
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,   
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(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'>

Chúc thành công!


copyright IloveYou ViệtNam