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 :)

BERI KOMENTAR

Silahkan beri komentar dengan bijak dan sesuai dengan topik artikel :)
 

Back to Top