Membuat Tool Pengubah Warna Background pada Website atau Blog

Membuat Tool Pengubah Warna Background pada Website atau Blog

12:21 PM 1 Comments
Pembaca yang terhormat.

Tema pembahasan kali ini terletak pada bagaimana cara membuat Tool atau alat yang sangat mudah dan simple untuk diletakkan pada sebuah Website, yaitu "Pengubah Warna Background" atau bahasa kerennya "Background Color Changer" :D (itu cuma ditranslate saja).

Lalu apa gunanya tool Seperti ini?
Skenarionya seperti ini : 
1. Tool ini akan diletakkan disembarang tempat, terserah dimana. yang penting ketika halaman diload, bakal keluar.

2. Tool ini mempunyai daftar warna tertentu (terserah).

3. Ketika tool ini diklik, otomatis warna background akan berubah sesuai pilihan warna.


Pembuatan
Untuk Website :
1. Membuat sebuah table, gunanya untuk menampung pilihan warna.

2. Mengisi tabel tersebut dengan fungsi "onclick event" pada tiap daftar warna seperti contoh code berikut :

<table border="1" width="230" height="25" id="qw">    
<tbody>
<tr>
<td onclick="bgChange('#ffffff')" bgcolor="white">     </td >
<td  onclick="bgChange('#f0e68c')" bgcolor="#F0E68C">  </td >
<td  onclick="bgChange('#e0ffff')" bgcolor="#E0FFFF">     </td >
<td  onclick="bgChange('#98fb98')" bgcolor="#98FB98">     </td >
<td  onclick="bgChange('#b0e0e6')" bgcolor="#B0E0E6">     </td >
<td  onclick="bgChange('#87cefa')" bgcolor="#87CEFA">     </td >
<td  onclick="bgChange('#ffdab9')" bgcolor="#FFDAB9">     </td >
<td  onclick="bgChange('#ffc0cb')" bgcolor="#FFC0CB">   </td >
<td onclick="bgChange('#e6e6fa')" bgcolor="#E6E6FA">     </td>
<td  onclick="bgChange('#f9f9f9')" bgcolor="#f9f9f9">      </td >
</tr>
</tbody>
</table>

3. Sekarang bikin JS ato javascript nya. :)

4. Onclick event "bgChange" akan disambungkan ke "function" pada javascript, seperti berikut:

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

5. Gunanya function tersebut cuma buat proses onclick yang terpasang pada tabel tadi.

6. Selanjutnya yang nggak kalah penting yaitu CSS, agar peletakan Tool ini sempurna dan nggak morat marit. pasang CSS nya seperti berikut :

<style type="text/css" scoped="scoped">
#qw {position:fixed;  top:73px;right:40px;vertical-align:top;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;}
</style>

7. Penting :

* #qw adalah id pada tabel.
* letakkan kode CSS nya sebelum tag </head>
* Untuk tabel dan Javascripnya letakkan didalam <body>

Untuk Blogger :
1. Pasang kode Tabel pada "HTML/Javascript".

2. taruh CSS nya sebelum tag </b:skin>

3. Letakkan JS nya sebelum </head>

4. Atau kalo nggak mau repot letakkan jadi satu didalam "HTML/Javascript" :D :D

Lho, bedanya apa?
Bedanya cuma teratur dan tidak teratur pada pembacaan/loading Blog.

Sekian.

Share this

typhun

1 Response to "Membuat Tool Pengubah Warna Background pada Website atau Blog"

Subscribe to: Post Comments (Atom)