Kali ini saya akan sedikit berbagi kepada teman-teman semua tentang bagaimana cara memunculkan gambar acak pada header blog kita, khususnya untuk pengguna blogger.
Oke, langsung saja caranya.....
1. Silahkan masuk ke akun blogger anda.
2. Buka bagian Design/rancangan.
3. Masuk bagian Elemen halaman.
4. lalu klik Add Widget.
5. Pilih HTML/JavaScript.
6. Masukkan kode berwarna biru berikut ::
<script type="text/javascript">
var banner= new Array()
image[0]="urlimage1"
image[1]="urlimage2"
image[2]="urlimage3"
var random=Math.floor(3*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + image[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>7. Klik Simpan.Keterangan :::Untuk kode di atas, yang berwarna hitam adalah URL dari gambar anda, sedangkan yang berwarna merah adalah jumlah dari gambar yang anda submit.Anda bisa menambah jumlah gambar yang di submit dengan cara menambahkan kode ::
image[3]="urlimage3"image[4]="urlimage4"image[5]="urlimage5" dst..Tapi dengan syarat, angka berwarna merah harus sama dengan jumlah gambar yang anda sumbit.Perlu anda ingat, gambar yang anda masukkan harus sesuai dengan ukuran header blog anda.
Untuk mengetahui berapa ukuran header anda, bisa dicari melalui Rancangan>>Edit Html.
Lalu tekan Ctrl+F dan ketikkan header, maka anda akan menemukan data header anda. Carilah kode width="XXXpx", nilai XXX itulah lebar header anda.
misalnya ::
#header {
width:660px; margin:0 auto 10px;
border:1px solid #ccc;
}Maka lebar header anda adalah 660 Px. anda bisa menggantinya selebar gambar anda.misalnya, gambar yang akan anda submit mempunyai lebar 980 Px, dan tinggi 250 Px.kode tersebut bisa anda rubah menjadi seperti berikut ::#header {
width:980px;
height:250px;
margin:0 auto 10px;
border:1px solid #ccc;
}lalu Simpan, dan lihatlah hasilnya....terima Kasih...
Tidak ada komentar:
Posting Komentar