Tạo Recent Posts trượt dọc chuyên nghiệp cho Blogspot

Tiện ích Recent Posts với hiệu ứng trượt dọc chuyên nghiệp sẽ giúp cho người đọc cảm thấy thú vị khi đến với blog của bạn. Họ sẽ không có lí do gì mà không thử click xem bài viết đó, mình sẽ giới thiệu sau đây tiện ích này.

Xem trước

DEMO 

Cách 1

Bước 1: Các bạn vào Bảng quản trị Blogger→Mẫu→Thêm đoạn code sau trên thẻ ]]></b:skin>.

#recent-list{overflow:hidden;margin-top:5px;padding:0 0;height:350px}
#recent-list ul{width:100%;overflow:hidden;list-style-type:none;padding:0 0;margin:0 0}
#recent-list li{padding:5px 5px;margin:0 0 5px;list-style-type:none;float:none;height:70px;overflow:hidden;background:#fff url() repeat-x;border:1px solid #ddd;white-space:nowrap;text-overflow:ellipsis}
#recent-list li a{text-decoration:none;color:#4B545B;font-size:11px;height:18px;overflow:hidden;margin:0 0;padding:0 0 2px}
#recent-list li img{float:left;margin-right:5px;background:#EFEFEF;border:0}
.recent-date{overflow:hidden;font-size:10px;color:#0284C2;padding:2px 0;margin:1px 0 0;height:15px;font-family:Arial}
.recent-comment{overflow:hidden;font-family:Arial;font-size:10px;color:#262B2F;padding:0 0;margin:0 0}

Bước 2: Thêm đoạn code sau lên trên thẻ </head>

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Bước 3: Các bạn tiến hành thêm một widget HTML/Javascrpit vào vị trí bạn muốn, sau đó thêm đoạn code sau vào tiện ích HTML/Javascrpit đó.

<script language='javascript'>
imgr = new Array();
imgr[0] = "URL_ảnh";
showRandomImg = true;
boxwidth = 290;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://dongvietblog.blogspot.com/";
limitspy=5
intervalspy=6000
</script>
<div id="recent-list">
<script src="https://www.googledrive.com/host/0B1EJGJ56bNPuanhTZFl3bmE2OFU" type="text/javascript"></script>
</div>

Ghi chú:

• home_page = "http://dongvietblog.blogspot.com/"; Thay http://dongvietblog.blogspot.com/ thành URL Blog của bạn.
• imgr[0] = "URL_ảnh"; Thêm Url ảnh mặc định đối với bài viết không có ảnh
• <script src="https://www.googledrive.com/host/0B1EJGJ56bNPuanhTZFl3bmE2OFU" type="text/javascript"></script> Các bạn download file này về rồi up lên host dùng riêng nhé.
• Nếu blog của bạn đã có file http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js thì hãy xóa file này đi nhé!
• Những mục còn lại mình thấy là quen thuộc, các bạn có thể chỉnh sửa cho phù hợp với Blog của mình nhé!

Cách 2

Thay vì thêm nhiều đoạn code như trên thì bạn chỉ việc thêm một đoạn code duy nhất. Thêm một tiện ích HTML/Javascrpit vào vị trí bạn muốn, sau đó thêm đoạn code sau vào tiện ích HTML/Javascrpit đó.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#recent-list{overflow:hidden;margin-top:5px;padding:0 0;height:350px}
#recent-list ul{width:100%;overflow:hidden;list-style-type:none;padding:0 0;margin:0 0}
#recent-list li{padding:5px 5px;margin:0 0 5px;list-style-type:none;float:none;height:70px;overflow:hidden;background:#fff url() repeat-x;border:1px solid #ddd;white-space:nowrap;text-overflow:ellipsis}
#recent-list li a{text-decoration:none;color:#4B545B;font-size:11px;height:18px;overflow:hidden;margin:0 0;padding:0 0 2px}
#recent-list li img{float:left;margin-right:5px;background:#EFEFEF;border:0}
.recent-date{overflow:hidden;font-size:10px;color:#0284C2;padding:2px 0;margin:1px 0 0;height:15px;font-family:Arial}
.recent-comment{overflow:hidden;font-family:Arial;font-size:10px;color:#262B2F;padding:0 0;margin:0 0}
</style>
<script language='javascript'> 
imgr = new Array();
showRandomImg = true;
boxwidth = 290;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://dongvietblog.blogspot.com/";
limitspy=5
intervalspy=6000
</script>
<div id="recent-list">
<script src="https://www.googledrive.com/host/0B1EJGJ56bNPuanhTZFl3bmE2OFU" type="text/javascript"></script>
</div>

Và dù cách nào bạn hãy lưu trước khi xem kết quả nhé!