Random Banner Header

January 9, 2013

Untuk membuat random banner ada beberapa langkah yang harus sobat lakukan, yaitu :

Langkah pertama
Langkah pertama yang harus dilakukan tentunya Anda wajib membuat beberapa banner, bisa tiga, empat, lima, dan seterusnya tergantung dari keinginan. Untuk membuatnya Anda bisa menggunakan program-program semisal adobe photoshop atau coreldraw serta kawan-kawannya yang lain. Akan tetapi karena saya tidak terlalu mahir masalah program untuk desain gambar, maka tidak akan saya terangkan cara pembuatannya.

langkah kedua
Langkah kedua yang harus dilakukan adalah mengupload banner-banner tersebut pada hosting tempat menyimpan gambar, saya ambil contoh www.photobucket.com untuk cara upload pada situs ini sudah saya terangkan pada postingan terdahulu, jika masih bingung silahkan klik di sini.

Jika proses upload selesai, copy URl address banner-banner tersebut lalu paste pada program notepad guna nanti untuk dimasukan kedalam kode/script yang akan saya berikan.

Langkah ketiga

Langkah ketiga yaitu memasukan script kedalam kode template yang sobat miliki. Script dasarnya adalah :

<script type="text/javascript">
var banner= new Array()
banner[0]="bannerURL0"
banner[1]="bannerURL1"
banner[2]="bannerURL2"
banner[3]="bannerURL3"
banner[4]="bannerURL4"
banner[5]="bannerURL5"
banner[6]="bannerURL6"
banner[7]="bannerURL7"
banner[8]="bannerURL8"
banner[9]="bannerURL9"
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>

Terlihat diatas bahwa jumlah banner yang diberikan adalah 10 buah, akan tetapi jumlah ini tidak mutlak yaitu berapa saja yang Anda inginkan yang penting pada kode var random=Mat. jumlahnya harus sesuai dengan jumlah banner.

Lagi-lagi karena template blogger ada dua yaitu template klasik dan template baru maka untuk menempatkan kode/script akan berbeda, Sehingga pembahasannya pun akan saya bagi menjadi dua bagian. Sebelumnya saya akan memberikan contoh kode yang memuat banner yang sudah saya upload dan masing-masing memiliki URL addres sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/banner5.gif

dan contoh bannernya adalah sebagai berikut (gambar diperkecil) :

Contoh script dari banner-banner ini adalah :

<script type="text/javascript">
var banner= new Array()
banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"
banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"
banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"
banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"
banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"
banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"
banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"
banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"
banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"
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>

Untuk caranya silahkan ikuti langkah-langkah berikut ini.

    1. Sign in di blogger dengan id Anda
    2. Klik menu layout
    3. Klik menu Page Elements
    4. Klik tulisan Add a Page Element
    5. Klik tombol ADD TO BLOG di bawah tulisan HTML/JavaScript
    6. Copy paste kode berikut kedalamnya

<script type="text/javascript"> var banner= new Array() banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif" banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif" banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif" banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif" banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif" banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif" banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif" banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif" banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif" banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif" 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>

  1. Klik tombol SAVE CHANGES
  2. Selesai.

Sekedar tambahan (padahal masih banyak), kode diatas adalah sekedar contoh, silahkan ganti address bannernya dengan yang di miliki sobat.

Mungkin ada beberapa template yang di pakai sobat saat ini banner headernya tidak sesuai dengan keinginan sobat, sebenarnya ukuran tersebut bisa kita ganti. Contoh untuk template minima sebagai berikut :

@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}

Pada kode diatas terlihat bahwa untuk lebar banner header sebesar 660p(width:660px;), nilai tersebut bisa kita rubah sesuai dengan keinginan. Dan untuk tinggi dari banner header tidak di definisikan, nah agar banner kita sesuai dengan keinginan maka kita harus menyelipkan kode tambahan sebagai definisi, contoh lebar yang di inginkan adalah sebesar 150px, maka kode yang di tambahkan adalah height:150px; sehingga kode di atas menjadi seperti ini :

@media all {
#header {
width:660px;
height:150px;
margin:0 auto 10px;
border:1px solid #ccc;
}

Untuk masing-masing template tentunya akan sangat berbeda, akan tetapi untuk template milik blogger, biasanya untuk bagian header di beri nama #header.

Sumber: http://www.krtutorplus.com/2007/06/random-banner-header.html

Share Our Posts

  • Delicious
  • Digg
  • Newsvine
  • RSS
  • StumbleUpon
  • Technorati