Dalam tutorial ini saya akan menjelaskan bagaimana menambahkan gambar acak, memutar gambar untuk latar header di blog anda. Setelah Anda menambahkan fitur ini ke blog Anda, gambar header blog Anda akan berputar . Sebelum melakukan trik ini Anda harus membuat gambar header untuk blog. Di dalam tutorial ini saya akan menunjukkan bagaimana cara untuk memutar 5 gambar pada header blog.
- Login ke dashboard --> Rancangan --> Edit HTML
- Cari dan temukan kode <body>
- Salin kode dibawah ini tepat setelah kode <body>
<script type='text/javascript'>
var HeaderImage= new Array()HeaderImage[0]="ALAMAT-GAMBAR-1"
HeaderImage[1]="ALAMAT-GAMBAR-2"
HeaderImage[2]="ALAMAT-GAMBAR-3"
HeaderImage[3]="ALAMAT-GAMBAR-4"
HeaderImage[4]="ALAMAT-GAMBAR-5"
var random=Math.round(4*Math.random());
document.write("<style>");document.write("#header-wrapper {");document.write(' background:url("' + HeaderImage[random] + '") no-repeat left TOP;');document.write(" }");document.write("</style>");
</script>
CATATAN:
Ganti "ALAMAT-GAMBAR-X" dengan URL gambar Anda.
Jika kode diatas tidak bekerja untuk blog Anda, kemudian ganti "# header-wrapper" dengan "# header". Kamu dapat menambahkan jumlah yang berbeda dari 5 gambar. Tetapi ingat untuk mengubah "4 * Math.random ()" sesuai dengan jumlah gambar yang Anda tambahkan. Contoh, bila Kamu ingin menambahkan 8 gambar yang berbeda untuk background header blog Anda, kemudian kode harus berubah sebagai "7 * Math.random ()" di bawah. Lihat contoh:
Ganti "ALAMAT-GAMBAR-X" dengan URL gambar Anda.
Jika kode diatas tidak bekerja untuk blog Anda, kemudian ganti "# header-wrapper" dengan "# header". Kamu dapat menambahkan jumlah yang berbeda dari 5 gambar. Tetapi ingat untuk mengubah "4 * Math.random ()" sesuai dengan jumlah gambar yang Anda tambahkan. Contoh, bila Kamu ingin menambahkan 8 gambar yang berbeda untuk background header blog Anda, kemudian kode harus berubah sebagai "7 * Math.random ()" di bawah. Lihat contoh:
<script type='text/javascript'>
var HeaderImage= new Array()HeaderImage[0]="ALAMAT-GAMBAR-1"
HeaderImage[1]="ALAMAT-GAMBAR-2"
HeaderImage[2]="ALAMAT-GAMBAR-3"
HeaderImage[3]="ALAMAT-GAMBAR-4"
HeaderImage[4]="ALAMAT-GAMBAR-5"
HeaderImage[4]="ALAMAT-GAMBAR-6"
HeaderImage[4]="ALAMAT-GAMBAR-7"
HeaderImage[4]="ALAMAT-GAMBAR-8"
var random=Math.round(7*Math.random());
document.write("<style>");document.write("#header-wrapper {");
document.write(' background:url("' + HeaderImage[random] + '") no-repeat left TOP;');document.write(" }");document.write("</style>");
</script>
- Sekarang simpan template Anda. Refresh situs kamu beberapa kali untuk melihat hasil gambar pada header
Artikel Terkait
Posted in: Header
12 komentar:
ditempat aku tak bisa boz ckckcckck!
Beberapa template kemungkinan tidak bisa karena sudah di edit, coba gunakan template lain sebagai demonya...
DI BLOG : http://akatsukifire.blogspot.com/
INI TEMPAT DOWNLOAD LENGKAP GAN SEPERTI:
- TIPS HACKING
- MOVIES Naruto - ANTI VIRUS
- SOFTWARE
- TIPS BLOG - TIPS N TRICKS
- WINDOW
dicoba dulu gan
sudah dicoba dan berhasil mas :)
mNtap gan infonya.. jadi pengen nyoba.
thanks u gan,..infonya
nice inpoh
saya coba dulu mas, maklum pemula..he
saya coba dulu mas, maklum pemula..he
saya coba dulu mas, maklum pemula..he
bos,, cara memasukan alamat gambar di EDit/HTML bagaimana caranya...???