Membuat Random Image Pada Header Blogspot

Apakah anda pernah melihat suatu blog yang mempunya gambar header yang jika di refresh berubah ubah ?, ya kali ini kita akan mambahas cara membuat. Untuk memasang random image pada header agak sedikit berbeda dengan memasang random image widget, gambar yang akan ditampilkan harus sesuai ukuran header, bisa juga lebih kecil atau lebih besar tapi nantinya akan timpang (tidak enak untuk dilihat), untuk itu sebelum memakai script ini sebaiknya pastikan dulu ukuran header blog kalian, lakukanlah edit gambar sesuai ukuran header sebelum diupload, selain itu biasanya setelah memasang script ini tampilan gambar tidak akan langsung pas karena tiap template ukuran jarak antara header berbeda, bila hal itu terjadi ubahlah bagian padding header untuk menyesuaikannya...langkah pembuatannya




loggin blogger.com > Rancangan > Edithtml
Cari kode <body> dan masukkan kode berikut di bawahnya


<script type="text/javascript">
var banner= new Array()
banner[0]="http://alamat-gambar-kamu.gif"
banner[1]= "http://alamat-gambar-kamu.gif"
banner[2]= "http://alamat-gambar-kamu.gif"
banner[3]= "http://alamat-gambar-kamu.gif"
var random=Math.round(3*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>

oke simpan dan lihat hasilnya..

untuk menambah agar lebih banyak sobat cukup menambahkan jadi seperti ini

banner[4]= "http://alamat-gambar-kamu.gif"
banner[5]= "http://alamat-gambar-kamu.gif"
banner[6]= "http://alamat-gambar-kamu.gif"  \

dan seterusnya, mudah bukan?

semoga bermanfaat

Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Jasriman Sukri, Published at 03.16 and have 8 komentar

8 komentar:

  1. hmmmm buat berat je tu :p, nice post dah gan

    BalasHapus
  2. . . emmmmmm,, ada yg biasa gak?!? yg cuma pake widget aja tanpa harus menaruh edit html lagi . .

    BalasHapus
    Balasan
    1. waduhhh, gk tau mbak,,
      coba kode tu tambahin ke HTML/Javascript
      jadi nggak?

      Hapus
  3. Makasih Brooo...nginfo yang perlu di coba...

    BalasHapus