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>

gonta ganti foto Background SlideShow

It's a small wonder that many jQuery plugins were developed with the intention of easily introducing pretty slideshows to display and rotate series of images. However, almost none of these slideshow plugins utilize the idea of rotating CSS backgrounds. :)

<!-- jQuery Library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>

<!-- Simple Background SlideShow Script -->
<script src="http://jquery-aing.googlecode.com/files/BackgroundSlideShowAing.js" type="text/javascript"></script>

<!-- Call ssBG.SlideMyBG() function after the page fully loaded -->
<script type="text/javascript">$(window).load(function(){ssBG.SlideMyBG()})</script>

<!-- Advanced settings -->
<script type="text/javascript">
$(window).load(function(){
  var MYlist=[
    "http://mysite.com/photo1.jpg",
    "http://mysite.com/photo2.jpg" // No coma at the end of list
  ];
  var MYstyle='diurut aje bang dari awal ye'; // Default is random
  var MYspeed=10000; // Delay between image changes
  var MYbgPos='top center'; // background-position

  var MYbgSize='100%'; // background-size (you may try auto 100%)
  var MYbgRep='repeat-x'; // repeat-y, repeat, no-repeat

  ssBG.SlideMyBG(MYlist,MYstyle,MYspeed,MYbgPos,MYbgSize,MYbgRep)
})
</script>

<!-- To add a new collection into an existing, you may use ssBG.gbr.concat(list1,list2) -->
<script type="text/javascript">
$(window).load(function(){
  var MYlist1=[
    "http://mysite.com/photo1.jpg",
    "http://mysite.com/photo2.jpg" // No coma at the end of list
  ];
  var MYlist2=[
    "http://mysite.com/photo3.jpg",
    "http://mysite.com/photo4.jpg",
    "http://mysite.com/photo5.jpg" // No coma at the end of list
  ];

  ssBG.gbr=ssBG.gbr.concat(MYlist1,MYlist2);
  ssBG.SlideMyBG('','sort','','','auto 100%');
})

</script>

I am always receptive to any thoughts/suggestions you might have, so have words with me in the comments.