Wednesday, 12 August 2015

PANDUAN CARA MEMBUAT RANDOM IMAGE HEADER DI BLOGGER

PANDUAN CARA MEMBUAT RANDOM IMAGE HEADER DI BLOGGER


Sebenarnya saya yakin sudah blogger banyak yang membahas hal ini, tapi bagi newbie blogger seperti saya, tidak ada salahnya bila ikut membantu teman-teman newbie blogger yang lainnya, untuk memvariasi blognya biar lebih hidup. 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.

Nah, anda ingin tahu caranya? Silahkan simak penjelasan dibawah ini:




Berikut ini cara memasang random image header pada blogger:

Setelah anda Sign In ke akun blogger anda....
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>

Bagaimana seandainya anda pasang 5 gambar atau lebih? Dibawah ini adalah kode html nya:

</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>

 
Catatan: http://alamat_url_gambar => ini merupakan alamat gambar, caranya arahkan alamat URL dimana tempat gambar kamu disimpan, (misalnya di photo bucket dll)
  
Share: