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 :
Pembuatan
Untuk Website :
1. Membuat sebuah table, gunanya untuk menampung pilihan warna.
<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>
function bgChange(bg) { document.body.style.background=bg; }<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>
* #qw adalah id pada tabel.
* letakkan kode CSS nya sebelum tag </head>
* Untuk tabel dan Javascripnya letakkan didalam <body>
Untuk Blogger :
Lho, bedanya apa?
Bedanya cuma teratur dan tidak teratur pada pembacaan/loading Blog.
Sekian.
Kwreeen...
ReplyDelete