Tiện ích bài viết mới nhất có ảnh thumbnail

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.

Hoặc các bạn có thể xem hình dưới:

☼ Bắt đầu tiến hành

1. Đăng nhập vào tài khản blogspot
2. Vào bố cục thêm 1 HTML/Javascript
3. Chèn thêm đoạn code sau vào phần tử HTML trên

<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/AVvXsEj319GLTlg6JVmRoNMF4ZCfcYx0XFMvZmwWu97YZWbrX0lWYFLA_cXVVrvBMkgEQ2Msn8kap0TSowcvO_rknqTW7jDshrcwPdc3a0ZoQl2hcnsA3uIW7zMWFLuO1FZi1QBGs-bl4QspK5k/s200/namkna-blogspot-0.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj319GLTlg6JVmRoNMF4ZCfcYx0XFMvZmwWu97YZWbrX0lWYFLA_cXVVrvBMkgEQ2Msn8kap0TSowcvO_rknqTW7jDshrcwPdc3a0ZoQl2hcnsA3uIW7zMWFLuO1FZi1QBGs-bl4QspK5k/s200/namkna-blogspot-0.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj319GLTlg6JVmRoNMF4ZCfcYx0XFMvZmwWu97YZWbrX0lWYFLA_cXVVrvBMkgEQ2Msn8kap0TSowcvO_rknqTW7jDshrcwPdc3a0ZoQl2hcnsA3uIW7zMWFLuO1FZi1QBGs-bl4QspK5k/s200/namkna-blogspot-0.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj319GLTlg6JVmRoNMF4ZCfcYx0XFMvZmwWu97YZWbrX0lWYFLA_cXVVrvBMkgEQ2Msn8kap0TSowcvO_rknqTW7jDshrcwPdc3a0ZoQl2hcnsA3uIW7zMWFLuO1FZi1QBGs-bl4QspK5k/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>

Chỉnh sửa: Bạn hãy dựa vào các chú thích 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 thích hợp

Update: 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:

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

Và thêm vào phầ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://quangvietmkt.blogspot.com/";

</script>

Bạn nên Download File Js về Tại đây sau đó Upload lên host riêng để dùng lâu dài
Bạn chỉ việc thay tên nhãn (Blogspot Recent post) trong code thành tên nhãn bạn muốn hiển thị

Chúc bạn thành công.