Recent Posts - Thủ thuật tạo bài viết mới nhất có ảnh cho Blogger

Recent Posts - Thủ thuật tạo bài viết mới nhất có ảnh cho Blogger

Giới thiệu và chia sẻ cùng các bạn thủ thuật blogger/blogspot 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.

Bắt đầu tiến hành
1. Đăng nhập vào tài khản Blogger hay 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] = "http://1.bp.blogspot.com/-yoCVhGFX-b4/UaqaTfnNmVI/AAAAAAAADN0/IvNKKWPOqlI/s1600/thiet+ke+blogger+thu+thuat+blogger+thietkeblogger.net.png";
imgr[1] = "http://1.bp.blogspot.com/-yoCVhGFX-b4/UaqaTfnNmVI/AAAAAAAADN0/IvNKKWPOqlI/s1600/thiet+ke+blogger+thu+thuat+blogger+thietkeblogger.net.png";
imgr[2] = "http://1.bp.blogspot.com/-yoCVhGFX-b4/UaqaTfnNmVI/AAAAAAAADN0/IvNKKWPOqlI/s1600/thiet+ke+blogger+thu+thuat+blogger+thietkeblogger.net.png";
imgr[3] = "http://1.bp.blogspot.com/-yoCVhGFX-b4/UaqaTfnNmVI/AAAAAAAADN0/IvNKKWPOqlI/s1600/thiet+ke+blogger+thu+thuat+blogger+thietkeblogger.net.png";
imgr[4] = "http://1.bp.blogspot.com/-yoCVhGFX-b4/UaqaTfnNmVI/AAAAAAAADN0/IvNKKWPOqlI/s1600/thiet+ke+blogger+thu+thuat+blogger+thietkeblogger.net.png";
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://www.thietkeblogger.net/";
</script>
<script src="http://thietkewebplus.googlecode.com/files/recent_post_0206.js" type="text/javascript"></script>
<script src="http://thietkewebplus.googlecode.com/files/jquery.min_0206.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.
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://thietkewebplus.googlecode.com/files/recent_post_0206.js 

Thành:

http://thietkewebplus.googlecode.com/files/recent_label_0206.js

Và thêm vào phần script trên "đoạn code màu đỏ"

<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 = "Blogger"
home_page = "http://www.thietkeblogger.net/";
</script>

Bạn chỉ việc thay tên nhãn (Blogger) trong code thành tên nhãn bạn muốn hiển thị.

+Thay link ảnh 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://www.thietkeblogger.net/ thành địa chỉ website của bạn.
4. Save lại và chọn vị trí đặt thích hợp