Bagaimana sih Cara Membuat Gambar Background Bergerak pada Blog, oke kali ini saya akam membagi Tips atau cara bagaimana Cara Membuat Gambar Background Bergerak pada Blog. Sebenarnya Trik ini menggunakan JQuery sederhana yang dikhususkan untuk membuat gambar background menjadi bergerak (Scrolling Background). Script ini membuat gambar background blog bergerak secara vertikal dari arah bawah ke arah atas. Buat anda yang ingin mempercantik blog silahkan anda mencobanya. berikut ini tutorialnya.
Cara Pemasangan
Login » blogger.
Rancangan » Edit HTML.
Apabila anda belum menggunakan kode JQuery silakan anda pasang kode JQuery dibawah ini tepat di atas Kode
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>
Copy-Paste kode di bawah ini tepat di atas Kode </Head>.
<script type='text/javascript'>Copy-Paste Kode CSS di bawah ini tepat di atas Kode </Head>
//<![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>
<style>
body {
background: black url(http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif) repeat center; background-attachment: fixed;
}
</style>
Keterangan:
- repeat // Pengulangan gambar arah x dan y.
- http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.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.
Selamat berkarya....
8 komentar:
Cukup membingungkan pak x_x
tapi asyik kok, coba deh pasti puas liat hasilnya.
yang warna biru itu alamat gambar yang mau digerakkan, bisa diambil dari fisbuk atau google.
Sudah bisa pak! coba dicek lagi :) msi-zaky16.blogspot.com
Oke Zaky...great...!
mudah khan?
lanjutkan dengan fitur yg lain agar masuk nominasi...
Pak,saya juga bingung... kata-katanya saya ngga ngerti
pak backgroundnya ga mau jalan hiks T.T
pak, kalau mau pakai template yg sudah didownload tetap seperti itukah atau bagaimana?
Posting Komentar