Slider bài mới nhất trượt ngang với thumbnail cho blogger

Slider bài mới nhất trượt ngang với thumbnail cho blogger là một tiện ích rất phổ biến hiện nay nó có chức năng là hiện thị nhưng ghì mà chúng ta muốn.
Hôm nay thichviet sẽ hướng dẫn các bạn cách tạo một tiện ích mang phong cách của tiện ích bài viết mới nhất (recent post) nhưng hiển thị dưới dạng một slider trượt ngang với các ảnh thumbnail và tiêu đề bài viết. Hiệu ứng chuyển ảnh mượt mà dựa trên thư viện JQuery. 

Ảnh minh họa

 Bây giờ chúng ta bắt đầu xậy dựng cho mình một slider trượt ngang như ảnh minh họa trên.
1. Đăng nhập vào tài khoản blogger
2.Vào Mẫu (template)  và chọn chỉnh sửa HTML (Edit html)
3.Tìm thẻ ]]></b:skin>  và dán vào trước nó đoạn code sau:

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpC8uKXnyINcTSQNTbVZfkp1w-ek5XbaILkQPAIajOS22o5ZBm0zEQDS-EDbsYjlRrJQQy3j64zmxAtmutR28IlxI6GXc_YAzmUezJX3mBRlA4zQPsLk36rhxIIos9IBTHQdg1V7uxFvg/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgago3xlaOAjDT5HV6UJHvlX4jlyz7bt0qWNYsgFho2fJXMWuXjSFYYHprZkP11pdqauwjLtMQJnPVkuAVuFpjCD_f2PnHoCTsocZOcpYG_6emeZFlDFtavDMnt9UWFXpjSIYijr-sKfHU/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN7jO9RRRxi6W1qdgnz2iNrShdfKrbG8zVg6WAOC7IVoAnNUhG2GJl0NCMk9dCAZ_ojUYqhJZL-tlLZW_HoJ_06607rrjlVrWjci70aInjcL_1sPWZeSiZOpeOAD8EoytY_pr6IENtxdI/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAM2HGJnPvZnyIrJXElxOwBkMHncb1-DJ82K7t8ctuUriYIxCCtP9DEflxESQO0GAx9QGRIsoRlPfTCyKQqkSiyug1Kx00eLXR66v0iQvkWpFBHljWm2AG0QrvCGQocdHXqvgw9k8jHfI/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QpJRglvhgtaNm4fbh50j8ggjjfAenUYS28Q8L5RxO3uYLdqpmJDc3428sw69gcDfYv_7jd7IYgYKGWKkJaFmmFFWR7scuN8ylJatndZ0FYSRyvvvvCGfA-FZW-qiO2Bu1fuUhOPm5kU/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkCAAAAACap/5LAAAACXBIWXMAAAsSAAALEgHS3X78AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAsSURBVHjaYvzPAAMs7+FMJgaEKCM2UfoqGBKGDZgjh4QVdDBskDln5DEBAwCNEQLr2H+8AwAAAABJRU5ErkJggg==) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

4.Tìm tiếp thẻ </hesd> và dán vào trước nó đoạn code sau:

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 = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

numposts1 = 15; là số bài sẽ được gọi từ feed..
label1 = "news"; là tên của nhãn muốn gọi.
summaryPost = 140; là số ký tự mô tả
summaryTitle = 25; là số ký tự phần tiêu đề ngay bên dưới hình ảnh.
width="145" height="100" là chiều rộng và chiều cao của ảnh thumbnail.
5.Tìm thẻ <div id='main-wrapper'> và tiếp tục dán vào trước nó đoạn code sau:

<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/-/&quot;+label1+&quot;?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> 

6.Lưu lại và xem kết quả
Chúc các bạn thành công