Membuat Tombol Pengganti Warna Background Blog

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')" />

Untuk memberikan tampilan yang sesuai dengan blog kalian, kalian bisa tambahkan css untuk memberikan tampilan yang berbeda yang bisa menyesuaikan dengan garis besar tampilan desain blog kalian.

Dalam hal ini kedua tag tersebut menggunakan perintah javascript yang sama, penggunaan contoh tombol background warna dengan 2 tag tersebut untuk memberikan pilihan yang baik untuk dipergunakan dalam blog, apakah tag table atau tag input, yang nantinya dapat kalian modifikasi tampilannya.

• Demo

Semoga bermanfaat.