Halo, Sobat blogger!
pernah tidak kalian melihat backgrund blog dengan gambar bergerak / animasi?
Nah,, kali ini saya akan coba meng-Share cara untuk merubah background Blog menjadi gambar / animasi
well.. langsung saja ikuti langkah-langkah berikut.!
1. Log in ke akun blog anda.
2. Masuk ke menu Template -> Edit HTML.
3. Cari kode </head>
4. Ketikkan kode script Berikut 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 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>
<style>
body {
background: black url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGC7UA67RI/AAAAAAAAEv0/ehJ-oez_akU/DADbluematrix.gif ) repeat center; background-attachment: fixed;
}
</style>
5. Simpan Template.
NB : tulisan berwarna merah adalah URL Lokasi gambar,
untuk mengganti gambar backgroundnya, ganti saja teks berwarna merah tersebut dengan alamat URL gambar yang lainnya.
ini beberapa URL gambar yang saya peroleh dari blog sebelah.
pernah tidak kalian melihat backgrund blog dengan gambar bergerak / animasi?
Nah,, kali ini saya akan coba meng-Share cara untuk merubah background Blog menjadi gambar / animasi
well.. langsung saja ikuti langkah-langkah berikut.!
1. Log in ke akun blog anda.
2. Masuk ke menu Template -> Edit HTML.
3. Cari kode </head>
4. Ketikkan kode script Berikut 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 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>
<style>
body {
background: black url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGC7UA67RI/AAAAAAAAEv0/ehJ-oez_akU/DADbluematrix.gif ) repeat center; background-attachment: fixed;
}
</style>
5. Simpan Template.
NB : tulisan berwarna merah adalah URL Lokasi gambar,
untuk mengganti gambar backgroundnya, ganti saja teks berwarna merah tersebut dengan alamat URL gambar yang lainnya.
ini beberapa URL gambar yang saya peroleh dari blog sebelah.
URL image:
http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGC7UA67RI/AAAAAAAAEv0/ehJ-oez_akU/DADbluematrix.gif
Sekian dulu tutorial dari saya, Semoga bermanfaat
22 comments:
thaks
thanks
you're welcome.. :>)
makasih membantu banget
sama-sama gan.. makasih udah mampir dimari. (o)
mantap dah artikelnya kawan
eheh.. terimakasih gan.. sering-sering mampir ke blog ane ya. :)
Bagaimana dengan tulisan yang sebelumnya ada di kotak tsb? apa dihapus?
kotak mana saudari maksud? tidak ada yang dihapus koq, cuma di tmbahin tulisan / script yang warna biru itu.
tambahkan script warna biru tersebut sebelum atau diatasnya tulisan head itu
kotak mana saudari maksud? tidak ada yang dihapus koq, cuma di tmbahin tulisan / script yang warna biru itu.
tambahkan script warna biru tersebut sebelum atau diatasnya tulisan head itu
Gan di gue gx ada tulisan headnya
Coba dicek lagi dengan lebih teliti lagi gan. Harusnya ada..
ko' g ada perubahan ya?
coba dicek ulang gan, mungkin ada yang salah, / kelewatan step nya.
yang lain sukses loh. hehe
Cara dapat urlurlnya bagaimana?
URL apanya ya gann..??
Nitip Link Gan
Cara Membuat Website
BELAJAR PHP
TUTORIAL PHP
Salam www.onphpid.com
trima kasih om,masih pemula
copy ya gan
makasih.
copy ya gan. Terima Kasih..
sama-sama.. semoga bermanfaat
makasih gan ijin sedot gambarnya ya hehe
Post a Comment
Budayakan berkomentar, karena dengan berkomentar berarti anda sudah memberikan saran dan masukan kepada saya.
Salam Sobat Blogger