Bài viết mới nhất (recent post) có ảnh thumbnail cho blogspot

Trước đây mình có post một bài viết đề cập đến việc hiển thị bài viết và Comment mới nhất cho blogger, tuy nhiên ở thủ thuật đó thì bài viết chỉ hiển thị tiêu đề và tóm tắt một đoạn nội dung không có ảnh thumbnail. Hôm nay mình xin chia sẽ cùng các bạn tiện ích bài viết mới nhất có ảnh thumbnail, với thủ thuật này thì bài viết hiển thị cùng ảnh thumbnail nằm bên trái. Hơn nữa tiện ích có thêm hiệu ứng thay đổi bài viết ở một thời gian nhất định. Bạn có thể xem mô tả bên dưới để thấy rỏ hơn.

Xem Demo

☼ Cách thêm bài viết mới nhất có ảnh thu nhỏ cho blogspot.

1. Đăng nhập vào tài khản blogspot

2. Vào bố cục (layout) => Bấm vào Thêm tiện ích (Add widget) => Tạo một tiện ích HTML/Javascript => Chèn thêm đoạn code sau vào phần nội dung của tiện ích HTML vừa tạo.

<script type="text/javascript">
$(document).ready(function(){

var first = 0;
var speed = 2000; //tốc độ chuyển sang bài khác
var pause = 3000;  //thời gian dừng (số càng nhỏ thì sẽ chuyển đổi càng nhanh)

function removeFirst(){
first = $('ul#listticker il:first').html();
$('ul#listticker il:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}

function addLast(first){
last = '<il style="display:none">'+first+'</il>';
$('ul#listticker').append(last)
$('ul#listticker il:last')
.animate({opacity: 1}, speed)
.fadeIn('fast')
}

interval = setInterval(removeFirst, pause);
});
</script>

<style type="text/css">

#listticker{
height:397px; /*chiều cao của bài viết */
width:253px;  /*độ rộng của bài viết (nhỏ hoặc bằng độ rộng tablewidth ) */
overflow:hidden;
border:solid 1px #3399ff;
padding:0px 0px 0px 0px;;
}
#listticker il{
order:solid 0px #990000;
margin:0;
padding:0px;
list-style:none;
}

#listticker il{
height:30px;
padding:0px;
list-style:none;
}
#listticker a{
color:#ff0000;
margin-top:0px;
}
#listticker a:hover{
color:#003300;
margin-top:0px;
}

#listticker .news-title{
display:block;
font-weight:bold;
margin-bottom:0px;
font-size:11px;
}
#listticker .news-text{
display:block;
font-size:11px;
color:#666666;
}
#listticker img{
float:left;
margin-right:3px;
padding:0px 2px 12px 0px;
border:solid 0px #990000;
}
</style>


<script language="JavaScript">
imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfly5vCvzdhWJViEXswwVQgUBPiSR_AX2N5sKWYgikksW6769oDtZsFssc6O7PdXbm1_5TsSV2-bVHriffpZx_izRKMB7NIU7quBsSg5CKPnsazsZKz9O1pB2o_ShcANLixuvIbQFQFM/s200/namkna-blogspot-0.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfly5vCvzdhWJViEXswwVQgUBPiSR_AX2N5sKWYgikksW6769oDtZsFssc6O7PdXbm1_5TsSV2-bVHriffpZx_izRKMB7NIU7quBsSg5CKPnsazsZKz9O1pB2o_ShcANLixuvIbQFQFM/s200/namkna-blogspot-0.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfly5vCvzdhWJViEXswwVQgUBPiSR_AX2N5sKWYgikksW6769oDtZsFssc6O7PdXbm1_5TsSV2-bVHriffpZx_izRKMB7NIU7quBsSg5CKPnsazsZKz9O1pB2o_ShcANLixuvIbQFQFM/s200/namkna-blogspot-0.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfly5vCvzdhWJViEXswwVQgUBPiSR_AX2N5sKWYgikksW6769oDtZsFssc6O7PdXbm1_5TsSV2-bVHriffpZx_izRKMB7NIU7quBsSg5CKPnsazsZKz9O1pB2o_ShcANLixuvIbQFQFM/s200/namkna-blogspot-0.jpg";
imgr[4] = "http://lh3.ggpht.com/_TaHzV-QgYq0/Syigu0WT0PI/AAAAAAAAD54/SFW95fEf-_k/images.jpg";

showRandomImg = true;
tablewidth = 253; //độ rộng của bảng 
cellspacing = 0;
borderColor = "no";
bgTD = "#99ffff"; //màu nền của tiện ích (bạn có thể bỏ trống nếu không muốn dùng nền)

imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
fntsize = 11; //kích thước của text
acolor = "";
aBold = true;
icon = " ☼ ";

text = "no";

showPostDate = false; //nếu muốn hiển thị ngày đăng thay FALSE thành TRUE

sumtitle = 22;  //số kí tự của tiêu đề bài đăng
summaryPost = 70;  // số kí tự nội dung bài viết
summaryFontsize = 11;
summaryColor = "#990000";
icon2 = " » ";

numposts = 15; //số bài viết hiển thị

home_page = "http://namkna.blogspot.com/";

</script>
<script src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/recent_post.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.min.js" type="text/javascript"></script>

» Tùy chỉnh code:

Bạn hãy dựa vào các chú thích màu xanh trong đoạn code trên để chỉnh sửa cho phù hợp với blog của mình.
Thay link màu đỏ trong code thành link ảnh mà bạn muốn thay thế khi bài đăng không có ảnh.
Thay địa chỉ http://namkna.blogspot.com/ thành địa chỉ blog của bạn.

4. Save lại và chọn vị trí đặt tiện ích vừa tạo thích hợp

» Cập nhật nâng cao khi gọi bài viết theo nhãn

- Nếu bạn muốn hiển thị bài viết theo từng nhãn riêng thì hãy thay

http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/recent_post.js

Thành đoạn mã sau:

http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/recent_label.js

- Và thêm vào phần nội dung của tiện ích trên đoạn script như sau (code màu đỏ đậm)

<script language="JavaScript">
..................
..................
sumtitle = 22;  //số kí tự của tiêu đề bài đăng
summaryPost = 70;  // số kí tự nội dung bài viết
summaryFontsize = 11;
summaryColor = "#990000";
icon2 = " » ";

numposts = 15; //số bài viết hiển thị
label = "Blogspot Recent post"
home_page = "http://namkna.blogspot.com/";

</script>