Skip to content Skip to sidebar Skip to footer
Home / Tutorial Blog

Cara Membuat Background Random Image Pada Blog

2 comments

Pada tutorial ini saya akan memberikan langkah-langkah cara membuat background gambar pada header yang tampil secara acak bergantian. Dan cara kerjanya yaitu background header mengalami perubahan background ketika halaman setiap kali kita refresh.

Dengan menambahkan fitur random image pada background header ini, seakan mengganti suasana tampilan blog kita..., Hebat kan?
Munculnya perubahan background tergantung jumlah gambar background header yang kita buat. Dan dibawah ini saya contohkan dengan 5 tampilan background gambar yang berbeda.

Silahkan sobat lihat bentuk dan tampilan background random image pada header ini : LIHAT DEMO 

Bila sobat berminat silahkan sobat ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID sobat.
2. Klik Menu Blog
3. Dan KLik tab Tamplate
4. lalu Klik Edit HTML
5. Cari kode ini atau yang mirip dengan kode di bawah ini 
<body>

6. Copy kode di bawah ini dan taruh tepat setelah kode <body> :
<script type='text/javascript'>

var HeaderImage= new Array()

HeaderImage[0]=&quot;URL GAMBAR UKURAN HEADER-1&quot;
HeaderImage[1]=&quot;URL GAMBAR UKURAN HEADER-2&quot;
HeaderImage[2]=&quot;URL GAMBAR UKURAN HEADER-3&quot;
HeaderImage[3]=&quot;URL GAMBAR UKURAN HEADER-4&quot;
HeaderImage[4]=&quot;URL GAMBAR UKURAN HEADER-5&quot;
var random=Math.round(4*Math.random());

document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);

</script>
CATATAN:
Ganti "URL GAMBAR UKURAN HEADER" dengan URL gambar MILIK Sobat.

Jika kode di atas tidak bekerja pada blog Sobat, silahkan ganti "# header-wrapper" dengan "# header". (ID atau CSS pada bagian header).

Sobat dapat menambahkan gambar yang berbeda untuk latar belakang header pada blog Sobat. Tapi ingat untuk memberi 5 gambar background,   pada bagian "var random" tertulis
"var random=Math.round(4*Math.random());"

Jadi bila Sobat ingin menambahkan menjadi 8 tampilan background yang berbeda, maka kode harus berubah menjadi seperti berikut :
"var random=Math.round(7*Math.random());".

Silahkan perhatikan cara penulisan di bawah ini.:
 <script type='text/javascript'>
var HeaderImage = new Array ()

HeaderImage [0] = "URL-OF-HEADER-CITRA-1"
HeaderImage [1] = "URL-OF-HEADER-CITRA-2"
HeaderImage [2] = "URL-OF-HEADER-CITRA-3"
HeaderImage [3] = "URL-OF-HEADER-CITRA-4"
HeaderImage [4] = "URL-OF-HEADER-CITRA-5"
HeaderImage [4] =" URL-OF-HEADER-CITRA-6"
HeaderImage [4] =" URL-OF-HEADER-CITRA-7"
HeaderImage [4] =" URL-OF-HEADER-CITRA-8"

var random = Math.round (7 * Math.random ());
document.write (" <style> ");
document.write (" # header-wrapper {");
document.write ('background: url ("' + HeaderImage [acak] + '") tidak mengulangi-kiri TOP;');
document.write ("}") ;
document.write ("</ style>");
</ script>

6. Simpan Template.


Luangkan waktu sobat untuk memberi komentar


Tags :
Membuat gambar header blog berbeda jika di refresh, membuat gambar di header blog, menggati gambar di header blog, gambar header blog.

2 comments for "Cara Membuat Background Random Image Pada Blog"

  1. UnknownFebruary 25, 2012 at 8:45 PM

    Sob, ane mau request gimana caranya membuat like fb di samping blog! seperti bog ini!

    ReplyDelete
  2. UnknownFebruary 26, 2012 at 12:51 PM

    ini sob caranya silahkan di klik dan jangan lupa beri komentar http://cheatssoul.blogspot.com/2012/02/memasang-3-floating-blogger-twitter.html

    ReplyDelete
Template Blogger Terbaik Rekomendasi