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
0 komentar: