Sunday, 27 November 2011

Membuat Random Header pada Blog

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
Mungkin anda juga menyukai artikel di bawah ini

6 Komentar:

Mr Simpel said...

mantap bro tipsnya , ,, di simpan dlu nh

Aryo Bahak said...

bos ukuran header yang di template biruku berapa ukuranya kok tidak bisa pasang background

Syaiful Anwar said...

ukuran heder itu ada 2 bos, jadi total panjangnya ada 1024 di bagi 2,
jadi klo mau pasang background silhkan sesuaikan dengan panjang hedaernya., ente bisa liat di kode scrip pada templatenya

maksih ya dah doenload

Aryo Bahak said...

bos saya pengen zoom buat gambar bos ,biar orang lihat lebih jelas barang barang produk saya ,tolong di bantu bos

Syaiful Anwar said...

ente main hover aja sob : seperti gambar yang menuju link tinggal ente tambahin aja dngan kode height : ukuran gambaryang ente mau dan width : ukuran lebar yang ente mau

Contoh : tambahkan kode ini di bawah ]]></b:skin>

.post img, table.tr-caption-container {border-left: 8px solid #FA5305;border-right: 8px solid #FA5305;border-top: 8px solid #FED2BE;border-bottom: 8px solid #FED2BE;}
a img {-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
a img:hover {-moz-transform: scale(1.2) rotate(-0deg) ;-webkit-transform: scale(1.2) rotate(-0deg) ;-o-transform: scale(1.2) rotate(-0deg) ;-ms-transform: scale(1.2) rotate(-0deg) ;transform: scale(1.2) rotate(-0deg) ;}

acemaxs said...

mantap buat saya coba, ...

Terima kasih telah berkunjung, Pembaca yang baik adalah yang bersedia meluangkan waktunya untuk meninggalkan komentar