Cara Mengubah Background Blog Otomatis Sesuai Selera Pengunjung

Hai Sobat! Postingan artikel kali ini adalah Mengganti Background blog Secara Otomatis.

Sebenarnya banyak sekali cara untuk mempercantik tampilan blog atau website kita. Salah satu untuk mempercantik blog kita adalah dengan merubah backround blog secara otomatis berganti ganti. Untuk merubah backround blog otomatis ini adalah menggunakan Sebuah Widget yang Berada Di Sidebar blog atau website kita. Jadi ibaratnya pengunjung kita biar gak bosan-bosan melihat blog kita warna itu melulu wkwk .

Berikut ini adalah Contoh Penampakan Widget untuk mengganti background blog secara otomatis.

Tampilan Wiget Tombol Background Otomatis

Sudah melihat penampakannya sobat? kalau sudah waktunya langkah-langkah cara membuatnya. Berikut ini adalah langkah-langkahnya!

1. Seperti biasa Login Ke akun Blogger sobat.
2. Pilih Rancangan
3. Edit Laman
4. Tambah Gadget
5. Pilih HTML/JavaScript
6. Masukan kode berikut pada kolom Konten

<div class="widget-content">

<center><b>Pilih Warna Kesukaan Anda</b></center>

<br/>

<script type="text/javascript">

function bgChange(bg)

{

document.body.style.background=bg;

}

</script>

<table border="1" width="100%" height="20">

<tbody><tr>

<td onclick="bgChange('#8B008B')" bgcolor="#8B008B">

</td>

<td onclick="bgChange('#9400D3')" bgcolor="#9400D3">

</td>

<td onclick="bgChange('#008080')" bgcolor="#008080">

</td>

<td onclick="bgChange('#808080')" bgcolor="#808080">

</td>

<td onclick="bgChange('#CD853F')" bgcolor="#CD853F">

</td>

<td onclick="bgChange('#2F4F4F')" bgcolor="#2F4F4F">

</td>

<td onclick="bgChange('#DC143C')" bgcolor="#DC143C">

</td>

<td onclick="bgChange('#4B0082')" bgcolor="#4B0082">

</td>

<td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A">

</td>

</tr></tbody></table>

</div>

Catatan: Silahkan sobat ganti teks yang berwarna merah sesuai dengan keinginan sobat.

Sedangkan Kode yang berwarna biru ganti dengan kode warna sesuai dengan keinginan sobat. jika sobat tidak tau kode warna silahkan sobat menuju Disini ! 

Jika sudah selesai semua, silahkan sobat klik Save Widget. 

Atau bisa anda coba Scribe di bawah ini.

Caranya sama silahkan Login ke blog Anda terlebih dahul

1. Pilih Design dan kemudian click Page Elements
2. Add Gadget, kemudian pilih add HTML/Script
3. Copy-paste scrpt di bawah di HTML/Script Box
4. Click SAVE untuk mengakhiri

<legend><div style="color: red; font-family: Comic sans ms; text-align: center; text-shadow: 1px 1px 3px yellow;">

<div style="color: white; text-align: center;"><span style="font-size: x-small;"><b><blink>Ganti Aja Backgroundnya</blink></b></span></div></div></legend>

url


(http://lh3.ggpht.com/_GbhsWnzJErU/TWVEbyQ2TUI/AAAAAAAAARA/uNZBY_GIWRk/page_t.jpg) no-repeat center center fixed" />GANTI BACKGROUND

<option value="url(http://images2.layoutsparks.com/1/162446/fairies-blue-abstract-image-31000.jpg) repeat center center fixed black" />Firies Blue

<option value="url(http://www.lookpictures.net/photos/registered_photos/6068-blue-background-abstract.jpg) repeat center center fixed black" />Blue Abstract<option value="url

(http://web3mantra.com/wp-content/uploads/2010/09/wallpaper7.jpg) repeat center center fixed black" />Green Wallpaper<option value="url

(http://onlyhdwallpapers.com/wallpaper/green_abstract_by_virgotdump_desktop_1280x960_wallpaper-156245.jpeg) repeat center center fixed black" />Green Relief

<option value="url(http://images2.layoutsparks.com/1/193443/abstract-design-green-curly-31000.jpg) repeat-x bottom center fixed black" />Green-White Abstract

<option value="url(http://cooldesktopbackgroundsx.com/wp-content/uploads/2010/08/red-circles.jpg) repeat-x bottom center fixed black" />Red Ball

<option value="url(http://images2.layoutsparks.com/1/85466/abstract-red-white-black.jpg) repeat center center fixed black" />Red-White-Black

<option value="url(http://wallpapersdb.org/wallpapers/abstract/blue_background_white_glow_1920x1200.jpg) repeat center center fixed black" />Snow White-Blue

<option value="url(http://www.free-desktop-backgrounds.net/free-desktop-wallpapers-backgrounds/free-hd-desktop-wallpapers-backgrounds/920467081.jpg) repeat center center fixed black" />Black-White

<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYwhF2scdmZZOny4OQluN3CVd7DbCrNfy-lx0RUdFuRaz282mgjv6Qhyk7NwJUf_AJ6Z0mnu2VOIMerNCdna2qFk2xPMV-V-iiYUnArNApQQEx7_opv_7D53WTZiT_pCZVP78hdoW3ThQ/s1600/3d+blue+ball+vs+black+balls+hd+wallpaper.jpg) repeat center center fixed black" />Ball one Blue

<option value="url(http://images2.layoutsparks.com/1/136396/abstract-layout-black-design-31000.jpg)repeat center center fixed black" />Abstract-Layout-Black

<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV0hwgCXd3LX8teV6hRkyRsFwvV9cFSvx73ihvJGnKSmWOrXWgQb-1B_sdW0_AlS5f0dy-7jpuirXjAJZK7QU6fTPPZCmAzT1WbCGMXzgRvlUGc7m5y8Xlltb0CqkNxPIHP1GutCcSA19v/s288/evil.gif) repeat center center fixed black" />HEAD EVIL

<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjujsW-rP0vj2tGIZfH7rexjOX9bnUK_SzpHm3tVOtz2t3FeZFiMHelbXIhjNzQGU2vPqRxfOXiqOP_gRABjLeqA57YaMgZ69dqsd46K50q6KCAYgYt9pHg6FiTKZTUYJuWrX0OjZisXa8V/s1600/network-in-green-wallpapers_8348_1920x1200.jpg) repeat center center fixed black" />The Greens

<option value="url(http://3.bp.blogspot.com/_oJpV6yalpOk/TQedeXV0EtI/AAAAAAAAARQ/CaQMrzvwA3w/s1600/14-Christmas-wallpapers-free-blue-christmas-bal-wallpaper.jpg) repeat center center fixed black" />Blue-Sbow White

<option value="url(http://hidefwallpaper.org/wp-content/gallery/windows_wallpaper_02/backgrounds-for-windows-1.jpg) repeat center center fixed black" />Abstract Long Blue

<option value="url(http://flikieapp02.appspot.com/df48b9ea3dfc47baad59d20e4f62f013.jpg) repeat center center fixed black" />Blue Ray

<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjitYbWFYuNM47oNMym6bi4RVSkl0678psP6fLa5JtCDeth91G8kzQnWQknfH3ANbHGi-QgFZE-W4VDTZ0soNv2QFxg2Vw7-F3f64jhPLstySi7qs2-H9nV4kcPNqXDChV4Yp9k7fqWk3rE/s1600/3D+Nature+Wallpaper++++++++++++++++++++++++++++++-1.jpg) repeat center center fixed black" />Forest Blue

<option value="url(http://images2.layoutsparks.com/1/224354/windy-palms-sky-blue.jpg)repeat center center fixed black" />Sky Way

<option value="url(http://www.deviantart.com/download/104717365/Xmas_Wallpaper_08___White_by_bm.jpg) repeat center center fixed black" />Sleeping Forest

<option value="url(http://hdwallpaperpics.com/wallpaper/picture/imag /Orbital_White_Wallpaper_by_slayergrunt117.jpg) repeat center center fixed black" />White Border

<option value="url(http://hdwallpaperpics.com/wallpaper/picture/image/Blue_White_Wallpaper_by_nivener2.jpg) repeat center center fixed black" />Flower on Blue

<option value="url(http://wallpapers.free-review.net/wallpapers/12/Orange_Background.jpg) repeat center center fixed black" />Orange Backround</select>

<div align="left">
<span style="font-family: arial;"><span style="font-size: x-small;">Dapatkan tips-trik</span> <span style="font-size: x-small;"><a

href="http://metrics-blog-ub.blogspot.com/" target="_blank">Click here</a></span></span></div>

Note:

Ganti URL yang berwarna hijau dengan URL gambar background yang Anda inginkan.

Nah, Bagaimana sobat? cukup disini ya sobat tentang artikel diatas. semoga artikel diatas dapat mempercantik blogger sobat. Jangan Lupa Komentarnya sobat. Terima kasih atas perhatian sobat dan Salam Sukses.