0 jQuery Color Picker

Cara membuat :

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/AVvXsEhDFUiZJiNfH72fjABultd38fi2VCrfUrlrNz8HyeunPbDoK1Xrqjr1mDVgwvwSLzSnM5Lv7-A2jbcVqQvGnsFK0Lc6ZYNRLmA_I8SuXj-ao1fMHxn35LNBJxeuLSRfqGhQgEAFRhcWT_I/s1600/select2.png);
}
#colorSelector div {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDFUiZJiNfH72fjABultd38fi2VCrfUrlrNz8HyeunPbDoK1Xrqjr1mDVgwvwSLzSnM5Lv7-A2jbcVqQvGnsFK0Lc6ZYNRLmA_I8SuXj-ao1fMHxn35LNBJxeuLSRfqGhQgEAFRhcWT_I/s1600/select2.png) center;
}
#colorSelector2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDFUiZJiNfH72fjABultd38fi2VCrfUrlrNz8HyeunPbDoK1Xrqjr1mDVgwvwSLzSnM5Lv7-A2jbcVqQvGnsFK0Lc6ZYNRLmA_I8SuXj-ao1fMHxn35LNBJxeuLSRfqGhQgEAFRhcWT_I/s1600/select2.png);
}
#colorSelector2 div {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDFUiZJiNfH72fjABultd38fi2VCrfUrlrNz8HyeunPbDoK1Xrqjr1mDVgwvwSLzSnM5Lv7-A2jbcVqQvGnsFK0Lc6ZYNRLmA_I8SuXj-ao1fMHxn35LNBJxeuLSRfqGhQgEAFRhcWT_I/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/AVvXsEhOIQBGfFqsCTY37r_Mgddu5cNQHTCzINZDOWuFBtOxb1eB1zqvzZ5Kw9koKJLdD94QeGOzJTinllrCuZYRvS11FjzPHtUWBHQ0VVNGZIRCMjB4lnKCTbEn83v1_NlA2Dtjasa1YGlreF0/s1600/custom_background.png);
    position: absolute;
    bottom: 0;
    left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWezeoO5pPEMnpkOZn2RVxRSKVvTeC3vKgd8xrk5An5FYZCBsv5vcGA-wPUm4U7N7Wzfs_h4T5vfeADJ_4qKInkvISxEal9bPBzckS-Lg3NYN9Y7p2bcSmSTrsuQXyEGZowLRdTDTWxNM/s1600/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcqRytmfChQG8Z7QoJ6Mofnbn0LDW3FXqJ-j6ftnE0PGADIuPT8TVRRy9Uin10EmeopH0MY4CDlZHk-jKitrn0Qxk-Us8PJgGtC-wwh4e2e3zCqvRECk6Mjr2bTS-APPwE_rHqz716Qyo/s1600/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBMK4nHkHY6AlPkE99lTR-J5mLpjK39jlFLXiYOE8Qf-shAum0M8pozLLtfElKUPCgV9UND8kaCmZ4zTR2OZsu5WrXREPhhUaPIHKcgdf58WDUOdjOtYdiaNGHhy9Za40PivkMH0WzabM/s1600/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0pdD-tpbSVonmUG3hRQmHbD55MQSaP0MFQyRZRUyHUWpe9MVA9hU1NnTEjmLWdJc8qd03q6-CRhjJVp6lC3Fe_Ie_dobmnid0zJ3F9AuwsM7I5kyej4rspqRETlwVmZVScOiRY_7onSQ/s1600/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhasLGg8xcwtZvzp-e1z19sctwiQfea5DBXDwbfM1ObbAUobiIgeNrCoM8irCL1utAysviSZDTii-T6HA4Mxmve_sAXFe6hayBEPS9yhdKDHlTe8lX8H9EtII5sdUzUKQU3PBBJcN5lYPs/s1600/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3gMhP67k8E77Xr7dL0-j76I2iirhL1Dpk1hwBlAiHSmRZb-N-Vztej2wWCETrG3EVgsppQrqheywj_0gw927oZxUyiXI9n7gQwcONu78o08w0046-P6SWvqtvrnYUakgjWtfPjX5XXqs/s1600/custom_hsb_s.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD7nL0W8zbvAHeR5_PnVHioMKVD_BVu7vITRZKFj8oy18H-5HMDe9R22QGHIuvHU1xlDTMohk4TW_NGa7lEA380PZiji24HrDFYWwgqXx13pAwNM-oBqIng3J01i5AEvYnjsyi8Vkkc6o/s1600/custom_hsb_h.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEichfh5whghm7huvygZaL7HqbC645AFIuxgtZ9JR4UmUYinu8MOiAXfhM3FSfYDkn65swNjoNLaHVAyzTDcFyK9L9qLCGzytH6u-4EcW7P7xu3cZ36OvaVIgdizs3NJ7ySyaBIFoQDi-bo/s1600/custom_hsb_b.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_submit {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJJed75M4cuthO7sEjTeZcQX5skuIfl7sSfEbuv63FCLN8kSWs-yFN8a-cJni7t5BgQ2TdShfannfSdiUhA5r0L9ysTAABdrqleSbsI_pAqlBjUBS20Bm_CpQMDZotbUJBEesgU9NPo7I/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/AVvXsEjDCog8zckur3QYi4IOhllePLbzHrlOIsRFk91Um6U6w36-6pKPydpBhVokI8pibC0-M83z9mmCv-lSKgZzN7rVkGIlk2G8CS1O9W2Vd5dXCdGbX4i6pTsJN0Q8lOKc9zuD6oB2vU5GDLI/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/AVvXsEjtKhcp1pRWr24YbLmfcIEab34hg5ZfKZxh2FRGILHtNiYJGUW6bNawpxX6MRV6q5MToOi1OaKyesuYsVxAuJoi_IaTREYN5Z8x50drQkp-lqP7Iywjm_5siq9smaUD1Bfyr7R7kTnCLsQ/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/AVvXsEg9QCZAoZUq8-Ac9n0brllLswe9sEfF5rpZIzaLW1kuMEwAiqs3c3x44JMGYsBpZ8yXWdMMPKj3wMnLU1A-Q6zvPi-KQ50CdVn9IJD0N0WTQz49pEp_Lqkfis5EeeVuVS31qIKXfC5b8bo/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/AVvXsEi6KWUGpT3p5Tr0ZaYps9w1TUXzsgfG3Gk5u3D54wgf5ot5_UrErCFr86pcDFl_QBzMEIZl9hzEqQGxZgtdAjIVs1BAe_-TUa3t9ZFM56SipwHVNz1tJlXQZgLoCs-r_RYouzwGw6irElw/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/AVvXsEjZKHoe4KO3aV-1JCss6ZsFSxmjhJ-nOfJcj_kf-CSeOe-Dc97thB4v08QdK6cjd4e-e47kbT9AM3bp7RORHoX1S60VyFavs9pIojBsq9Nu2zA1iZPCie-Se0-p1gA_Hi_fBuMhUczeGI0/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/AVvXsEhXW3zml7G8iad-QmYKFAIFTa1vHQK1UgMxjBYCqEebGZDB-2fgeFOrKvzMGBMdLVN9AwYe73k7lUF_ayHoFbfsmyyik9hFMQ3d4K2sj-Gc7_dg9RpvbBDNe17iLggtmSjI_hgFABwCh2s/s1600/colorpicker_rgb_r.png);
    top: 52px;
    left: 212px;
}
.colorpicker_rgb_g {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWFMpgSWdnHW-e-HOVMTHdVJq7Lk9vohw4c57RPLdz6HfnexfWl2WWyTizx66bz2hfGySjtpCYk3iiqYXyCE0jaErYSpFBtIouwgitNF75ZXPfOgFyVHg2H7icJ2dIwahFCtGfJnyeqW8/s1600/colorpicker_rgb_g.png);
    top: 82px;
    left: 212px;
}
.colorpicker_rgb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHZYzp4XuxyX1ct-_Ax3xGzOl3Dwnu20sQQvut_zUHKby5Y2DQNrQu7XiN9rO8j8GClPdGbzNXQK0m5VbdU87Aoj8lsJhKkZa8UnPUeAgv_C95jRjUwXMx9GQemJsY4AidFmUzgmxOcuI/s1600/colorpicker_rgb_b.png);
    top: 112px;
    left: 212px;
}
.colorpicker_hsb_h {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Z_tm-djAvmKdu1Y6iSaILBUrinXgANZwTvVEyGHtOLYdBvTgD5SouPq_p6Jf_PiAuJeyv62qCa9myrAYbST1hibvJAAESkM2A2JwwAn01bsPOeNFNTHqJP81XrPXgm5eFoQRGGJRzIY/s1600/colorpicker_hsb_h.png);
    top: 52px;
    left: 282px;
}
.colorpicker_hsb_s {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Pnj4WL2-U-6vjuTpxxXO3kBu7BWvcSBD2ZKcoz-6JxhAMcnRk-aV552S43ugtvwIcomHhw3alStciZE65EmvAiDiMqduYZyGEHoJaoTLV4ZePbZIgYJsIyXGXcjDN9SmTfuxCy5OOlo/s1600/colorpicker_hsb_s.png);
    top: 82px;
    left: 282px;
}
.colorpicker_hsb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6JPYqyOC2u8FZG-MKac7OAc_ohu4RDZ2xBaARf-CbGH8Wo49N41vrPi3tKbD2Onjn3Cp7kOju6JNG6V4_CJkdYJCjqB5x-zMYDa3zmfZ7fLwtr9XIbd_M7fHywUifg08iW_bqSf1_1_Y/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/AVvXsEggBgXExu37VoHQtnUWCGeuEFaT3pdUElEVJ8CLNtsi2oZEEXlojdaF29B5IWuHrsCvcv6GXC10bgq5qfIg-XwaD4ZRZ2r4kyg8XRPPjuJwpFAyDJ-phji0t47wWm1b-krlhNn4g_gLv0w/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;
}

4.  Kemudian 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>

 5. Terakhir adalah 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>

  
Sumber : http://www.kangdadang.co.cc/2011/03/jquery-color-picker.html