"Chèn Scroll Background với JQuery cho Blogspot"

(Traidatmui.com) - Trong blogger có một thuộc tính "BODY", phần này sẽ thiết lập các thuộc tính cho toàn bộ blog. Trong đó có phần nền (Background), tuy nhiên bạn thường nhìn thấy phần nền này luôn đứng yên, (bạn có thể sử dụng ảnh động để làm nền). Ở đây mình muốn nói động là hiệu ứng cuộn nền (Scroll Background). Hôm nay mình sẽ hướng dẫn các bạn cách để làm cho phần nền của body này tự động Scroll với JQuery, thủ thuật này mình tham khảo từ bloggertipandtrick.net và xin chia sẽ lại cho các bạn.

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Chọn phần chỉnh sửa HTML (Eddit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script src='http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(function(){
var backgroundheight = 4000;
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 30 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);
var offset = backgroundheight / 100 * percentofday;
var offset = offset - (backgroundheight / 1);
function scrollbackground() {
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 70
);}
scrollbackground();
});//]]>
</script>

5. Bây giờ bạn hãy tìm đến code bên dưới (hoặc tương tự vì mỗi template mỗi khác)
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

6. Thay thuộc tính background như bên dưới
body {
background:url(http://lh6.ggpht.com/_9-sNIAfGhKg/TT0wfivqJpI/AAAAAAAAACw/hQc3Q0zd6Ls/s512/bgscroll.jpg);
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Bạn chỉ cần thay phần background các phần khác không cần thay đổi.

7. Cuối cùng save template lại

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

Tham khảo bloggertipandtrick.net

Xem khác cùng chủ đề

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