Cara membuat background random image pada header

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by mukhammad nur Jumat, 13 April 2012 0 komentar
Cara membuat background random image pada header. Pada tutorial ini  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..., Heboh kan?
Munculnya perubahan background tergantung jumlah gambar background header yang kita buat. Dan dibawah ini saya contohkan dengan 5 tampilan background gambar yang berbeda.

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.

Cara membuat background random image pada header

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.

bila ada yang kurang tepat silahkan anda coba utak atik di HeaderImage[ ]

artikel ini tentang Cara membuat background random image pada header
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara membuat background random image pada header
Ditulis oleh mukhammad nur
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://cintafido.blogspot.com/2012/04/cara-membuat-background-random-image.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Online Skill - Cinta fido Fido | Kopi kanan Akherat | Kisah Nabi Muhammad | Sahabat | Belajar Blogger | Template | HTML | Tutorial | Komputer.

investasi semoga anda senang

kurs mata uang BCA-2


Selamat datang di blog cinta fido, semoga anda diberi keSehatan oleh alloh SWT

Islam itu Cinta Damai Agama Islam Cinta Damai
jihad Damai adalah amal kebaikan yang Allah perintahkan dan menjadi sebab kokoh dan kemuliaan umat islam