Haiii...,
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:
<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
Ok sampai sini dulu ya caraebit membagikannya, tunggu selanjutnya.
Trimakasih
Semoga bermanfaat