Pages

CSS

Minggu, 21 Juli 2013

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..


Warning

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


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();

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>






semoga bermafaat