Thursday, November 5, 2009

Tutorial Random Header


Tutorial ini request daripada miss catlina yang bertanyakan bagaimana untuk membuat header didalam blog bertukar² setiap kali dikunjungi atau di refresh. Dengan menggunakan tutorial kali anda boleh memiliki lebih daripada satu header dimana ianya sentiasa bertukar-tukar. Berikut adalah langkah² untuk membuat random header.

1. Ciptakan lebih daripada satu header dengan ukuran size yang sama seperti contoh di bawah:


(Contoh menggunakan 3 Header berlainan)

2. Upload kedalam image hosting seperti photobucket, imageshack, picasa atau hosting sendiri dan dapatkan link header anda.

contoh link header yang telah di upload:
  1. http://www.buspowersystems.com/sii/siibannerblue.jpg
  2. http://www.buspowersystems.com/sii/siibannerblue2.jpg
  3. http://www.buspowersystems.com/sii/siibannerblue3.jpg

3. Login ke ID Blog atau terus ke Dashboard > Layout > Edit HTML dan cari kod ini
<div id='header'>


4. Copy code dibawah dan paste pada bahagian bawah code <div id='header'>
<script type="text/javascript">
var banner= new Array()
banner[0]="http://www.buspowersystems.com/sii/siibannerblue.jpg"
banner[1]="http://www.buspowersystems.com/sii/siibannerblue2.jpg"
banner[2]="http://www.buspowersystems.com/sii/siibannerblue3.jpg"
var random=Math.floor(3*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

5. Save Template dan lihat hasilnya... (anda buleh refresh blog ini dan melihat header seperti didalm tutorial ini .

TAMBAHAN

var random=Math.floor(3*Math.random()); angka 3 bermaksud bilangan header yang ingin muatkan

anda boleh menambah lebih daripada 3 header yang anda inginkan dengan menambahkan code seperti dibawah :

<script type="text/javascript">
var banner= new Array()
banner[0]="http://link-header1"
banner[1]="http://link-header2"
banner[2]="http://link-header3"
banner[3]="http://link-header4"
banner[4]="http://link-header5"
banner[5]="
http://link-header6"
banner[6]="http://link-header7"
banner[7]="http://link-header8"
banner[8]="http://link-header9"
banner[9]="http://link-header10"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

Selamat Mencuba

2 comments:

intanurulfateha said...

.abg ady, tenks sbb share
.tp nk lagi senang, letak je code tu dlm page element-add gadjet-javascript/html
.lg senang, juz kene ubah size header jerr

CatlinaFly said...

salam ...tq mr ady..sy dah buat, ade member ajar , pakai flickr.tapi will try yang cara ni pulak later...tqvm