Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Cara buat "Random Image Header" pada Blogger

Random image header pada blogger sebenarnya bisa kita ganti secara otomatis setiap kali halaman di Refresh atau di Reload.  Tujuan tutorial kali ini tentu tetap membuat blog kita tampil lebih bergaya dan punya warna warni tersendiri. Selain membuat blog terlihat lebih hidup juga berguna menghilangkan rasa bosan pengunjung ketika mengunjungi blog kita, agar blog tidak monoton kita perlu menambahkan Random image header ini. pengen tau cara buatnya..

 

Cara pasang image pada blogger:

 

Buka  Template -> Edit HTML

 

Cari kode <b:skin><![CDATA[

 

Kemudian Copy kode dibawah ini, letakan (paste) kode tersebut dibawah kode diatas, kemudian simpan dan lihat hasilnya.

 

</script>
<script type='text/javascript'>
var gambar= new Array()
gambar[
0]="http://alamat_url_gambar1"
gambar[
1]="http://alamat_url_gambar2"
var acak=Math.floor(
2 *Math.acak());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + gambar[acak] + '") no-repeat top left ;');
document.write(" }");
document.write("</style>");

</script>

 

Gimana seandainya ada 5 atau lebih image?

 

</script>
<script type='text/javascript'>
var gambar= new Array()

gambar[0]="http://alamat_url_gambar1"
gambar[1]="http://alamat_url_gambar2"
gambar[2]="http://alamat_url_gambar3"
gambar[3]="http://alamat_url_gambar4"
gambar[4]="http://alamat_url_gambar5"
var acak=Math.floor( 5 *Math.acak());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + gambar[acak] + '") no-repeat top left ;');
document.write(" }");
document.write("</style>");

</script>


 

Info: http://alamat_url_gambar => ini merupakan alamat gambar, caranya arahkan alamat URL dimana tempat gambar kamu disimpan
 


Selamat mencoba :)

28 komentar:

  1. Ohh, yg ini aq udah bisa oom, yg aq mau yg banner/image dihalaman text nya bisa ganti-ganti tiap refresh..,

    kaya dihalaman cosaaranda itu lhoo, ommm...,

    aq, nanya ama oom cosa, dia bilang kalo blogger dia ngga tahu, oleh punya dia script tuk wordpress

    jadi, harus nunggu lagi nih artikel dari oom, (nunggu dgn setia lho)

    he he...,

    BalasHapus
  2. oh kalo seperti yang kamu bilang..om belum buat nanti coba om buat ya, gak janji lo kalo bisa..hihihi

    BalasHapus
  3. lain ya kod nya... saya menggunakan kod yang berbeza sekali dengan kamu tapi hasilnya serupa. tq

    BalasHapus
  4. Anonim6/7/08

    AKU PINGINNYA HEADERKU TERUS BERGERAK. GIMANA?

    BalasHapus
  5. Kalo random imagenya pake flash bisa ga ya om? :)

    BalasHapus
  6. Anthony Harman15/7/08

    om, saya udah coba kod-nya, tapi koq kagak berhasil ya? apa element header image yg disetingan awal perlu dihapus?

    BalasHapus
  7. Anjank4/8/08

    Wahh,, thx om... helpful bged....:-*

    BalasHapus
  8. kok pinter banget yah orang orang jaman sekarang :)

    BalasHapus
  9. Anonim28/9/08

    udah tak ulang2 gak berhasilll :((
    yg keluar malah berubah jadi kode2 gitu blog nya

    BalasHapus
  10. FREE DOWNLOAD25/11/08

    Coba ah...
    MANTAP

    BalasHapus
  11. Dear Omm
    Bagaimana cara membuat alamat gambar,"http://alamat_url_gambar1"

    thank$rgds

    BalasHapus
  12. O-OM...sudah dicuba....namun tambah anur..OM...gimana ya...?

    BalasHapus
  13. sLaM kNaL om ...sYa mo tnya gMna cara pasang foto di header blogspot...aku cba yg diatas eh munculnya di posting ...trima kasih yach om ...email sya ..yusuf_ymail@yahoo.co.ic ;))

    BalasHapus
  14. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  15. Om, Saya sudah coba beberapa kali kok ngak bisa? :((
    Mohon bantuannya email saya c1tra_sw3ety@yaoo.com

    BalasHapus
  16. saya belum tahu alamat url,mohon penjelasanya lebih rinci

    BalasHapus
  17. trus masukin fotanya gmn

    BalasHapus
  18. Error , kok banyak kode gak jelas gitu ?? apa gara 2 kodenya numpuk dengan tanda "/*" atau gara2 image di layout halamanNya masih ada ??

    BalasHapus
  19. eror om.... apa ada kode yg kurang? mohon petunjuknya

    BalasHapus
  20. Bisa kasi panduan buat ganti header di wordpress gak?

    BalasHapus
  21. Udah saya coba Bos, tapi hasilnya jadi acak-acakan ya, apa ada yang salah. Untuk diketahui saya pake template elegant style kodenya disimpan dibawah kode yang udah disebutkan kan

    BalasHapus
  22. helo,,OM, gmna klu dibawahnya kode itu ,dah ditaruh kode lain,,,msih bisa,gak ya,,,

    BalasHapus
  23. udah di coba om,,tapi kok masih belum bisa ya.? mohon bantuan

    BalasHapus
  24. tolong om dikasih penjelasan yg lebih detail...misal nyimpan gambar (4shared / ziddu/ photobucket..dimana terus ambil alamat urlnya.. terus copy dibawah kode persis atau boleh di bawah kode tadi.. atau template mesti pake yang punya bawaan atau yg sudah di modif juga bisa... wakakaka....juga mo belajar..pizz

    BalasHapus
  25. Anonim17/1/11

    maksudnya apa ya? plis dii bales. saya mau bikin gambar header..

    BalasHapus

Silahkan beri komentar dengan bijak dan sesuai dengan topik artikel, karena semua komentar akan saya moderasi terlebih dahulu sebelum ditampilkan. Thanks :)

 

Back to Top