Cara membuat background random image pada header

23
A+ A-
Print Email
http://tutorialbloggermasnoer.blogspot.com/2012/01/cara-membuat-background-random-image_2.html
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 anda lihat bentuk dan tampilan background random image pada header ini : LIHAT DEMO

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

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.


4. Cari kode di bawah ini atau yang mirip dengan kode ini :
<body>

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

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

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

Jadi bila anda 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>

5. Simpan Template.

Nah untuk mencoba silahkan anda refresh halaman blog anda. maka tampilan background akan berganti.

Atau akan LIHAT DEMO lagi.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.
Diposting oleh

Related

Tutorial Blogger 824401723927646571
Posting Lebih Baru Posting Lama Beranda item

Posting Komentar

  1. potret pertanian8 Maret 2012 pukul 02.51

    kok gak bisa ya gan

    BalasHapus
  2. Anonim11 Maret 2012 pukul 20.51

    gan cari body-nya kog gak ada ya?

    BalasHapus
  3. allia.furniture24 Maret 2012 pukul 12.43

    maaf masa saya mau tanya bila ada header wraper dan header bar cara gantinya gimana mas, mohon pencerahannya supay bisa berubah gambar keduanya thank ya

    BalasHapus
    Balasan
    1. Noer Cholis24 Maret 2012 pukul 18.50

      Silahkan anda coba tambahkan dua script diatas, yang satu untuk header-wrapper dan satunya lagi untuk header-bar.

      Yang jelas script ini berfungsi menampilkan background secara acak bergantian , dimanapun anda menempatkan... dan saya juga sudah pernah memakainya untuk background sidebar.

      Hapus
  4. allia.furniture31 Maret 2012 pukul 12.43

    terima kasih mas atas penjelasannya, saya mau coba dulu, ada saya mau tanyain bila cuma satu aja yang diganti header wraper saja dan header barnya tidak muncul gimana mas. sukses mas kapan mau buat buku buat para bloger pemula yang lain nya nih,

    BalasHapus
  5. Noer Cholis15 April 2012 pukul 08.40

    banner tanpa link bisa...

    BalasHapus
  6. imronreview28 April 2012 pukul 07.36

    bagus seklai terus maju untuk kemajuan dunia maya

    BalasHapus
  7. Karang Taruna Sub Unit RT.005/06 Kel. Pinangsia - Kec Tamansari7 Mei 2012 pukul 00.22

    tutornya sangat bagus sekali .....Mohon Izin templetenya buat blog katar ya bozzzzz

    BalasHapus
  8. Adi Saputra14 Mei 2012 pukul 22.36

    Mantab gan,.,/
    thanks dah di share,.

    BalasHapus
  9. Haris Nazarudin19 Mei 2012 pukul 18.15

    kalo merubah gambar pada background blogger secara otomatis gimana gan?

    BalasHapus
  10. xamthone plus10 Juni 2012 pukul 21.33

    wuish mantap gan saya coba ikuti ya ?

    BalasHapus
  11. bloggers info23 Juli 2012 pukul 21.33

    aduh gan rumit amat yahh ,puyeng ane,,,

    BalasHapus
  12. Jefry17 Januari 2013 pukul 23.50

    saya juga pengen membuat background images secara random
    trims info scriptnya

    BalasHapus
  13. Anonim30 Januari 2013 pukul 08.32

    nah nyari URL gambar yang mau kita pakai dimana gan, misal gambarnya kita bikin sendiri di potoshope atau corel?

    BalasHapus
  14. pulau tidung18 Maret 2013 pukul 10.07

    gan klo ganti header dari situ btemplate bsa gak??
    makasih info'y

    BalasHapus
  15. DARAH TINGGI23 Mei 2013 pukul 20.47

    keren, saya praktekan ya gan... makasih loooooooo....

    BalasHapus
  16. pulau tidung7 Juli 2013 pukul 12.16

    bicara masalah background, untuk pencinta warna dan sering banyak orang minati warna apakah itu

    BalasHapus
  17. Anonim28 Januari 2014 pukul 09.50

    Kalau menginginkan gambar terpilih tampil otomatis sesuai jam saat itu (jam saat pengunjung membuka blog) bagaimana bos??

    Jadi nanti ada 24 gambar dan tampil otomatis bergantian tiap jam.

    Thank You :)

    BalasHapus
  18. VektorSagara14 Oktober 2020 pukul 05.02

    Thanks Bray, work..2020.

    BalasHapus

emo-but-icon

Tabs

Hot in week

Recent

Comments

item