Membuat Random Header pada Blog

Sunday, 27 November 2011

Seorang pembaca bertanya bagaimana header dan gambar latar belakang Blogger dapat diputar sehingga bisa menunjukkan gambar yang berbeda setiap kali halaman di-refresh atau reloaded. Sementara kita bisa menggunakan format tampilan slide, waktu rotasi akan tetap. Aku memiliki JavaScript yang cukup sederhana yang bisa digunakan untuk header atau gambar baru setiap kali Blog Blog latar belakang di-refresh. Hal ini berguna jika Anda memiliki beberapa gambar latar belakang yang cocok untuk Blog Anda dan Anda ingin menampilkan semua.

Rotating Header Image
Sedikit mengingatkan, bahwa tujuan atau cara kerja script ini adalah untuk membuat rotasi hedaer blog yang berbeda-beda saat halaman di reload atau di refresh..,
Pertama tama anda harus membuat gambar yang panjang dan lebarnya sesuai dengan panjang dan lebar header dari blog anda, anda bisa menggunakan pengedit foto yang sederhana, seperti picasa, Photosob, atau Ms Picture Manager, untuk pemotongan foto yang sesuai.

Setelah pembuatan foto selesai, upload semua foto-foto tersebut ke hosting untuk mendapatkan alamat Url nya.,

Login ke Dashboard Anda. trus ke Template -> Elemen Halaman -> Tambahkan sebuah Elemen Halaman dan pilih "HTML / JavaScript". dan masukkan script di bawah ini, tanpa judul ya dan klik save.,

<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
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>

Penjelasan

1. URL 01 s/d 10 adalah alamat url dari image yang anda upload di hosting tadi.
2. Angka merah (10) adalah jumlah random image yang akan anda buat sebagai background nantinya, bisa anda ganti dengan kisaran angka 1-9,
3. sesuaikanlah jumlah image dengan settingan anda, apabila pada point 2 anda ganti dengan angka 5 berarti anda harus menghapus banner[5]="Image10URL"s/d banner[9]="Image10URL"

Random Backgound Posting

jika anda ingin membuat background blog berbeda alias random langkahnya sama dengan di atas tapi dengan script yang berbeda..,adalah seperti di bawah ini

<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat center center;');
document.write(" }");
document.write("</style>");
</script>

Penjelasannya kurang lebih sama dengan di atas, hanya saja yang warna orange harus diperhatikan untuk pengulangan backgroundnya nanti, apabila gambar background anda tidak memerlukan pengaulangan maka ganti dengan no-repeat.


okelah selamat mencoba dan berkreasi dengan tampilan blog yang cukup menarik, perhatikan hedaer blog ku ini, jika anda ke home maka hader imagenya akan berganti, itu adalah contoh sederhananya, karena saya hanya menggunakan 2 image saja.,

Matur nuwun

Labels: Blog trik

Thanks for reading Membuat Random Header pada Blog. Please share...!