Code Bài Viết Mới Nhất Có Thumbnail Trượt Ngang Slide Trong Blogspot

Trong seri share tài liệu code và thủ thuật blogspot thì ngày hôm nay tiếp tục là một bài về thủ thuật tạo cho blog của mình một tiện ích khá mới lạ và độc đáo. Bài viết này sẽ giúp các bạn có thể tạo cho mình một slide chạy ngang về các bài viết mới nhất của bạn. Qua đó sẽ thêm phần hấp dẫn cho bạn đọc cũng như điểm tô thêm màu sắc cho blog.

Hướng Dẫn Thực Hiện

1. Đầu tiên các bạn:

Đăng nhập vào blog ==> Chọn Mẫu (Template) ==> Chọn chỉnh sửa HTML (Edit HTML).

2. Tiếp theo các bạn sử dụng tổ hợp phím Ctrl + F để tìm kiếm thẻ ]]></b:skin>. Và các bạn dán đoạn code dưới đây vào trên thẻ này.

#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/AVvXsEg-b7vFde-eIuSiSFAn_dywKcRk37a6OrG1D-2IRLOSMWRtq2Mu5POEZVimHCGDV9SzKqDlBqf98sbcoA31uuC9kLHDaT3vCf5Hbdi0jtM8LZm4wKvSWsVvp32DQZgdYy4R2Swt-kKefgc/s1600/scroller-bg.png) repeat center}

#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA5s4Z8u9W4TdkzRRHC8D7ZGmgmLJvP5DtYCd6F6HkocqlYWtXODXQo2W9s-YnP9et9I8YvWMoH1pLKJOhLwyWes3WJhWu2CwfWIGK0I-xUsVnQgjbyy8_ntYiUBHzsjgepoON2g1l70I/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/AVvXsEhW7_m226jxBA0UnVd4CjL9Y7Fkg-a4mIu2dt-ndD0-9K88m9UZ5vbGgUT2dmGO5ftHFopHgvJCn6Eow7J7cB80-koyAXuRsT7jcbNSIvgiaOIPFMPy4wdMHH7f_6pC_OPlgCsQNt0zHIY/s1600/prev.png) center}

#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb39GML6X2Gnvoad4wIKhqCc_bSyiaBEFuXRcpV5tME0iboxXc6n-4i4-ZIa8sVT7Z81qY6xmi5svDK694O69HJAnzAf75D-3nAwOpnaMnySA95aShYWnFsiL0A75xGnDFByodz1bxQSY/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/AVvXsEh35oLXUQyb7ve-kaump8h7fHCENh5F3f_42Rfv4an4mMyeObHpQZkMOvcVbXJbYF96fWW_Hivwr4sVdKDGxU1AiUuqoHLQGFRUbQKvtZ4hZs3eaL4tSKvlEr7Y81pWPsKeOiAIXfn1-4g/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}

Chú Ý:

width:145px ;height:150px lần lượt là chiều rộng và chiều cao của khung chứa hình ảnh và tiêu đề bài viết nếu chỉnh sửa nó thì bạn phải chỉnh sửa lại cả kích thước hình ảnh ở bước 3 nha width="145" height="100"
Bạn có thể thay đổi các hình ảnh next và preview theo ý của bạn nha.

3. Tiếp tục bạn tìm thẻ đóng </head>, và dán đoạn code dưới đây lên trên thẻ này.

//<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPACrwYk6Vyqdg-nL0Tv_g9tclMksy9FOsSjTwmz4BkRN8W0EK7Dct2pPgecVLumIT2dxnpXQ5oIAN-APp-tcgxSua_nwK1-raXDzFof8nQlWr0sJh7tfR9vL6OdKqultjc4X6tNNLsMI/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 140;

summaryTitle = 25;

numposts1 = 15;

label1 = "news";

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 = ["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>

Chú Ý:

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.
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.

4. Tiếp tục các bạn tìm thẻ <div id='main-wrapper'>, (tùy vào blog của các bạn sẽ là thẻ khác, đây là thẻ nơi bạn đặt thanh trượt). Các bạn dán đoạn code sau dưới thẻ này.

<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/-/"+label1+"?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>

Chú Ý:

Nếu muốn lấy toàn bộ các nhãn thay vì một nhãn cụ thể thì xóa phần màu cam đi nha.
auto:4000,
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).
visible: 5, Số bài viết (ảnh thumbnail và tiêu đề) hiển thị trên trang chính.
start: 0,
circular: true,