Cara Membuat Background Animasi ~ Seputar Dunia Teknologi

Anda mungkin pernah bermimpi atau pernah melihat blog dengan background Animasi (yang bisa bergerak). Saya melihat pada Blog teman saya sekelas saya Fandy Gunawan menggunakan animasi background bi blog nya maka saya akan mengeshare cara membuat nya.. Cekidoottt

Cara Membuat Animasi Blackground Di Blog :

Langkah 1 : Login Kedalan Akun Blogger Anda.
Langkah 2 : Klik Rancangan --> Edit HTML --> Expand Template Widget.
Langkah 3 : Cari Kode </head> (CTRL + F)
Langkah 4 : Kemudian Copy Kode di bawah ini dan taruh tepat diatas 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>

KETERANGAN : Jika Anda Sudah Pernah Menaruh Kodee JQuery, maka jangan ikuti langkah diatas / dilewati

Langkah 5 : Copy Kode dibawah ini dan taruh tepat diatas kode </head>

<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>

Langkah 6 : Copy Kode Dibawah ini Untung Memasang Gambar Background Animasi

<style>
body {
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe9isojXJM2WGFAQP86yG4UuGZRbaTGFwtaR4LDpvVrLDgnii9dp0c4p772fDRMhDojoebhEPWt-WH3EdeECufH4ouDejLs3R8Xp6BrVgVPguDk2elDwb0OtdV6GMjS3QqYvE3Xdy4aaTS/s800/animated%2520stars.gif) repeat center; background-attachment: fixed;
}
</style>

Langkah 7 : Simpan dan lihat Hasilnya

KETERANGAN : Anda dapat mengganti Animasi Background dengan pilihan dibawah ini. ganti kode warna kuning dengan kode background yang anda inginkan.
Berikut ada beberapa pilihan:

RED MATRIK