Một đoạn HTML + CSS mô tả 1 ảnh nền cố định, 4 ảnh nền trong đặt ở 4 góc. Mục đích của code cơ bản này là để bạn ứng dụng vào hình nền web bạn để chào mừng, kỷ niệm một ngày nào đó một cách linh hoạt mà không phải sửa lại template. Bạn có thể thêm nội dung vào một file css hoặc js từ bên ngoài mà không ảnh hưởng đến các thành phần đã có trong trang
HTML+CSS:
<style type="text/css">
html {
height:auto!important
}
body {
background: url(http://www.downloadfree4u.com/wallpapers/vector-art-flowers/vector-flower-30.jpg) no-repeat;
background-size: 100% 100%;
background-attachment : fixed;
background-position: center top;
}
</style>
<img style="position:fixed;z-index:9999;top:0;left:0" src="http://png-4.findicons.com/files/icons/5/animals/128/butterfly.png" />
<img style="position:fixed;z-index:9999;top:0;right:0" src="http://png-1.findicons.com/files/icons/1973/orange_stickers_social_media/256/twitter_bird2_square_webtreats.png" />
<img style="position:fixed;z-index:9999;bottom:0;right:0;" src="http://png-3.findicons.com/files/icons/1989/folder/256/books.png" />
<img style="position:fixed;z-index:9999;bottom:0;left:0" src="http://png-3.findicons.com/files/icons/305/cats_2/48/pictures.png" />
Bỏ đoạn này vào trong javascript:
<script type='text/javascript'>
document.write('<style type="text/css">html { height:auto!important}body { background: url(http://www.downloadfree4u.com/wallpapers/vector-art-flowers/vector-flower-30.jpg) no-repeat; background-size: 100% 100%; background-attachment : fixed; background-position: center top;}</style><img style="position:fixed;z-index:9999;top:0;left:0" src="http://png-4.findicons.com/files/icons/5/animals/128/butterfly.png" /><img style="position:fixed;z-index:9999;top:0;right:0" src="http://png-1.findicons.com/files/icons/1973/orange_stickers_social_media/256/twitter_bird2_square_webtreats.png" /><img style="position:fixed;z-index:9999;bottom:0;right:0;" src="http://png-3.findicons.com/files/icons/1989/folder/256/books.png" /><img style="position:fixed;z-index:9999;bottom:0;left:0" src="http://png-3.findicons.com/files/icons/305/cats_2/48/pictures.png" />');
</script>
Bài này mục đích chính của tôi không phải giúp các bạn có hình nền đẹp trang trí bằng cách này mà là gợi ý cho các bạn ứng dụng rất rộng cho nhiều việc.
Ví dụ bạn chỉ cần nhúng
<script src="http://...js" type="text/javascript"/>Vào template, tất nhiên là mã nguồn nào cũng được. Với blogger chỉ có 1 file xml thì nhúng vào đâu cũng được, còn những mã nguồn khác thường nhúng vào file luôn được include như header chẳng hặn.
Mỗi lần muốn thay đổi bạn chỉ cần sửa lại file js, thì tất cả trang web sử đang dụng file này cũng có tác dụng theo mà ko cần phải can thiệp vào code của từng website. Trong khi đó host js thì có rất nhiều và chỉnh sửa cũng rất dễ. Tôi thường dùng Google làm host js, vì mỗi lần edit, url file js này vẫn không đổi vì luôn được đồng bộ.
Chúng ta sẽ ứng dụng cách này vào nhiều việc như: Trang trí theo thời điểm, thông báo khẩn, quảng cáo luân chuyển, theo dõi, menu đồng bộ, ... tùy bạn.
Đơn giản chỉ có vậy! Chúc thành công!
