Dalam tutorial ini saya akan menjelaskan cara menambahkan gambar acak, berputar untuk background.Ketika header blogger setelah Anda menambahkan fitur ini ke blog blogger anda, header image blog Anda akan memutar / perubahan di setiap halaman.Sebelum melakukan trik ini Anda harus membuat gambar header untuk blog.Dalam tutorial Anda ini saya akan menunjukkan bagaimana untuk memutar 5 gambar header.
1.Log in ke dashboard -> Desain--> Edit HTML
2.Scroll bawah ke mana Anda melihat tag body.
3.Now salin kode di bawah ini dan paste tepat setelah tag <body>.
CATATAN:
Ganti " URL-OF-HEADER-IMAGE-X" dengan URL gambar Anda.
Jika kode di atas tidak bekerja untuk blog Anda, kemudian ganti "# header-wrapper" dengan "# header". (ID atau Kelas bagian header).
Anda dapat menambahkan nomor yang berbeda dari gambar dari 5.Tapi ingat untuk mengubah "4 * Math.random ()" sesuai dengan jumlah gambar yang Anda tambahkan.Bila Anda ingin menambahkan 8 gambar yang berbeda untuk latar belakang header blog, maka kode harus berubah sebagai "7 * Math.random ()" Lihatlah contoh di bawah ini.:
4.Sekarang menyimpan template Anda dan Anda selesai.Refresh situs Anda beberapa kali untuk melihat hasil gambar header kamu akan berputar.
1.Log in ke dashboard -> Desain--> Edit HTML
2.Scroll bawah ke mana Anda melihat tag body.
3.Now salin kode di bawah ini dan paste tepat setelah tag <body>.
<script type='text/javascript'> var HeaderImage= new Array() HeaderImage[0]=" URL-OF-HEADER-IMAGE-1 " HeaderImage[1]=" URL-OF-HEADER-IMAGE-2 " HeaderImage[2]=" URL-OF-HEADER-IMAGE-3 " HeaderImage[3]=" URL-OF-HEADER-IMAGE-4 " HeaderImage[4]=" URL-OF-HEADER-IMAGE-5 " var random=Math.round( 4*Math.random() ); document.write("<style>"); document.write(" #header-wrapper {"); document.write(' background:url("' + HeaderImage[random] + '") no-repeat left TOP;'); document.write(" }"); document.write("</style>"); </script>
CATATAN:
Ganti " URL-OF-HEADER-IMAGE-X" dengan URL gambar Anda.
Jika kode di atas tidak bekerja untuk blog Anda, kemudian ganti "# header-wrapper" dengan "# header". (ID atau Kelas bagian header).
Anda dapat menambahkan nomor yang berbeda dari gambar dari 5.Tapi ingat untuk mengubah "4 * Math.random ()" sesuai dengan jumlah gambar yang Anda tambahkan.Bila Anda ingin menambahkan 8 gambar yang berbeda untuk latar belakang header blog, maka kode harus berubah sebagai "7 * Math.random ()" Lihatlah contoh di bawah ini.:
<script type='text/javascript'> var HeaderImage= new Array() HeaderImage[0]="URL-OF-HEADER-IMAGE-1" HeaderImage[1]="URL-OF-HEADER-IMAGE-2" HeaderImage[2]="URL-OF-HEADER-IMAGE-3" HeaderImage[3]="URL-OF-HEADER-IMAGE-4" HeaderImage[4]="URL-OF-HEADER-IMAGE-5" HeaderImage[4]="URL-OF-HEADER-IMAGE-6" HeaderImage[4]="URL-OF-HEADER-IMAGE-7" HeaderImage[4]="URL-OF-HEADER-IMAGE-8" var random=Math.round( 7*Math.random() ); document.write("<style>"); document.write("#header-wrapper {"); document.write(' background:url("' + HeaderImage[random] + '") no-repeat left TOP;'); document.write(" }"); document.write("</style>"); </script>
4.Sekarang menyimpan template Anda dan Anda selesai.Refresh situs Anda beberapa kali untuk melihat hasil gambar header kamu akan berputar.
Komentar
Posting Komentar