Membuat Gambar Header Blog Berubah Otomatis

Senin, November 08, 2010

Apakah Anda bosan dengan gambar header blog yang itu-itu saja? Anda bisa menggantinya dengan gambar baru. Weits….tunggu, jangar berpikir ribet dulu. Ada cara mudah untuk mengganti gambar header blog Anda secara otomatis. Jadi Anda tidak musti repot mengganti gambar dengan cara upload secara manual.

Maksud dari gambar header blog yang berubah secara otomatis disini adalah gambar yang ada pada header akan berubah dengan gambar yang lain ketika halaman blog direfresh. Berikut adalah langkah-langkah untuk mengubah gambar header blog secara otomatis :
1. Login ke dashboard > rancangan > edit HTML
2. Cari kode :
<body>
3. Copy dan paste kode dibawah ini tepat dibawah kode diatas.
<script type='text/javascript'>
var HeaderImage= new Array()
HeaderImage[0]=&quot;URL-OF-HEADER-IMAGE-1&quot;
HeaderImage[1]=&quot;URL-OF-HEADER-IMAGE-2&quot;
HeaderImage[2]=&quot;URL-OF-HEADER-IMAGE-3&quot;
HeaderImage[3]=&quot;URL-OF-HEADER-IMAGE-4&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-5&quot;
var random=Math.round(4*Math.random());
document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; 
background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);
</script>

Catatan :
Rubah URL-OF-HEADER-IMAGE dengan url gambar Anda.
Jika kode diatas tidak berfungsi pada template blog Anda, coba rubah tag
#header-wrapper
dengan :
#header
Anda juga bisa menambah jumlah gambar yang ingin dirubah lebih dari 5, tetapi ingat untuk merubah juga tag
4*Math.random()
Angka 4 disana berarti Anda ingin merubah 5 gambar. Jika Anda ingin merubah 8 gambar, maka angka 4 dirubah menjadi 7.

4. Sekarang simpan dan selesai. Refresh blog Anda di browser untuk melihat hasilnya.

Selamat mencoba.

23 komentar:

Lina Marliana mengatakan... [Jawab]

Nice info.. Thanks for sharing.. :)

Yogo mengatakan... [Jawab]

@Lina Marliana
Semoga bermanfaat

yusuf blog mengatakan... [Jawab]

Salam perkenalan saja dulu nih

tantridamaidihati mengatakan... [Jawab]

makasih mas...saya cuma mau merubah ukuran di headernya aja, soalnya ketika memasukan gambar secara manual melalui edit header..gambarnya gak cukup...(cuma separuhnya aja)

Yogo mengatakan... [Jawab]

@tantridamaidihati
Kalau mau merubah ukura header, harus mengedit html template.
Selamat mencoba.

homemodern mengatakan... [Jawab]

makaih infonya gan...

couplax21 mengatakan... [Jawab]

sip bangets nih..

-indigo- mengatakan... [Jawab]

aku mau ganti template baru , tapi header d template lama tetep aja nongol :((
gmna caranya biar gag nongol lagi :((
help please :'(

Yogo mengatakan... [Jawab]

@-indigo-
Biasanya di template baru header yg lama gak nongol memang, tapi judul blognya tetep ada.

Coba pada saat ganti template baru widget headernya dihilangkan saja.

Abe Wisnu mengatakan... [Jawab]

weheheh,,, mantap ... :D

Afung Aza mengatakan... [Jawab]

Makasih infonya, kebetulan lagi nyari2 cara nya..

rahman mengatakan... [Jawab]

bagus nih infonya :)

poles marmer mengatakan... [Jawab]

terima kasih infonya...........

Java Kahuripan mengatakan... [Jawab]

sipp!!

Mantap infonya Gan.. sedang aq coba di blog baruku...thanks Gan

Hot Sahring mengatakan... [Jawab]

Bagus juga sih... Tapa saya memnganalisa, ini akan menambah berat beban loading halaman blog.

bintang rizal mengatakan... [Jawab]

Gan kalau misalnya kalu mau menyesuaikan gambar header nya sama gmna ya ???
Please help me ^_^

cerdaskom mengatakan... [Jawab]

Infonya bagus, tetapi menurut saya namanya javascript pasti bikin lambat loading blog ujung-ujungnya pengunjung blog berkurang

Berita Terbaru mengatakan... [Jawab]

Ya gan saya setuju sama cerdaskom.

Klo JavaScript itu memang bikin lambat, mendingan pake widget selain JavaScript gan.

Tapi, kagak apa-apa, yang penting kreasi orang memang beda-beda. Nice share gan, lanjutkan...!

wahh thanks infonya gan

halimi ahmad mengatakan... [Jawab]

Trimakasih Gan Informasinya
Setelah di kopas code di atas tapi gambar header belum berubah gan.
tolong informasna gan untuk rubah Tag

Khalid Baid mengatakan... [Jawab]

Saheli Couture By Preity Zinta Dresses
Parties Hairstyle
Outfits Fashion For Ladies By Zainab Chottani
Elegant Nail Designs Fashion
Churidar Clothes Fashion Style
Indian Lehenga Choli Bridal Dress
beautiful-outfits
clothes-for-all-girls
gowns-designs-new-clothes
lovely-salwar-kameez-by-kalki-vogue
lehnga choli dresses
bridal makeup
STYLISH SUNGLASSES DESIGNS
FROCKS DESIGNS FASHION
Girls Footwear Selection
Pakistani Lehenga Clothes
Fashion Gallery Lehenga Choli
Stylo Best Mehndi Designs
Zara Shahjahan Eid Dresses
Mehndi Patterns for EID
Sophia Tolli Collection
Earrings In Gold Collection
SHIRTS GRAY MAXI SKIRT SKIRTS
midsummer kurta
anarkali suits
WALKS THE RAMP FOR LALA TEXTILES

Semoga hasil nya bagus...

Posting Komentar

Komentarlah sesuai dengan isi artikel. Spam akan saya hapus.

Bagi yang mau bertukar link, silahkan konfirmasi di kolom komentar.

 
 
 

Archives

 
Copyright © SUMBER BELAJAR |