Cara Membuat Widget Ganti Warna Background Blog Otomatis

Cara Membuat Widget Ganti Warna Background Blog Otomatis - Banyak cara untuk membuat blog menjadi lebih indah, Salahn satunya adalah membuat Widget Warna Background Blog otomatis ini. Dengan memasang widget ini, pengunjung bisa memilih warna background kesukaan mereka. Selain pengunjung, Admin blog pun juga dapat mengganti background blognya dengan widget ini. Untuk contohnya sobat bisa lihat widget yang berada disidebar blog ini. Nah, berikut caranya :

1. Login ke Account Blogger sobat.

2. Pilih Rancangan > Elemen laman > Tambah Gadget

3. Copy kode dibawah ini di HTML/Javascript

<div class="widget-content">
<center><b>Silahkan pilih warna Background kesukaan sobat</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>

Keterangan: ganti yang berwarna merah dengan kata - kata kesukaan sobat.

Yang berwarna biru, itu adalah kode warna. sobat dapat menggantinya dengan kode warna keinginan sobat, yang nanti akan ditampilkan. untuk kode warna, sobat dapat lihat DISINI

4. Klik Simpan. dan lihat hasilnya :)

Cara Memberi Background Pada Judul Widget blog

Cara Memberi Background Pada Judul Widget blog - Kali ini saya akan berbagi Tutorial Blogger, yaitu Cara Memberi Background pada Judul Widget Di Sidebar, dengan memakai Tutorial ini memungkinkan Blog kamu akan terlihat lebih indah, baik ini dia langkah-langkah mudah nya.

Berikut Cara Memberi Background Pada Judul Widget blog :

• Login Ke Blog Kamu.
• Pilih Rancangan
• Lalu Pilih EDIT HTML.
• Centang Expand Widget Template.
• Cari Kode ]]></b:skin> , setelah ketemu letakan Kode di bawah ini tepat di atas kode ]]></b:skin>

.sidebar h2 {
background:#ff9900repeat-x;
color: #071019;
font-size: 12px;
font-family: Arial;
font-weight: strong;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align:center;
}

Keterangan ganti kode yang berwarna Merah dengan kode Warna lainnya.
Lihat Kode Warna

Dan jika kamu menginginkan Background nya pake Gambar, Ga pake Kode Warna maka Kodenya menjadi seperti ini

.sidebar h2 {
background:url(Alamat Gambar Kamu)repeat-x;
color: #071019;
font-size: 12px;
font-family: Arial;
font-weight: strong;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align:center;
}

Contoh seperti Gambar Background milik saya :

(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ZeEYcwWboE-wEYpjW8wvrJaD7PGQ7cBrm2IIf0XtzgrIJKUZ2OWWw_0o8n-SgxykLQGu5HxlxGGpQgMfcFb4d2X0ZBxqb47XaN976ZED8fY9Y42y8zNirN82MU5ffZyZbIz-gC0Lyu2Y/s1600/background-judul-posting.gif)

Yang berwarna Biru itulah URL Gambarnya.

Maka kode nya jadi seperti Ini :

.sidebar h2 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ZeEYcwWboE-wEYpjW8wvrJaD7PGQ7cBrm2IIf0XtzgrIJKUZ2OWWw_0o8n-SgxykLQGu5HxlxGGpQgMfcFb4d2X0ZBxqb47XaN976ZED8fY9Y42y8zNirN82MU5ffZyZbIz-gC0Lyu2Y/s1600/background-judul-posting.gif)repeat-x; color: #071019; font-size: 12px; font-family: Arial; font-weight: strong; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align:center; }

 Oke semoga berhasil ya .. :D