25 August, 2011

Ganti Background dipostingan 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>


7 comments:

Anonymous said...

Thanks on your marvelous posting! I certainly enjoyed
reading it, you are a great author.I will be sure to bookmark your blog
and will eventually come back in the future. I want to encourage one to continue your great work, have a nice day!


Check out my site; how to get your ex girlfriend back

Anonymous said...

I have been exploring for a bit for any high quality articles or blog posts on this sort of area .
Exploring in Yahoo I ultimately stumbled upon this
website. Reading this info So i'm happy to convey that I have a very just right uncanny feeling I came upon just what I needed. I so much indubitably will make sure to do not overlook this web site and give it a glance regularly.

Feel free to visit my weblog - http://www.eufloria-game.com/

Anonymous said...

I do not even know how I ended up here, but I thought
this post was great. I do not know who you are but definitely you're going to a famous blogger if you are not already ;) Cheers!

Look at my web site :: get your ex back

Anonymous said...

Howdy! I'm at work surfing around your blog from my new iphone! Just wanted to say I love reading through your blog and look forward to all your posts! Carry on the fantastic work!

My web-site; de.wiki.in-no.org

Anonymous said...

Today, I went to the beach front with my children. I found a sea shell and gave it to my 4
year old daughter and said "You can hear the ocean if you put this to your ear." She placed the shell to her
ear and screamed. There was a hermit crab inside and it pinched her ear.
She never wants to go back! LoL I know this is totally off topic but I had to tell someone!



Here is my page :: cold sore cure

Anonymous said...

Hello, yes this piece of writing is really pleasant and I have learned lot of things from it on the topic of blogging.
thanks.

Look at my web blog; how to get your ex back

Anonymous said...

smokeless cigarette, buy electronic cigarette, electronic cigarette, e cigarette, smokeless cigarettes, e cig forum

handapeunpost