Sobat Blogger!!! dalam kunjungan rutin saya ke lapak Blogger’s Family, tepatnya di/pada weblog Sobat Muhamad Iqbal, saya dapatkan
Box Kode Warna ini, tepatnya dibagian kanan bawah, saya tertarik dan memang manfaat untuk di posting sebagai
referensi blog. Ini dia hasil copasnya, silakan
simak dan bila tertarik untuk aplikasi atau repost ke website atau weblog sobat, silakan CoPas dan jangan lupa
komentarnya sebelum tinggalkan postingan ini.
Coba Sobat Blogger lihat ke bagian bawah postingan ini →→→→→→→→→Kan ada kotak tuh. Kalau Anda punya PS (Photoshop) mungkin sudah tahu
apa itu. Yap, itu namanya Color Picker. Color Picker merupakan nama lain
dari Kode Warna. Mengapa berbeda dari Kode Warna seperti biasanya?
Mungkin, Anda semua tahu kelebihannya, yaitu :
- Kode yang digunakan lebih sedikit dan tidak mengganggu Template Blog
- Adanya RGB counter. (red,green,blue)
- Adanya Hex Color. (Code warna ex: #ff00ff)
- Adanya HSV counter seperti di Photoshop.
Okelah kalau begitu, ini Saya kasih Kode Javascript-nya!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Iqbal" />
<title>Kode Warna</title></head>
<body>
<script type="text/javascript"
src="http://www.switchonthecode.com/sites/default/files/64/source/javascript.js"></script><div style="position: relative; height: 430px; width: 295px;
border: 2px solid rgb(171, 172, 172); background-color: rgb(232, 231,
234);"> <div id="gradientBox" style="cursor: crosshair; top: 5px;
position: absolute; left: 5px; width: 240px; height: 256px; border: 2px
solid rgb(255, 255, 255); background-color: rgb(0, 255, 255);"> <img id="gradientImg" style="display: block; width:
240px; height: 256px;"
src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_gradient.png"> <img id="circle" style="position: absolute; height:
11px; width: 11px; left: 123px; top: 122.5px;"
src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_circle.gif"> </div>
<div id="hueBarDiv" style="position: absolute; left:
255px; width: 30px; border: 2px solid rgb(255, 255, 255);
background-color: rgb(217, 216, 219); height: 255px; top: 5px;"> <img style="position: absolute; height: 251px; width:
19px; left: 6px; top: 2px;"
src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_bar.png"> <img id="arrows" style="position: absolute; height:
9px; width: 30px; left: 0px; top: 124.496px;"
src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_arrows.gif"> </div>
<div style="position: absolute; left: 5px; width: 145px; height: 50px; top: 280px;"> <div style="position: absolute; border: 2px solid
rgb(255, 255, 255); height: 50px; width: 150px; top: 0px; left:
0px;"> <div id="quickColor" style="position: absolute; height:
50px; width: 140px; top: 0px; left: 0px; background-color: rgb(64, 128,
128);">
</div> <div id="staticColor" style="position: absolute;
height: 50px; width: 100px; top: 0px; left: 50px; background-color:
rgb(64, 128, 128);"> </div></div> </div>
<table style="position: absolute; left: 170px; top: 275px; height: 30px;" width="150px"><tbody><tr><td><b>Hex: </b></td><td> <input size="8" id="hexBox" onchange="hexBoxChanged();" type="text">
</td></tr></tbody></table>
<a href="http://muhamad-iqbal-blog.blogspot.com"
target="_blank"><img style="display: block; width: 94px; height:
16px; position: absolute; left: 180px; top: 307px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt28B5Rst2ds2CFZsDK0H7P627t7nIy5rPojURhhu4pxnsak0QpTMLwfmM5FNbSpk4ELvUONFTtoNuKfV4qw11cP_qpJkpf1c3-YLGKE2R_mg8dhTa9X6XHFyWRyaP5RvrG6heOwG8f36p/s1600/Banner.png"></a>
<table style="position: absolute; left: 5px; top: 340px; border: 2px solid rgb(255, 255, 255);" width="285px"><tbody><tr> <td>Hue:</td> <td> <input size="8" id="hueBox" onchange="hueBoxChanged();" type="text">
</td> <td bgcolor="red"><span style="color: rgb(255, 255, 255);"> Red: </span></td>
<td> <input size="8" id="redBox" onchange="redBoxChanged();" type="text"></td></tr><tr><td>Saturation:</td> <td>
<input size="8" id="saturationBox" onchange="saturationBoxChanged();" type="text"></td> <td bgcolor="green"><span style="color: rgb(255, 255, 255);">Green:</span></td>
<td> <input size="8" id="greenBox" onchange="greenBoxChanged();" type="text"></td></tr><tr> <td>Value: </td>
<td> <input size="8" id="valueBox" onchange="valueBoxChanged();" type="text"></td><td bgcolor="blue"><span style="color: rgb(255, 255, 255);"> Blue:</span></td>
<td> <input size="8" id="blueBox" onchange="blueBoxChanged();" type="text"></td></tr></tbody></table>
</div> <script type="text/javascript"> fixGradientImg(); var currentColor = Colors.ColorFromRGB(64,128,128); new dragObject("arrows", "hueBarDiv", arrowsLowBounds, arrowsUpBounds, arrowsDown, arrowsMoved, endMovement); new dragObject("circle", "gradientBox", circleLowBounds, circleUpBounds, circleDown, circleMoved, endMovement); colorChanged('box'); </script></div>
</body></html>
CoPas kode di atas ke mana saja, seperti Widget Blogger atau halaman tertentu.
dan Hasilnya begini sobat :
| Hex: |
| Hue: | Red: | ||
| Saturation: | Green: | ||
| Value: | Blue: |
Selamat Mencoba...!!! Sukses
0 komentar :
Posting Komentar