Cara Membuat Widget Ganti Background Blog dengan Gambar

 
 
 
Saya orangnya suka ganti ganti background blog, pas malam hari Saya mikirin bagaimana yah caranya bisa ganti ganti background blog pakai gambar yang Saya suka, sebelumnya Saya juga sudah menemukan cara mengganti warna background blog sesuka kita dengan menggunakan widget, dan Saya ingat di antara script itu ada tulisan on click, langsung Saya cari query nya cara mengganti background blog dengan gambar menggunakan on click sesuka kita, akhirnya ketemu juga di blog nya teman Saya http://variasiblogger.blogspot.com, langsung saja Saya ambil tuh script nya dan Saya pasang di sidebar blog Saya seperti yang Anda lihat.
Tanpa berlama lama berikut cara memasangnya :
  • Login ke blogger.com, jika sudah,
  • Pilih Tata Letak → Tambah Gadget → pilih HTML/JavaScript
  • Masukkan script di bawah ini ke dalam kolom

<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script><table width="100%" height="15px" border="1px">
<tbody><tr style="text-align: center;font-weight:bold; color:Black;">
<td onclick="bgChange('url(http://img338.imageshack.us/img338/3518/tesxa.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">V</td>
<td onclick="bgChange('url(http://img585.imageshack.us/img585/964/tesou.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">A</td>
<td onclick="bgChange('url(http://img694.imageshack.us/img694/2540/tesaz.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">R</td>
<td onclick="bgChange('url(http://img849.imageshack.us/img849/2701/tesbi.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">I</td>
<td onclick="bgChange('url(http://img192.imageshack.us/img192/4752/blog4ys.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">A</td>
<td onclick="bgChange('url(http://img542.imageshack.us/img542/7716/blog5.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">S</td>
<td onclick="bgChange('url(http://img406.imageshack.us/img406/6034/tesjb.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">I</td>
<td onclick="bgChange('url(http://img59.imageshack.us/img59/1149/tesp.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">!</td>
</tr>
</tbody></table>

Perhatian :


  • Tulisan berwarna merah bisa sobat ganti dengan link URL gambar yang sobat punya.
  • Simpan dan lihat hasilnya
Selamat Mencoba !


This entry was posted in

Leave a Reply