Chèn Scroll Background với JQuery cho Blogspot
Điểm 4.6/5 dựa vào 87 đánh giá
(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.
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>
<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;
}
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;
}
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
Chuyên mục:
Blogspot nâng cao
![Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online](http://1.bp.blogspot.com/-0lPFnc_UVq0/TrVDZU6vbcI/AAAAAAAABUU/TTJlcT09M3U/s72-c/Khuc-ca-cho-tinh-nhan.jpg "Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online")
Không có nhận xét nào