Sabtu, 01 Oktober 2011

Cara Membuat Header Blog Bergerak

 Dalam tutorial ini saya akan menjelaskan bagaimana menambahkan gambar acak, memutar gambar untuk latar header di blog anda. Setelah Anda menambahkan fitur ini ke blog Anda, gambar header blog Anda akan berputar . Sebelum melakukan trik ini Anda harus membuat gambar header untuk blog. Di dalam tutorial ini saya akan menunjukkan bagaimana cara untuk memutar 5 gambar pada header blog.

  • Login ke dashboard --> Rancangan --> Edit HTML
  • Cari dan temukan kode <body>
  • Salin kode dibawah ini tepat setelah kode <body>
<script type='text/javascript'>

var HeaderImage= new Array()

HeaderImage[0]=&quot;ALAMAT-GAMBAR-1&quot;
HeaderImage[1]=&quot;
ALAMAT-GAMBAR-2&quot;
HeaderImage[2]=&quot;
ALAMAT-GAMBAR-3&quot;
HeaderImage[3]=&quot;
ALAMAT-GAMBAR-4&quot;
HeaderImage[4]=&quot;
ALAMAT-GAMBAR-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:

Ganti "
ALAMAT-GAMBAR-X" dengan URL gambar Anda.

Jika kode diatas tidak bekerja untuk blog Anda, kemudian ganti "# header-wrapper" dengan "# header". Kamu dapat menambahkan jumlah yang berbeda dari 5 gambar. Tetapi ingat untuk mengubah "
4 * Math.random ()" sesuai dengan jumlah gambar yang Anda tambahkan. Contoh, bila Kamu ingin menambahkan 8 gambar yang berbeda untuk background header blog Anda, kemudian kode harus berubah sebagai "7 * Math.random ()" di bawah. Lihat contoh:

<script type='text/javascript'>

var HeaderImage= new Array()

HeaderImage[0]=&quot;ALAMAT-GAMBAR-1&quot;
HeaderImage[1]=&quot;
ALAMAT-GAMBAR-2&quot;
HeaderImage[2]=&quot;
ALAMAT-GAMBAR-3&quot;
HeaderImage[3]=&quot;
ALAMAT-GAMBAR-4&quot;
HeaderImage[4]=&quot;
ALAMAT-GAMBAR-5&quot;
HeaderImage[4]=&quot;
ALAMAT-GAMBAR-6&quot;
HeaderImage[4]=&quot;
ALAMAT-GAMBAR-7&quot;
HeaderImage[4]=&quot;
ALAMAT-GAMBAR-8&quot;
var random=Math.round(
7*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>
  • Sekarang simpan template Anda. Refresh situs kamu beberapa kali untuk melihat hasil gambar pada header  



sumber : http://alam-hadi.blogspot.com/2011/10/cara-membuat-header-blog-bergerak_01.html

Tidak ada komentar:

Posting Komentar