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

(Traidatmui.com) – Thời gian qua mình đã có post 2 bài viết về Recent post (Bài viết mới nhất) với hai hiệu ứng khác nhau. Và hôm nay tiếp theo mình xin giới thiệu đến các bạn thêm một tiện ích recent post cho blogger. Thủ thuật này với hiệu ứng auto-scroll, các bài viết sẽ tự động thay đổi nội dung với dạng cuộn tương ứng với khoảng thời gian đặt trước. Để thấy rõ tiện ích này như thế nào, bạn có thể click demo và chờ giây lát để xem hiệu ứng của tiện ích này.

1. Đăng nhập vào tài khoản Blogspot
2. Vào thiết kế, chọn chỉnh sửa HTML
3. Chèn code css bên dưới vào trước thẻ ]]></b:skin>
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 #ccc; /*đườ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 #fff;}

4. Bạn chèn tiếp code bên dưới vào sau thẻ <head>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.min.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/autoscroll.js" type="text/javascript"></script>

5. Save template lại và trở về phần tử trang
6. Thêm 1 HTML/Javascript và chèn code bên dưới vào nó
<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";

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://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn

</script>
<div class="autoscroll">
<script src="http://data-traidatmui.appspot.com/scripts/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://data-traidatmui.appspot.com/scripts/recent_label_autosroll.js


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

Xem khác cùng chủ đề

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

2/08/2011 06:44:00 CH Trả lời

thủ thuật này sau chạy được 1 tý là nó reset chạy loạn cả lên.sau anh không hướng dẫn thủ thuật bài viết mới nhất của "traidatmui.com" đang áp dụng, em thấy thủ thuật này dễ nhìn hơn :))

Admin
2/08/2011 06:58:00 CH Trả lời

Có lẽ em thực hiện nhiều thủ thuật nên nó bị xung đột code JQuery.min.js nên nó không chạy tốt. Anh đã hướng dẫn thủ thuật bài viết mới nhất giống trang anh lâu rồi. Em xem tại đây

2/08/2011 07:14:00 CH Trả lời

hì em lang thang nãy giờ cũng thấy rồi đang ngồi xem nè :)) http://www.traidatmui.com Thật tuyệt vời

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