cara membuat background animasi di blog

Posted by Unknown Posted on - - 1 komentar

Anda mungkin pernah melihat blog yang background/latar belakang nya itu menggunakan gambar animasi ? anda mau mencobanya maka dari itu itu pada postingan kali ini saya akan menjelaskan cara membuat background animasi di blog oke langsung aja kita simak bersama!!!!

Login » Blogger.
Rancangan » Edit HTML.
Apabila anda belum menggunakan kode JQuery silakan anda pasang kode JQuery dibawah ini tepat di atas Kode </Head>.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>
kemudian Copy-Paste Kode CSS di bawah ini tepat di atas Kode </Head> untuk memasang gambar background.
<script type='text/javascript'>
//<![CDATA[
$(function(){
// ***
// Scrolling background
// ***
// height of background image in pixels
var backgroundheight = 4000;

// get the current minute/hour of the day
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();

// work out how far through the day we are as a percentage - e.g. 6pm = 75%
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 30 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);

// calculate which pixel row to start graphic from based on how far through the day we are
var offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 1);

function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
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
);
}
// Start the animation
scrollbackground();
});

//]]>
</script>
Anda dapat mengganti gambar background sesuai dengan yang anda inginkan dengan merubah alamat hosting gambar pada Kode CSS di bawah dengan alamat hosting gambar yang anda pilih.
<style>
body {
background: black url(http://lh4.googleusercontent.com/-brpkMDLI-Jo/T0hBjzFgHbI/AAAAAAAABLs/lmWb_OeOuwE/s800/animated%2520stars.gif) repeat center; background-attachment: fixed;
}
</style>

Keterangan : - repeat // Pengulangan gambar arah x dan y.
- repeat-x // Pengulangan gambar hanya arah horizontal.
- repeat-y // Pengulangan gambar hanya arah vertikal.
- http://lh4.googleusercontent.com/-brpkMDLI-Jo/T0hBjzFgHbI/AAAAAAAABLs/lmWb_OeOuwE/s800/animated%2520stars.gif // URL Link gambar.

- center // Lokasi gambar berada di tengah layar.
Left // Lokasi gambar berada di kiri gambar.
Right // Lokasi gambar berada di kanan gambar.