Cara Mudah Membuat Background Blog Bergerak

Selain dengan memasang widget, salah satu untuk mempercantik tampilan blog yaitu dengan membuat background blog bergerak. Wiiihh, pasti blognya kelihatan tambah keren! Buat sobat blogger yang ingin memasangnya, caranya sangat mudah. Yuk, ikuti 'CS terbang menuju cara mudah membuat background blog bergerak, disimak ya!

Baca juga cara mudah membuat widget profile keren pada blog

1. Login ke Blogger

2. Pilih Template ► Edit HTML

3. Cari kode </head>

4. Pasang kode dibawah ini 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>

<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 6 am, 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();
});

//]]>
</csript>

<style>
body {
bacground: black url(http://lh6.googleusercontent.com/-5pLorlV3H-I/T4a0Sdq2iQI
/AAAAAAAABi4/2EKSDnkxz9s/s800/bg.gif) refeat center; background-attachment: fixed;

}
</style>

Jika kode yang berwarna hijau sudah ada di dalam template tidak usah dipasang

Kode yang berwarna biru, bisa sobat ganti dengan kode-kode yang ada dibawah

5. Simpan dan lihat hasilnya

Baca juga cara mudah merubah tampilan kursor pada blog

Pilihan Gambar Background Dan Kodenya

http://lh6.googleusercontent.com/-5pLorlV3H-I/T4a0Sdg2iQI/AAAAAAAABi4/2EKSDnkxz9s/s800/bg.gif

http://lh3.googleusercontent.com/-uJ-Th52g6r0/TtjTcIlyYZI/AAAAAAAAAkM/4dNde9sGNKw/s800/bg_star.png

http://lh4.googleusercontent.com/-dQkfB1XjogQ/TtjaZFg_FNI/AAAAAAAAAkY/27E-kzfkkvc/s800/bg-clouds.jpg

http://lh5.googleusercontent.com/-nx3gBAi7vr0/Tzy-csmqhCI/AAAAAAAAA-A/TuekaM10Vjs/s800/skull-fire-monozcore.png

http://lh4.googleusercontent.com/-Kow92KwCv4w/T1x-QG4nWGI/AAAAAAAABWk/wLOYXtytoV4/s800/devil_angel_lolita_bg.png

http://i1113.photobucket.com/albums/k514/S4NDMOTION/matrix_red_inner.gif

http://i1113.photobucket.com/albums/k514/S4NDMOTION/1-purp1.gif

http://i1113.photobucket.com/albums/k514/S4NDMOTION/32-riem.gif

http://i1113.photobucket.com/albums/k514/S4NDMOTION/matrix-yellow.gif

http://i1113.photobucket.com/albums/k514/S4NDMOTION/animated_background_a2.gif

http://i1113.photobucket.com/albums/k514/S4NDMOTION/blue-matrix-animate-layout.gif

http://i1113.photobucket.com/albums/k514/S4NDMOTION/anime-in-blue-matrix.gif

Baca juga cara mudah membuat recent post warna warni pelangi

Demikian cara mudah membuat background blog bergerak, semoga dapat membantu dan bermanfaat. Terimakasih atas kunjungannya.

► Copas Sange ◄

Sobat sedang membaca artikel tentang Cara Mudah Membuat Background Blog Bergerak. Jika sobat ada pertanyaan atau pesan mengenai artikel diatas, salurkan pada kolom berkomentar !! Dan untuk mendapatkan tambahan pahala, silahkan LIKE and SHARE ♂

<a href="http://copasange.blogspot.com/2016/05/cara-mudah-membuat-background-blog.html" target="_blank">Cara Mudah Membuat Background Blog Bergerak</a>

:: Salam Blogger ! ::