Tiện ích bài viết mới nhất với hiệu ứng autoscroll bằng Jquery

1.Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.
Đặt đoạn code dưới đây vào trước thẻ ]]></b:skin>
Xem Code

<!--Bai viet hieu ung autoscroll Start-->
div.autoscroll {
background:#eee; //màu nền của tiện ích
color:#0000ff; //màu text của tiện ích
width: 300px; //độ rộng của tiện ích
position: relative;
overflow: hidden;
height: 425px; //chiều cao của tiện ích
border:3px solid #000000; //đường viền của tiện ích
}
.autoscroll a{
color:#0000ff; //màu tiêu đề bài viết
}
.autoscroll a:hover{
color:#ff0033; //màu tiêu đề bài viết khi rê chuột
}

div.autoscroll ul {
position: relative;
list-style-type: none;
padding: 0px;
margin: 0px;
}
div.autoscroll ul li {
margin-top: 3px;
padding-bottom: 2px;
border-bottom:1px solid #0000ff;
}
.autoimg{
float:left;
margin:3px 5px 0px 5px;
padding:2px;
border:1px solid #000000;}
<!--Bai viet hieu ung autoscroll End-->

2.Bạn chèn tiếp code bên dưới vào trước thẻ </head>

<script src="http://haimiennam.googlecode.com/files/jquery.min.js" type="text/javascript"></script><script src="http://haimiennam.googlecode.com/files/autoscroll.js" type="text/javascript"></script>

3.Save template lại và trở về phần tử trang
4.Thêm 1 HTML/Javascript và chèn code bên dưới vào nó
Xem Code

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://haimiennam.googlecode.com/files/no.png";

showRandomImg = true;
borderColor = "no";

imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
fntsize = 11; //cở chữ của tiêu đề bài viết
dcmcolor = "#000033"; //màu text của phần ngày và nhận xét
dcmsize = "1"; //cở chử của phần ngày và nhận xét
acolor = "";
aBold = true;
icon = " » ";

text = "nhận xét"; //nếu không muốn hiển thị phần nhận xét bạn thay "Nhận xét" thành "no"
showPostDate = true; //nếu không muốn hiển thị ngày đăng thay TRUE thành FALSE

summaryPost = 100; // số kí tự phần tóm tắt nội dung bài viết
summaryFontsize = 12; //cỡ chữ phần tóm tắt
summaryColor = "#000"; //màu text phần tóm tắt
icon2 = " » ";

numposts = 15; //số bài viết hiển thị
label = "Marketing"; //tên nhãn bài viết
home_page = "http://baongocso1.blogspot.com/"; //thay thành địa chỉ blog của bạn

</script>
<div class="autoscroll">
<script src="http://haimiennam.googlecode.com/files/recent_post_autosroll.js" type="text/javascript"></script>
</div>

Bạn chỉ việc dựa vào các dòng hướng dẫn và thay đổi cho phù hợp với blog cuả bạn.

6. Save tiện ích lại

Nếu muốn hiển thị bài viết theo từng nhãn, bạn hãy thay file script (recent_post_autosroll.js) thành link bên dưới
http://haimiennam.googlecode.com/files/recent_label_autosroll.js

Chúc Các Bạn Thành Công !
Nguồn: http://www.traidatmui.com