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

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

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://xxvf4h.googlecode.com/files/jquery.min.js" type="text/javascript"></script>
<script src="http://xxvf4h.googlecode.com/files/autoscroll1.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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLc3dOoGUoI_OvNd-v4QwsJ4h8VPmLnbZJg0hDMSyEDJn3rWipcnR0IqXd9GMsmwgy0I27sSK2jHaYHr-wjV4-DDmyaDnmmNULT9igw35-4AJY1lXbQFwznqqvKYMP8NTG__bRH7o1Novz/";
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ànhFALSE


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 = "Tin tức"; //tên nhãn bài viết
home_page = "http://www.dvt.com.vn/"; //thay thành địa chỉ blog của bạn


</script>
<div class="autoscroll">
<script src="http://xxvf4h.googlecode.com/files/recent_post_autosroll.js.txt" 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

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

Đăng nhận xét

/