Cara
Membuat Background Bergerak di Blog
Info unik kali ini mengenai salah
satu trik membuat gambar background blog menjadi dinamis. 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 sobat blogger yang
ingin mencobanya silakan disimak trik membuat scrolling background berikut ini.
Cara Pemasangan
- 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>
- Copy-Paste kode di bawah ini tepat di atas 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>
//<![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>
- Copy-Paste Kode CSS di bawah ini tepat di atas Kode </Head> untuk memasang gambar background. 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://lh6.googleusercontent.com/-5pLorlV3H-I/T4a0Sdg2iQI/AAAAAAAABi4/2EKSDnkxz9s/s800/bg.gif) repeat center; background-attachment: fixed;
}
</style>
body {
background: black url(http://lh6.googleusercontent.com/-5pLorlV3H-I/T4a0Sdg2iQI/AAAAAAAABi4/2EKSDnkxz9s/s800/bg.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://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.
Pilihan Gambar
Background
http://lh6.googleusercontent.com/-5pLorlV3H-I/T4a0Sdg2iQI/AAAAAAAABi4/2EKSDnkxz9s/s800/bg.gif
https://lh3.googleusercontent.com/-uJ-Th52g6r0/TtjTcIlyYZI/AAAAAAAAAkM/4dNde9sGNKw/s800/bg_star.png
https://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://lh6.googleusercontent.com/-u6hhkovKiAg/T0fZ-dZBX0I/AAAAAAAABLM/MomlYPHQwrQ/s800/dance_flow.png
https://lh3.googleusercontent.com/-eGOdPe7gV-g/T0fZ-hR1H-I/AAAAAAAABLQ/LWN2smtA6cc/s800/ThighHeels.png
http://lh4.googleusercontent.com/-brpkMDLI-Jo/T0hBjzFgHbI/AAAAAAAABLs/lmWb_OeOuwE/s800/animated%2520stars.gif
http://lh4.googleusercontent.com/-dsFg9OnYo5Q/T0hK7b0-xoI/AAAAAAAABL4/9_CPzXBCMfw/s800/animated%2520blue%2520stars.gif
http://lh4.googleusercontent.com/-Kow92KwCv4w/T1x-QG4nWGI/AAAAAAAABWk/wLOYXtytoV4/s800/devil_angel_lolita_bg.png
mengganti backround blog di bawah ini :
BalasHapusklik design yg ad di blog kalian pojok kanan atas lalu tekan template
lalu klik sesuaikan
kemudian klik latar belakang seperti di bawah ini :
dan klik seperti ini dan oploud foto di komputer kalian
kemudian simpan perubahan di pojok kanan atas dan klik lihat blog jadi deh :)