Navbar

Global Var

Senin, 29 Oktober 2012

Ganti Background Blog dari Postingan pake JavaScript




Pengen dong tiap kali lo posting, suasana blog termasuk Gambar Background sesuai sama isi postingan lo? ya se'enggak-nya sesuai sama gaya lo deh :D



Normalnya JavaScript buat ngeganti Gambar Background itu kaya gini kira-kira..


<script>

document.body.style.backgroundImage='url(http://blogdowallpaper.files.wordpress.com/2009/04/skate_boy_1024_blogdowallpaper.jpg)';

</script>





Kalo mau pake Timer/Pewaktu

biar nunggu dulu beberapa saat (misal 20 detik) baru Gambar Backgroundnya berubah..
<script>

setTimeout("document.body.style.backgroundImage='url(http://blogdowallpaper.files.wordpress.com/2009/04/skate_boy_1024_blogdowallpaper.jpg)'",20000);

</script>





Kalo pengen Gambar Backgroundnya FullScreen

biarpun gambar yang lo punya ukurannya kecil sekalipun tetep aja bakalan di tampilin selayar penuh..

<style type="text/css">

body {
width: 100%;
-moz-background-size:100%;
background-size:100%;
-moz-background-origin:content;
background-origin:content;
background-position:top center;
background-attachment:fixed;
}

</style>


<script>

setTimeout("document.body.style.backgroundImage='url(http://blogdowallpaper.files.wordpress.com/2009/04/skate_boy_1024_blogdowallpaper.jpg)'",20000);


</script>






Warning


Kalo diBlog elo ada Script Random Background Imagenya kemungkinan besar CSS buat nge-bikin FullScreen diatas bakalan ketiban (gak jalan)






Tapi elo gak usah nangis


Ganti aja Script Random Background Imagenya jadi kaya gini..
<script type='text/javascript'>
var bg = [
"http://ALAMAT-GAMBAR.jpg",
"http://ALAMAT-GAMBAR.jpg",
"http://ALAMAT-GAMBAR.jpg"
];

function gantiBg(){
var bgLeng = bg.length-1;
var i = Math.floor(Math.random()*bgLeng);
document.body.style.backgroundImage='url('+bg[i]+')';
}

gantiBg();
</script>

NB: script ini juga bisa ko dipasang di postingan, coba aja..




Kalo mau Gambar Backgroundnya Gonta-ganti sendiri


(misal Gonta-ganti sendiri tiap 20 detik), tinggal nambahin aja Timer
<script type='text/javascript'>
var bg = [
"http://ALAMAT-GAMBAR.jpg",
"http://ALAMAT-GAMBAR.jpg",
"http://ALAMAT-GAMBAR.jpg"
];

function gantiBg(){
var bgLeng = bg.length-1;
var i = Math.floor(Math.random()*bgLeng);
document.body.style.backgroundImage='url('+bg[i]+')';

setTimeout("gantiBg()",20000);
}

gantiBg();

</script>














0 komentar:

Comments Utility