Cara menambahkan Background Blog dengan gambar yang dapat berubah-ubah

      Yups,kali ini Ane mau bagiin sesuatu yg bertema tentang Blog nih gan yaitu cara untuk menambah background blog dengan gambar yang berganti ganti secara otomatis.

oh iya...ini adalah 100% hasil dari percobaan admin yang kesekian kalinya yang membuahkan hasil yang memuaskan..

Langsung aja gan...

Untuk demo nya bisa dilihat pada tampilan dekstop Blog ini.

Pertama ubah terlebih dahulu tampilan blog menjadi transparant supaya background gambar terlihat.

1. Pilih "Template" -> "Edit HTML"

2. Cari kode #outer-wrapper{ dengan menggunakan Ctrl + F

3.lalu ganti kode tersebut dengan kode di bawah ini:

#outer-wrapper{

width:980px;

margin:0 auto;

padding:5px;

background:#f2f2f2;

filter: alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 0.6;

-khtml-opacity: 0.0;

border:1px solid $bordercolor;

text-align:$startSide;

font:$bodyfont

} 

Note: 

Silahkan sesuaikan nominal kode yang berwana merah dengan selera agan.saya sarankan jangan terlalu transparant supaya postingan blog bisa terbaca.

6. Klik Pratinjau dan klik Simpan jika sudah berhasil.

Selanjutnya,tinggal Pasang kode kode untuk membuat background yang bisa berubah-ubah.

1. Pilih "Template" -> "Edit HTML"

2. Cari kode </b:skin> dengan menggunakan Ctrl + F

3.Paste kan kode dibawah ini setelah </b:skin>

<script type='text/javascript'>

var banner= new Array()

banner[0]=&quot;http://i.imgur.com/aMl3djy.jpg&quot;

banner[1]=&quot;http://www.roadtovr.com/wp-content/uploads/2014/07/sword-art-online-oculus-rift-virtual-reality.jpeg&quot;

banner[2]=&quot;http://www.hdwallpapersvip.com/uploads/allimg/150811/1-150Q1232956.jpg&quot;

banner[3]=&quot;http://images2.alphacoders.com/548/548274.jpg&quot;

banner[4]=&quot;http://2.bp.blogspot.com/-u2BfqCIkQ1Q/U6lrw9JKbwI/AAAAAAAAB9A/4Ke5X4qM5jI/s1600/Nisekoi+3.jpg&quot;

banner[5]=&quot;https://wallpaperscraft.com/image/death_note_yagami_light_kira_l_lawliet_amane_misa_shinigami_death_god_103304_1280x1024.jpg&quot;

banner[6]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrfzSnwUMATnJba7-2nfyto1eZDusps2_xhUn0Ch6n7dlN8rUpudeXKLbFhO2R_HgS2algkIcnkcztzn8gWtSpKQnOgVt4i2w3zBp_WdwvWWBi0hR0FICAHQ8ShOdjNn9E09nKFjpusbLs/s0/2.jpg&quot;

banner[7]=&quot;http://images2.alphacoders.com/522/522622.jpg&quot;

banner[8]=&quot;http://images2.alphacoders.com/644/644004.png&quot;

banner[9]=&quot;http://static.zerochan.net/SKET.Dance.full.514045.jpg&quot;

var random=Math.floor(10*Math.random());

document.write(&quot;<style>&quot;);

document.write(&quot;body {&quot;);

document.write(&#39; background:url(&quot;&#39; + banner[random] + &#39;&quot;) no-repeat top left;&#39;);

document.write(&#39; background-size:100%;&#39; );

document.write(&#39; background-attachment:fixed;&#39; );

document.write(&quot; }&quot;);

document.write(&quot;</style>&quot;);

</script>

Note: 

Silahkan ganti kode yang berwarna biru dengan link gambar yang ingin di tampilkan.jumlah gambar dapat dikurang ataupun ditambah.

apabila ingin ditambah tinggal samakan saja kodenya kecuali no banner.

4.simpan templatesnya.

Tarraaa...sekarang blog anda sudah berubah.

Note:background sebelumnya akan tertutupi dengan background baru.

#semoga bermanfaat.

silahkan bila ingin memcopas dengan syarat cantumkan sumber blog ini gans..

terimakasih :)