Jquery Color picker

Demonya bisa dilihat disini

cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html
3. Cari kode ]]></b:skin>

Dan Simpan kode berikut diatasnya :

/*----------------
Jquery color Picker
-------------------------------*/
.navigationTabs {
height: 23px;
line-height: 23px;
border-bottom: 1px solid #ccc;
}
.navigationTabs li {
float: left;
height: 23px;
line-height: 23px;
padding-right: 3px;
}
.navigationTabs li a{
float: left;
dispaly: block;
height: 23px;
line-height: 23px;
padding: 0 10px;
overflow: hidden;
color: #52697E;
background-color: #eee;
position: relative;
text-decoration: none;
}
.navigationTabs li a:hover {
background-color: #f0f0f0;
}
.navigationTabs li a.active {
background-color: #fff;
border: 1px solid #ccc;
border-bottom: 0px solid;
}
.tabsContent {
border: 1px solid #ccc;
border-top: 0px solid;
width: 698px;
overflow: hidden;
}
.tab {
padding: 16px;
display: none;
}
.tab h2 {
font-weight: bold;
font-size: 16px;
}
.tab h3 {
font-weight: bold;
font-size: 14px;
margin-top: 20px;
}
.tab p {
margin-top: 16px;
clear: both;
}
.tab ul {
margin-top: 16px;
list-style: disc;
}
.tab li {
margin: 10px 0 0 35px;
}
.tab a {
color: #8FB0CF;
}
.tab strong {
font-weight: bold;
}
.tab pre {
font-size: 11px;
margin-top: 20px;
width: 668px;
overflow: auto;
clear: both;
}
.tab table {
width: 100%;
}
.tab table td {
padding: 6px 10px 6px 0;
vertical-align: top;
}
.tab dt {
margin-top: 16px;
}

#colorSelector {
position: relative;
width: 36px;
height: 36px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgwSRgZ2CuoCA2QME4JZFmB-DwNvVOhCL154Quih_1nsfUApbA4UVm0lEdPvSoxJee0MIElO7vJIfjnsN7xbKWVhYPf0RNMVouGJqlcyOxS9GX5ebH3IMkEHrP3AUfF1L6bzmCyiGwq8A/s1600/select2.png);
}
#colorSelector div {
position: absolute;
top: 3px;
left: 3px;
width: 30px;
height: 30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgwSRgZ2CuoCA2QME4JZFmB-DwNvVOhCL154Quih_1nsfUApbA4UVm0lEdPvSoxJee0MIElO7vJIfjnsN7xbKWVhYPf0RNMVouGJqlcyOxS9GX5ebH3IMkEHrP3AUfF1L6bzmCyiGwq8A/s1600/select2.png) center;
}
#colorSelector2 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgwSRgZ2CuoCA2QME4JZFmB-DwNvVOhCL154Quih_1nsfUApbA4UVm0lEdPvSoxJee0MIElO7vJIfjnsN7xbKWVhYPf0RNMVouGJqlcyOxS9GX5ebH3IMkEHrP3AUfF1L6bzmCyiGwq8A/s1600/select2.png);
}
#colorSelector2 div {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgwSRgZ2CuoCA2QME4JZFmB-DwNvVOhCL154Quih_1nsfUApbA4UVm0lEdPvSoxJee0MIElO7vJIfjnsN7xbKWVhYPf0RNMVouGJqlcyOxS9GX5ebH3IMkEHrP3AUfF1L6bzmCyiGwq8A/s1600/select2.png) center;
}
#colorpickerHolder2 {
top: 32px;
left: 0;
width: 356px;
height: 0;
overflow: hidden;
position: absolute;
}
#colorpickerHolder2 .colorpicker {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVXTQk85py79nEmD50q4TADTxoLmIghkIEu1Dc1APzA6-BO8Q-oQ92HvAT6VFvR6H4pzHjK6ZQ-GHFCi2oBOzdde0nLnnOyCOSCdv9C9JYGCCfnPEruRgVoyQu4K8_IUU1rg7wpLJ11w8/s1600/custom_background.png);
position: absolute;
bottom: 0;
left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXA1T1aDT4uOkhG-Q91sh1cKkHlmI4hGH8cB4zRNdjfm3EqSsQB8bD5nXsvHCyNzIpA_3E8d6u_F44mSSL1xcUSNnRCro3pA_Ym1J1Rw3RWvU5XoSC-zApCRoSOEOCWjJ91WK4VVlMN-g/s1600/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimo__DyhQAdSw2NyUyvkSRwbVB7sg35yG9C66c50xCxIVjP0f3f-vFR-HlqWrATCL3pqvmP-eTjhvJB-YRGEFs0QHR5jJYbXVlR5HpI3vj0g4RBSbzoA5YQXEfQV6wKDjJHElv76ra3Ws/s1600/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1b5McEipIzP0md2RtdpnQUntAJxCvNv6Ti4S-RG2hTmmCXgbth3HWXrYDAMNZCj3ezqvFyHpRFA4PNnC4Kt9T3VxcjqkQNsD3zUow-S0wofumDo7wtpAFO9JVZrbS9qUrZmkDTnlfMbA/s1600/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZg-VUlOMpQiBY4f7r2QVla21dteSXycwJ5rhdVYCWu3Ne3GROkz92Unv8iVLLSKg31eaDo5iJ1gjYjqVzFewNqePiqvQEGz-zYtUx3dik0rft5Bp4Wgd1abOQaspw0P_uPwWpdisd7M/s1600/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsqXU75pJNt9SChmvGyHCUjOxw6C7x0L0CYDqoQgA3y81dg8aQvZwYVu_c9O8szvObCCfWRZ46RPoIwJZMhRtofKgmsdmJfLyV36xQeqxzaFL18bgYklEAdbXcEpi2e9xRzQp6e8RM_gA/s1600/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi77HtWbH0BhYspOIVkwsRJY-7LcFtKaXZa1AzABva_eNM4Sr-WrvQ7Wjbbb4fVpKNDFPoTawohOlQdQAjb2lV3RKhwsSYsyoLPGsf0A1EnOwqgInd3QI_D6rSt8rZ50lKJwOnqmrHHzhI/s1600/custom_hsb_s.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ-kJ1dfUY2l-eRHsZBZaCQtrk1R_v5JjmVbc-JA_5mxUtGCJcmqbUaT_Ndc-JN4iVB4oTnT9ZIi41asg9TVVFKEqwJCaqlIB8cTxNg54RApeQ6CZ4qEnH6xtCi4qu-CIi2DJLPJFLlII/s1600/custom_hsb_h.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKp0R4o6aZSCqZRQVjsuT0_RK1cIGKMwybSLD7sP3w9KPw5vG2A4fJxugluE7IE6rBcUlKDq10SeL1frLe2qvFbd2QzgojbDVTnn9vUm7TiXAxSOWtaiWMGY-vZngWYplx-dMuxM9V5sw/s1600/custom_hsb_b.png);
display: none;
}
#colorpickerHolder2 .colorpicker_submit {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2WToftmGfSNgj4fNEyyr45HBf3NJNqi-b3m4AXSZL7a74dU39HTqSL_eJlB1t_oQ_wlT9blM0SpGGVYrx4BVZFiO0eG7zQrtXT68eRSxr8WQfMopJsPErPAqt8t2CSHMtLRnSE3ejZo8/s1600/custom_submit.png);
}
#colorpickerHolder2 .colorpicker input {
color: #778398;
}
#customWidget {
position: relative;
height: 36px;
}

.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMLHgp6uMTTi3IFgr70QiZO08IENAp0hy-HfODFrt2mZdSTq2UkDn4PPD0cfQGC5pKcyu9HMMfmEBpbO6O4Vc6qMYtA8rQygaoGMQ9ntJ8sAcT3A9bpK7CP9NuPjJt7Cg8s9qFedfM36w/s1600/colorpicker_background.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #f00;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYkD4b5OZ65lGvlNQRxd0GMV7PPS-rA9YFv6h2KBgdcR2k7shIf-LLb07PdVAwXggpZVMkXczi3Jb0_g-zrqRJ-nq2X48WfCGy80SjsgrGqgXRo91FQxS5Dkk0G8EDWxMRS6Tkj9Oen28/s1600/colorpicker_overlay.png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmMbzCpRfJhQL2eccCQXX4hRC03W1zRhblLRSjKtiv0JFjiB3f4s9lvPIfCixM7p-NsNCeqW_Ub544Mtj41thSrN8odnkGyqEl5uMA171k2xjbBCB1PKik0vbRJ5T4mdsEqVAYVb7FjCo/s1600/colorpicker_select.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJfIPO1qwlyPAPCtfqZwxQdGPXM15Rnq3LOlSG7kXZTk6IVqtrQkM2WZREYNyyrCGhRqSrwTSmzEtNXCCKz9EYC_xAZ4ZXw6LhirxgT3XSOnKTo2amFzq_kGhgb5RQTH4MisZYWdaj9wM/s1600/colorpicker_indic.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 60px;
height: 30px;
left: 213px;
top: 13px;
background: #f00;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #f00;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #898989;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil5wRUnA2_DVfZWLQVeeN1M4PpSJh2RgcltvBvKSYzW6ic3ZtR_e1vwRoBD5Rn0zHIzsn5X_fomtttNm5fnsdYpDRVJDUfkJtJVJfOMZ_gr-YSiR6zw1-WpGUH5AroHbbSK9ZZLrpggRY/s1600/colorpicker_hex.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRMq230GYwZOdWAd0HJOPVhw4_laoCdvWo5X8FpPkYmlE9DC5cmBAjs5XClzxrYwx6O_C10yN06R_iieXmQ9MhizSpIgCGvkA7RH_tySIE-J2UuPZrpeDQAsDZMjl_XsahD1nrGum0qSc/s1600/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNljyuXyK2RUjeVI3yKllzRfpgkcIk5JTBr7o1CXkaK9w7TnvB5NL4WEUNN9x6jwNYOmevP2L-76BYz6FmtlnBaQyPqb475H1t0_VWI68SlyxanvXi9FvW7soesL2Qb63bs2IPC9n8pYY/s1600/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj239JfNKfGIxre0NmGpxdb802IUCISLE8CZ-1hX2yIrhcHMjkp4TTxXVhUGTa0Wy41lCvUPYqzWwb5Rzp7btZa4E1_nCFH-wc7IXJ6CSm8RlfhPxE4yzEklEVWk9gY2wn6TRm12uEct-0/s1600/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ3PoKYvXo10bbMPiWSuCzREAB3MWzzvz7X4JvqWD9KZ4XCAkOBB7r8CVzEbndyUTaHWryM6L0oaxz5fRPDi7kQt-L7sfVBaDwhpZsxFTbT6u2NFqCFssQgzsJfh6V8QF0Yu3KFw3qMZI/s1600/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6COqjgPnrw7d_uGzETmOtGiBgLbPG_weVSRi0MpC2rr8dSd7YU4BQKsJOdTJEyATFb19BxNU9TtDa2b1OzJP1TyiQfV8mmMd4PLDd7MoNlJ4x5rxVi6cyicnAHk-j2AHVFey90DpwMA8/s1600/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnCLi7QnjCU_b9ofp6-z2pBduD-sDD7zBlYz3eyHz8VZXOEPPuyZByFUH9KPoDhQuT3ARscqK9r5Sj7B7jri-ZgyJ35QAIZE9ULWIfqsoMuDM6XLWuAu2KhcmmUtvtqczjKm-1P_O5T8E/s1600/colorpicker_hsb_b.png);
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 22px;
height: 22px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd47djMjHx8oLF6X0d2bxId25eF1A_y87hAEtr9eOpxvWDn59vt75n505NFweyZmBEBay7qf591vpWA1UP77VhyrRnmIx3Qrg90tLvIo3WH6DWQeth0I-PpZokECI_CXrp_eaPSwWzgjE/s1600/colorpicker_submit.png) top;
left: 322px;
top: 142px;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus {
background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
background-position: bottom;
}
.colorpicker_slider {
background-position: bottom;
}

selanjutnya simpan kode berikut diatas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/colorpicker.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/eye.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/layout.js"></script>

terakhir cara pemanggilannya pada html atau posting, gadget, sesuai keinginan sobat :

<p id="colorpickerHolder"> </p>
<div id="customWidget">
<div id="colorSelector2"><div style="background-color: #00ff00"></div></div>
<div id="colorpickerHolder2">
</div>
</div>

<p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p>
<div id="colorSelector"><div style="background-color: #0000ff"></div></div>

selesai..........