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

(Traidatmui.com) – 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 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.

Hình ảnh minh họa
☼ 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] = "http://lh3.ggpht.com/_TaHzV-QgYq0/Syigu0WT0PI/AAAAAAAAD54/SFW95fEf-_k/images.jpg";
imgr[1] = "http://lh3.ggpht.com/_TaHzV-QgYq0/Syigu0WT0PI/AAAAAAAAD54/SFW95fEf-_k/images.jpg";
imgr[2] = "http://lh3.ggpht.com/_TaHzV-QgYq0/Syigu0WT0PI/AAAAAAAAD54/SFW95fEf-_k/images.jpg";
imgr[3] = "http://lh4.ggpht.com/_TaHzV-QgYq0/SyigytRlIbI/AAAAAAAAD58/nGYXCp6rKfY/images2.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://www.traidatmui.com/";

</script>
<script src="http://data-traidatmui.appspot.com/scripts/recent_post.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/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://www.traidatmui.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://data-traidatmui.appspot.com/scripts/recent_post.js

Thành
http://data-traidatmui.appspot.com/scripts/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 = "Advanced blogger"
home_page = "http://www.traidatmui.com/";

</script>

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

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

Theo Fandung Blog

Xem khác cùng chủ đề

11 nhận xét | Viết lời bình

8/15/2010 03:53:00 SA Trả lời
Nhận xét này đã bị quản trị viên blog xóa.
Admin
8/15/2010 05:23:00 SA Trả lời

Để hiển thị theo từng nhãn riêng biệt bạn hãy thay file .JS trong code trên (http://singleboy010.110mb.com/Myfile/myjavascript/newpost.js)

thành
http://singleboy010.110mb.com/Myfile/myjavascript/label-post.js

Và thêm lệnh bên dưới vào trước dòng (home_page = "http://nvdinh88.blogspot.com/";) như bên dưới và sửa tên nhãn cho phù hợp.

label = "Advanced blogger";
home_page = "http://nvdinh88.blogspot.com/";

8/21/2010 04:46:00 SA Trả lời

http://singleboy010.110mb.com/Myfile/myjavascript/label-post.js Cho mình xin lại file JS này .Tks

Admin
8/21/2010 07:48:00 SA Trả lời

Bạn có thể click vào link này để download file script "hiển thị bài viết theo nhãn nhé"

http://singleboy010.110mb.com/Myfile/javascript_tips/recent_label.js

thân chao bạn

8/26/2010 10:57:00 SA Trả lời

Anh Dinh ơi! Làm cách nào để mình down file *.js về máy rồi up lên web vậy? Anh chỉ em nha!

Admin
8/26/2010 07:25:00 CH Trả lời

Để dowload file script trong bài này em chỉ việc copy link (hoặc click vào link bên dưới) (http://singleboy010.110mb.com/Myfile/javascript_tips/recent_label.js) và past lên thanh địa chỉ để trình duyệt. Sau đó copy code về và dùng Notepad để past code vào sau đó save file lại định dạng đuôi là *.JS sau đó upload lên trang chủ của em nhé

Chào em :-/------------:-t

5/16/2011 01:35:00 SA Trả lời

Mình làm theo hướng dẫn chèn code ở footer 3 cột, thì chỉ có cột đầu tiên là có chuyển ảnh bài đăng, còn 2 cột còn lại thì không, bạn có thể xem dùm mình ko? blog mình đây shopgaucon.blogspot.com

Admin
5/16/2011 01:53:00 SA Trả lời

Bạn sử dụng lặp lại code nhiều lần nên nó bị xung đột và lỗi code đó bạn .

12/05/2011 09:32:00 SA Trả lời

của anh nhiều thủ thuật hay. mà nhiều js quá anh ơi.híc. nặng

12/05/2011 10:03:00 SA Trả lời

sao trang của mình không thấy nó chuyển bài nhỉ ? :(

Admin
12/13/2011 11:48:00 CH Trả lời

@ Free times: Nó vẫn chuyển bài tuy nhiên có thể thời gian hơi lâu đấy bạn

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang