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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

11 nhận xét

  1. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  2. Để 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/";

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

    Trả lờiXóa
  4. 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

    Trả lờiXóa
  5. 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!

    Trả lờiXóa
  6. Để 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

    Trả lờiXóa
  7. 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

    Trả lờiXóa
  8. 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 .

    Trả lờiXóa
  9. của anh nhiều thủ thuật hay. mà nhiều js quá anh ơi.híc. nặng

    Trả lờiXóa
  10. sao trang của mình không thấy nó chuyển bài nhỉ ? :(

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

    Trả lờiXóa