Cara Membuat Background Random Image Pada Blog
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 :
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
4. lalu Klik Edit HTML
5. Cari kode ini atau yang mirip dengan kode di bawah ini
6. Copy kode di bawah ini dan taruh tepat setelah kode <body> :
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.:
6. Simpan Template.
Luangkan waktu sobat untuk memberi komentar
Tidak ada komentar:
Write Komentar