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.

Demo

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 !