Jquery Color picker

Demonya bisa dilihat disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. 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/AVvXsEhgDzCu_KfXg010TAQ319zbEVEfnTTbcuF9h_cFdpfdheJ0PkGQ3Wsx46D_d2baujrE9NCQc7v0NFBvnmPajXIpbl38Ha6d2S1i_ovC4P6E4E1U0uuKVaXDXSjMbT9LC9OX0nbKuloZufg/s1600/select2.png);
}
#colorSelector div {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgDzCu_KfXg010TAQ319zbEVEfnTTbcuF9h_cFdpfdheJ0PkGQ3Wsx46D_d2baujrE9NCQc7v0NFBvnmPajXIpbl38Ha6d2S1i_ovC4P6E4E1U0uuKVaXDXSjMbT9LC9OX0nbKuloZufg/s1600/select2.png) center;
}
#colorSelector2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgDzCu_KfXg010TAQ319zbEVEfnTTbcuF9h_cFdpfdheJ0PkGQ3Wsx46D_d2baujrE9NCQc7v0NFBvnmPajXIpbl38Ha6d2S1i_ovC4P6E4E1U0uuKVaXDXSjMbT9LC9OX0nbKuloZufg/s1600/select2.png);
}
#colorSelector2 div {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgDzCu_KfXg010TAQ319zbEVEfnTTbcuF9h_cFdpfdheJ0PkGQ3Wsx46D_d2baujrE9NCQc7v0NFBvnmPajXIpbl38Ha6d2S1i_ovC4P6E4E1U0uuKVaXDXSjMbT9LC9OX0nbKuloZufg/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/AVvXsEhRSQJMS6R4SkLq7lCAbMqzzIoYprOPZ_SBd7Jw9jxQACJMYpUa4t87duguw53SnWYSnU3ylHlh4QKUheZ9-liR_DuYrQnzEIWqxWmrmOSG9yPqzRhF4p6k4HRKbL-roF9emeg40ghK3B8/s1600/custom_background.png);
    position: absolute;
    bottom: 0;
    left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKGNo-KmAFG0hwWeLnV6zQzoPnnXqkkfjYWj56aucAr3s72XRcQssdPp0K3QS1AX49vvshGhOvfv5FvHsGoYTIO-wuB5q5E6ycuKRRsJE_Nbn4GFvwfuwiuG2Mub-HUPzP9HqSDLVp5tY/s1600/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBTUXb3-oUvPNByZsfK8YkN2CGupNziG_Z4H008YSv4yXduYcn-xm-m2H8AyKm0zmARkpy7i1Ld4BRKVkVo-2_uhRdw5BXX8bL7hhKb50pUCgWAzeQVivlZMWBe4kwA053Q1L16GPDaek/s1600/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNp0JnJ5NMpWweV-mLS8UpYRUBoneXV2oCHIOSwZrZz4T_kZza885Z_g4GhVLJzqLVTMpexz_KQNL_qNBi9jDx3ecvbjoS4I6zdsZmb0XR1wRvdTinhxE3uVzOGd1EXIRpJ2MHm9WYYbw/s1600/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAuwVoOjVIrFZRBh0Gp9SKdbcBfgkdEkvD-3bRSy1XKW-b47wsw_x5YmR1Er5kc1f4UicUy2c0ba7Mr1hZfuF_tfNazeTG2LtxS0E3Uh-iyNDHPAQsgWPEMDy2Uw1Ej-6K7RQ9FGo-UOM/s1600/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGxuedkVmQrCwodwaP1XmWgecDwFPT9qia_SwGpYCxycc8hgZuWTCzjbnjiSNHyF-JdWjIodJ-FURanVBIhmZd4AjxJCgu7CphjjsbHZyjZ8VDNL00YLY0vwgI0lvgbix6cv43cmyms5g/s1600/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3by1QbQ0Dn9aKme3HWNnvs20IA8cmtMUo2QidnBhLU41oGD0UkPr2_a3crHLHVAUw6Xwc9bHMWopXAm-JWXAIO0cfrzAZUcrjGpLkpEagFL9b5KCfVXfqOCHcnVzyIGMEz-azSjgkiBg/s1600/custom_hsb_s.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm-GRH_0ssLNe2wWGDKXD8WO4pMhKWMtJRi4PjfKZLxyCq0XjbWoOXIg2yb1_D77ItddpaLOx4i4_AlWlxlo7w1tdggMEAUS7ll4Mc3I09hfDFcjLhpKrKeOVfiP3aUmZ9IeN0PveQp74/s1600/custom_hsb_h.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvHQ70kxb4_slvUOcdfkI2Zx4RW1uFP2wGBI8GnMcmqyHLo925U_joUNRtW1reek7YDTwS3iKKKBLXIFjldYYpwIiEUPJwUKjHnVZ_6rkiSGpb4T8z-wO7paVprY4xt0riFsIQ6n7f_x8/s1600/custom_hsb_b.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_submit {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi56kUtuv1LmktDCmWNL1CkJLZPWT1l5IMF9TUoAD-OonCu_CMVWEPgJiyYZDBNCp6fLSlHSVX11QN2tef5aE5A9K2uyQTSfF99tQTSmFNcmwAZ2DjXYagc2PsqjFhNNnfB6RtIwwJhC4A/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/AVvXsEh1-WPqTt7hy-zbSdTsWeYjfWU9eFWCWYU1okxtV2sZIAprT38gOebx1aiYUdc_z6tzum1j-NJ0ZEfznFA7xR3zTl7i8K-tTP3SDtyX_BB_vPXFHYwGsEJtk2tdownL6mwYt7KaqXMp9WM/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/AVvXsEjGJalAUtUGaqAkrIDciu8P310qZvC2IwR3M7TlCZ4XmaLYrBBnmKVkXiLPDdyPACKN0L4bmBixGLDMYZ-Gnx8o_TvqtAUBCa6OOxBxQDuSQb-Jg3zHMBlwKGfHhWXllSJA3ey9zyeAQdM/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/AVvXsEgFA4lbIT7bdRQ-s4PpJev4KxqSSYNn4mcINyK5M1SEpfjlUOfcVDiu1X5F6mLwX6D1JZyNOjcEa1CzI5pLkQMg5k9B30BaMcR9rAnNSzZlXZyVgjwQbhVg2Lv3Sx-qrc2d9CWq6nQyINc/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/AVvXsEgc74HUJ3xi3d6RwSB25ZB0gNOI7bY9jTuY9kVeoeAqNvEdyPFwJF4R3jz0ygli7EfAVfN4H-IIWVsP3d1gahcw1S6trc4ePuEE1weVR_mp73w0WyhrT4fCeZPfw9MLeiOllbW4hU_r0qc/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/AVvXsEhchZGlJoGEQzYE4pgYaiXAXggfqy7xbcHfQ_qcM1tP1mviD2LgvMJ4y1l78Eyv0-P3aet0IV0ky8gkF8mW_HF7sRvy2ml2FZeuMu6wUSBdZ7HwuA2ZUTv4PHxsT2WnJKJ08OKRmvpxpcw/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/AVvXsEhCO2y8GTwB45yRGq8X0JkDNSZCyYHIUQYATQrYGuvJTl6SWZktn1AKFF0OJcVifPWxBIHFuoqfESH4hyphenhyphenX1HpcUn1XQ7LOhGja3aM8Ywpa2D1l5oEsd9V3hmwNbUaLp9CmNrJwHJu1R2hg/s1600/colorpicker_rgb_r.png);
    top: 52px;
    left: 212px;
}
.colorpicker_rgb_g {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcDUBuzuKOOnuLc7rydprIeZixm27F5ZDTVfvXi34IQW6pyIt1If5ltfKMyq3VHC6fsYvWRaJhX03cu5zoYMBUhnHtKorfYulAL_8HpfOWj43KrCMQqo6LcCgw05F_Qyg5n91QaKReEA8/s1600/colorpicker_rgb_g.png);
    top: 82px;
    left: 212px;
}
.colorpicker_rgb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtu6ZBR820OAkchePCi0fWxMTntHbBEbol12kd0tPS_lVorYlbSxIz-6CPgdRYWztWPXPp_iYpEdx-ELljJpMDNFCRWsAP3mon8PYNmAZXqXs_cbcL5lze5BL08EoHZSo9RRnKkP8ou5Q/s1600/colorpicker_rgb_b.png);
    top: 112px;
    left: 212px;
}
.colorpicker_hsb_h {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM2mb3wPdoNcX3PYSOYP24dJmmGcDw_VtOl-AaeR1Qqx6pjTJyZ3D-90enuI-bHu8Wh60X6viknCOkQQEvxflyJeMn4gKzSMHjE9t5vqe7QA9ndBV5dtaGcY3vsR31bhTfUmOFRzPiWVI/s1600/colorpicker_hsb_h.png);
    top: 52px;
    left: 282px;
}
.colorpicker_hsb_s {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv0pDiCGDQYjhvt69U-AHwFh7zKfdYmyGkP5OCacsKFpgqaVajxIDm66GQDI-uZ6lUNnlRx_vkmiA4r4ExPc3hsaVlwNinMgs47mkrzhk95eFd6fnGay-G_FWfuFa9ABZy0OYp0EqoUVo/s1600/colorpicker_hsb_s.png);
    top: 82px;
    left: 282px;
}
.colorpicker_hsb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4SuYTB4h8zIOuv_tNKy-LnfQvx9mkLM0hlOQokZSs3Eeb6ogl8Z0QLRWiTIlHkrNu72r9te1EEJjVcx39lc0v2wC1e-SPIPqV5wfnSEtU7WxklmuSL1eks-YTi8sJwAu9QNCRnNWe58/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/AVvXsEgKYMxeUPbs_hkAgxwVY5FPhGGALwXNZqMHWuHU7_D8enMpBzimHYKgM5s-qGqBZllKxYHt5WUu1SbJVcpchwTMNpXpMxJH4Yt3g0oFshDgVXgQaEYkWkk7Qwzv9XYAZ1NJ8i4CwRTIYkg/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..........