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/AVvXsEjlg_m9tRfwsNg9NkCfrkfkdJnMEi6sAgO4_1lZLjJokbRlneZOJ0m1rJJ9HKQFirxsnF9TWMD1ZIGTfWR5S-Ejd12v-lxDnrPQA_QDspRenCvraVImDuA1FuEdoOgde6zhlmJhxqHJ-qQ/s1600/select2.png);
}
#colorSelector div {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlg_m9tRfwsNg9NkCfrkfkdJnMEi6sAgO4_1lZLjJokbRlneZOJ0m1rJJ9HKQFirxsnF9TWMD1ZIGTfWR5S-Ejd12v-lxDnrPQA_QDspRenCvraVImDuA1FuEdoOgde6zhlmJhxqHJ-qQ/s1600/select2.png) center;
}
#colorSelector2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlg_m9tRfwsNg9NkCfrkfkdJnMEi6sAgO4_1lZLjJokbRlneZOJ0m1rJJ9HKQFirxsnF9TWMD1ZIGTfWR5S-Ejd12v-lxDnrPQA_QDspRenCvraVImDuA1FuEdoOgde6zhlmJhxqHJ-qQ/s1600/select2.png);
}
#colorSelector2 div {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlg_m9tRfwsNg9NkCfrkfkdJnMEi6sAgO4_1lZLjJokbRlneZOJ0m1rJJ9HKQFirxsnF9TWMD1ZIGTfWR5S-Ejd12v-lxDnrPQA_QDspRenCvraVImDuA1FuEdoOgde6zhlmJhxqHJ-qQ/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/AVvXsEgUT_pXTCls8pTs0wZd27jSpy0mAWwnui2VjleXoGT0Ke1zb8ORcEKqcVblRDGE1R0FfNaSoyGl1Yczy7gJdHRoLYXCL2rH54sArJCCPR8t_vvNHpqcxiRrC82zNtj9m_KavRxNvR1teYk/s1600/custom_background.png);
    position: absolute;
    bottom: 0;
    left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxSEZURNordaS-rwHopYnkPW11s-MK4tskpM3bwWyEA7pGmI1XxYgLu3tVpml4xPMQ4Ntp0OrUCN3T9_-b2rA32vk2k2kUhj383BmdmUEQ57A-zEspkJIVLRhQaQA9qbQo2GjVyNCfGqw/s1600/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1FtOplXXN_aLAblCXc6Br4EC3x0qAUPrJIVJjXhGy9eO02uABmwR9jr5JVwI3BWGkvFBrhKYNsa_E0le-16r1IFHN07qdfplCtJUSgTiOiPhviX1cfc3cjYUfQ9srUbz9MtPp-1jp6DU/s1600/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCRRCSHaM7MXkYH4HtiehUw5BWfFT6Y25G_zYjc-fpXZqQngjBQZUf-gydk89jTiLruzmhMlHTBGpDSzvFbwX4Vc9MSe_CIet5UP1ySfrz0nh1pq_pmSJpZxWXurCIsT_ENQLSiyZoleE/s1600/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1abcA5wc_qc-fcVHOswpdMl56qPeL9BzL2IZH0HPs6GNEN9GeLs6xHOt-OKnsgMOKp5WvCMvDWDvInOEKpQCgV6faVaqseTm7HxF_zU4M-kKq9wQ0si0ULnu9nKc6cZdUO7kMF8lFnqE/s1600/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiDckq2JIehRK-Oegi8rM_S-Vnr_hZkeBOlfXJPnzxkC0bauDEGZ-eYNaPC9W3I8tAzfiHIFOwZ5_btubEmKIozLPpXtXoS9TRxPCiM5NmTOTvEgM9OHKPR4sPkiFnYmv_-5kXqM8B0i4/s1600/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2R7wGPE-tX5uPp2WFzSQNno28QC7EO0rMrTPnEsJDTQ65f9hotD7qu8PDUIzEDrwqdQjt_kVKIrhJRh_3dvJKU24XyxsoSFNrtDBMj2ClCLkOPUhRnZO4JiyFzLIS6As8BrhMsBoBMJg/s1600/custom_hsb_s.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlznbviPk8A5I_zdL26aVeiE-V8IUfF81ugw8_djjfgJ9zwJZ8CwGrS3w65vDm_9_mYK_QBYNu76J9ipmtQiboa4VDdKope4B-O3axE0phlh5vXwJOUp7jxnog8wwGx-jKCl7r53LMNLk/s1600/custom_hsb_h.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTCokMn2vNxpaDwjJ5zJXTSVoAvYzGoDeN5MXtpDB5y6PXR33cdUThPL8ZEi1gokS5uP0p5K5IGTBtBzD-Wl3qPXWjBtQbhxraRzsGB1i7I1RgyLdTj_fSTZ7RTDvnOm_1FHpTlxkeMSU/s1600/custom_hsb_b.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_submit {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyxEmgfl9QvQfbHlgOkIT4_Z3rhJNCjyTiX4kWd25zmWD6F-yUnQGChtjAKhxmB1TaSqnyjvvwzbbjgy5eVvCQErGTxI3jP1kznkNknDYYttV0FEqi9ErhEpuck77UbDF6fmB__nbqTSE/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/AVvXsEhQD4sX3Lb_v2vItIv3CNQ0C8jOsNV2714sWGEhBLnX1-iLcrNk7xMkNSeMABxipoFv2Dex0G2apmxBB3CeNyI0I2MBaOwwQBUSZxFS-zl29yyOLQz2GiU1LJRnjrFUSsJeCsCY-RmoFfU/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/AVvXsEgRrkO5GAEet_cxnjh5SfxrjXHSpkKst79bbYjCQUo8fBbPNFD_1ct4UFqxpmI0y4lUlsa91Es-GnxVHp88jnmvlnXgrHApEkEbWyQTZrdA09ZPXuBww0-sSoqJ6shyGipQA1nP95WN2q8/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/AVvXsEhDmY9WoKF917CuX7yvZRpy_rPu9e6cSKgTET9zg_bPATEqCbqpS8lh7g4ygyRoGOM0_Bg8WlSvbyLg3FRY7dIjqR5YnzCvKPWQ27QtcshGrQmHbbH7Qxlg5xdK-Yz0fueATZJORKHy8zs/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/AVvXsEjwooHjlir0-MJK6LxBrfwlGcf8_NB2gdUAtS8asXSUM8zen7GsubI8pSNABl1rlkEwoopYq97AV2TtYPNmSezGlbxBaN9sn0gFbNodij735vNW-6IJobqjtTdTMINW6vhd9IYx9iIgfgY/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/AVvXsEiklDRwshcVGX1MUDUunI8aA0AaiHKIEDqc86lzTT_XMb85ApQiqI-jNJftDbTqcWxpeRTclucJnMpSZdHWYfzcAL6OIK3M2PK6OHF6MvDZZMJjmZH8tAHh1GY8vgAt5O29tVwpimQZKE4/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/AVvXsEjbsa_Yw89yZ_qLrvMLxaVPhW-2UluC61REu0CJKfFCGCiu82Wama_i_mrf6upUZwanpnexHSKHjk_tUtTO0I-1n_zNue6zMl4EGoUWgBe3SrExjg_Av9LZbtnaBjpJHRwCB57IvwiPSSE/s1600/colorpicker_rgb_r.png);
    top: 52px;
    left: 212px;
}
.colorpicker_rgb_g {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZrhxfjWH3cRTwBnY2QyJ9f_IEKCwMFMORn6r0j4v8POB20y9bMuQDsnkkRX80hKvmKSHL06M4HAGSeUr5abQjByqT6TvVNKOMxwt-lQWowGM0lXXaOHjBtkFWowDC_LP08nu_R5uxqJI/s1600/colorpicker_rgb_g.png);
    top: 82px;
    left: 212px;
}
.colorpicker_rgb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO_2Tn_xHEc6LU-CqwkT0mWac5h_DK5IAbRnicEDnn449ZWVV1ON0vEGOo-YXYmTjzR_fF6XuyT3WLkLwxODnfTV59UbYQnfsXPh182uBWQt54an8F5SoaZo_-N8j56mldkYOsshXPZ-0/s1600/colorpicker_rgb_b.png);
    top: 112px;
    left: 212px;
}
.colorpicker_hsb_h {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6NFJmG8d5KQJ0SBLnjPX6m1SYL4IYrMpQRSonEwexPr5utT36BRB5ddH1V6EzXKBCt3UfpKukJFevde5WOaPoK8W-hVKTO9VdA_sNG29eT2_vB888v71Tf-qenXEy7o14MtG23a2nq6c/s1600/colorpicker_hsb_h.png);
    top: 52px;
    left: 282px;
}
.colorpicker_hsb_s {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIWnizRrLcEh41Afm-bqrHevlSVHco1FVjCXBt-wfgnr6oN82zeIBNYeWKrLY4lJrdZNA1SwWxvlTKDgZsYlaDRq48dayorf11jWkGlzapvL6D9E4kSqLGDZRIUmtVvsCVIKZgnEzJFOo/s1600/colorpicker_hsb_s.png);
    top: 82px;
    left: 282px;
}
.colorpicker_hsb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCFMz1MUVgK7zdt0gcG43QkwHGugFBPt_ShfUYt6xpEp6u1wLscQilJAOoxaxGuPY5NpeVB4fj-97aVlSFNuzBi1Cdcdi5FnbYEDO0862uJhqt-cSQ3_xxH6o8k75GwA_IGwGT45LWfw/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/AVvXsEifSiIBbc2Z2M26yProTzIwV8hMt9D1iyxNdSDXIvxnZLHZY2yOb-FlY5FADr-s2BJcM3kpT1ydbH8AWYE9B4dA47eqs1UhDyr4Ro_JetffTQ4czhkXBEtiJxG2KIz4CzG-VHGQ6DistFc/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..........