Membuat Tombol Pengganti Warna Background Blog

Dalam hal ini kita akan memanjakan pembaca/pengunjung blog kita untuk bisa menyetel/menyesuaikan tampilan background blog dengan warna yang mereka tentukan sendiri, tentunya bukan mereka yang menentukan warnanya, tetapi kita yang menentukan warnanya dan pengunjung/pembaca blog kita bisa menyesuaikan warna background dengan memilih warna yang sudah ditentukan dalam kotak-kotak tombol warna.

Membuat tombol warna untuk mengganti background sesuai dengan warna yang kita inginkan, hanya menggunakan script yang pendek yaitu perintah JavaScript dan HTML.

Dalam membuat tombol warna ini, saya menentukan perpindahan/pergantian warna ditujukan untuk bagian background pada tag body, dalam hal ini kalian bisa menyesuaikan untuk bagian-bagian lain pada blog untuk bisa dibuat backgroundnya berubah warna.

Javascript Yang Dipergunakan

function bgChange(bg)
{document.body.style.background=bg;}

Dan script keseluruhannya adalah sebagai berikut:

<script type='text/javascript'>
function bgChange(bg)
{document.body.style.background=bg;}
</script>
<table border="1" height="50" style="width: 150px;">
   <tr>
      <td onclick="bgChange('#F90A0A')" bgcolor="#F90A0A"></td>
      <td onclick="bgChange('#160AF9')" bgcolor="#160AF9"></td>
      <td onclick="bgChange('#FF00FF')" bgcolor="#FF00FF"></td>
      <td onclick="bgChange('#DCDCDC')" bgcolor="#DCDCDC"></td>
      <td onclick="bgChange('#00BFFF')" bgcolor="#00BFFF"></td>
   </tr>
   <tr>
      <td onclick="bgChange('#3BA509')" bgcolor="#3BA509"></td>
      <td onclick="bgChange('#CD853F')" bgcolor="#CD853F"></td>
      <td onclick="bgChange('#F9720A')" bgcolor="#F9720A"></td>
      <td onclick="bgChange('#FFFFFF')" bgcolor="#FFFFFF"></td>
      <td onclick="bgChange('#FFFF00')" bgcolor="#FFFF00"></td>
   </tr>
</table>

Contoh script diatas keluarannya/hasil yang ditampilkan mengggunakan tag table, selain dengan tag table untuk membuat tombol warna bisa menggunakan tag input seperti ini:

<input type="button" value="Merah" onclick="bgChange('#ff0000')" />
<input type="button" value="Orange" onclick="bgChange('#ffd000')" /> 
<input type="button" value="Putih" onclick="bgChange('#ffffff')" />
<input type="button" value="Kuning" onclick="bgChange('#ffff00')" />
<input type="button" value="Hijau" onclick="bgChange('#00ff00')" />
<input type="button" value="Pink" onclick="bgChange('#ff69ba')" />
<input type="button" value="Cyan" onclick="bgChange('#00ffff')" />
<input type="button" value="Biru" onclick="bgChange('#0000ff')" />