Cara membuat background random image pada header ~ Tutorial Blogger

> Cara membuat background random image pada header

Senin, 02 Januari 2012

25

Cara membuat background random image pada header

Senin, 02 Januari 2012 | 10.17 25 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 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.
Ping your blog, website, or RSS feed for Free


Related Articles :

Baca artikel lain :

Informasi Artikel :
Judul : "Cara membuat background random image pada header"
Diulas Oleh : | Senin, 02 Januari 2012 | 10.17
Description : Pada tutorial ini saya akan memberikan langkah-langkah cara membuat background gambar pada header yang tampil secara acak bergantian. Dan ca...
Label :
Rating : 6.4 Dari 10, Berdasarkan 2500+ Dari 25 000+ Pengunjung.



 

Label:

25 komentar:

  1. potret pertanian8 Maret 2012 pukul 02.51

    kok gak bisa ya gan

    BalasHapus
  2. Noercholis8 Maret 2012 pukul 03.53

    dengan gambar, dan kebanyakan yg bermasalah ULR gambar yang terputus... wajar, karena ULR gambar sering kali memang panjang dan riskan terputus atau terpisah.

    Pada DEMO saya memberikan 5 backgroun yg berbeda, silahkan anda buka 5 kali sekaligus, agar terihat bahwa blog kita memiliki background yg berbeda-beda.

    Silahkan dicoba lagi semoga berhasil dan bermanfaat...

    BalasHapus
  3. Anonim11 Maret 2012 pukul 20.51

    gan cari body-nya kog gak ada ya?

    BalasHapus
    Balasan
    1. Noercholis12 Maret 2012 pukul 02.57

      pasti ada..., setiap web ataupun blog menggunakan tag fead dan tag body.
      Silahkan baca artikel "Cara mencari" jode HTML, ini link nya :

      http://www.carabuatwebgratis.com/2011/04/cara-mencari-kode-html.html

      Hapus
  4. 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. Noercholis24 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
  5. 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
  6. Unknown14 April 2012 pukul 16.36

    Gan Kalo Banner bisagan???

    BalasHapus
  7. imronreview28 April 2012 pukul 07.36

    bagus seklai terus maju untuk kemajuan dunia maya

    BalasHapus
  8. Karang Taruna Sub Unit RT.005/06 7 Mei 2012 pukul 00.22

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

    BalasHapus
  9. Adi Saputra14 Mei 2012 pukul 22.36

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

    BalasHapus
  10. Haris Nazarudin19 Mei 2012 pukul 18.15

    kalo merubah gambar pada background blogger secara otomatis gimana gan?

    BalasHapus
    Balasan
    1. Noercholis23 Mei 2012 pukul 05.08

      Maksudnya bergantian seperti langkah pada artikel ini?

      Anda tinggal ganti ID "#header-wrapper" dengan "#body"

      Tapi sebaiknya anda cek dulu pada html template anda, anda cari kode css pd bagian body... apa menggunakan "#body" atau "#body-wrapper" atau dg id lain.
      Silahkan gunakan sesuai dg Id yg dipakai pada template anda...

      Hapus
  11. xamthone plus10 Juni 2012 pukul 21.33

    wuish mantap gan saya coba ikuti ya ?

    BalasHapus
  12. bloggers info23 Juli 2012 pukul 21.33

    aduh gan rumit amat yahh ,puyeng ane,,,

    BalasHapus
  13. Jefry17 Januari 2013 pukul 23.50

    saya juga pengen membuat background images secara random
    trims info scriptnya

    BalasHapus
  14. 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
  15. pulau tidung18 Maret 2013 pukul 10.07

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

    BalasHapus
  16. DARAH TINGGI23 Mei 2013 pukul 20.47

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

    BalasHapus
  17. pulau tidung7 Juli 2013 pukul 12.16

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

    BalasHapus
  18. 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

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI

Artikel Terbaru

POST POPULER

Entri Populer


HEADLINE

DAFTAR ISI

DAFTAR ISI


BLOGGER

Comments

HTML

Side Ads

CSS

Footer Ads

JAVASCRIPT

Random News


BACKLINK

INFO

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.

CEO BLOG MAS NOER

Noer cholis

Plosokuning V, Minomartani, Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK




Baca artikel "Manfaat Tukar Link"











Baca artikel "Manfaat Tukar Link"

LINK SAHABAT

LINK SAHABAT


CHAT

CHAT




TESTIMONI

Follow Us

Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

RECENT COMMENT

Recent Comments


top down