Jquery Color picker

Cara membuat :

1. Seperti biasa login Blogger terlebih dahulu pergi ke menu rancangan, lalu pilih edit html,
2. Cari kode ]]></b:skin>
3. Masukkan kode dibawah ini tepat di atas kode ]]></b:skin>

/*----------------
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/AVvXsEge6jH1UU5XAVXH9SV2hb4V83xMAmrrZXm6EwzH32zO09KvQdP2JGAniib198brKVzy-t8HPNn6StMKmI23ZDMfcNJ2QWrul6Ki6-OxzXV7AgzumLBmKvKwp6viKmX2TEMtW36mcN5wdAE/s1600/select2.png);
}
#colorSelector div {
position: absolute;
top: 3px;
left: 3px;
width: 30px;
height: 30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge6jH1UU5XAVXH9SV2hb4V83xMAmrrZXm6EwzH32zO09KvQdP2JGAniib198brKVzy-t8HPNn6StMKmI23ZDMfcNJ2QWrul6Ki6-OxzXV7AgzumLBmKvKwp6viKmX2TEMtW36mcN5wdAE/s1600/select2.png) center;
}
#colorSelector2 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge6jH1UU5XAVXH9SV2hb4V83xMAmrrZXm6EwzH32zO09KvQdP2JGAniib198brKVzy-t8HPNn6StMKmI23ZDMfcNJ2QWrul6Ki6-OxzXV7AgzumLBmKvKwp6viKmX2TEMtW36mcN5wdAE/s1600/select2.png);
}
#colorSelector2 div {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge6jH1UU5XAVXH9SV2hb4V83xMAmrrZXm6EwzH32zO09KvQdP2JGAniib198brKVzy-t8HPNn6StMKmI23ZDMfcNJ2QWrul6Ki6-OxzXV7AgzumLBmKvKwp6viKmX2TEMtW36mcN5wdAE/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/AVvXsEgJnwz9sqqowhClyOCfDx5gpXf0lSguyeQjcW3Qs29spMZ9RpfWgep5kayQJqRxHFgK21YVTEPPGj8LbOBHEu-XQQEROHtN8nPQDL2fKdLOk2FHLTDPmG0UxJ27BicXSGkWo122skWXMgo/s1600/custom_background.png);
position: absolute;
bottom: 0;
left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTp0fwciq4ab6svFUqa5k8c9_pV_JZAb5phtcEiK_pSkTW6g9owmRylP5yapYBjfZQeVGSDCoP0MxX6KM9GqCRHi6McyqK57C-nP-SR7xDW_E1P8hhyHLRPEqvZk2X_Q7YZhgVD2fl1So/s1600/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1mcuOQPAFSwFw-4lq9_3ssvo63hCz43eMdVF1FDlC_Jh3XYOO_7hXhhASGcNkmL5IkY5XeYeCbvMcWmLCNUJufQCR3DEOGDpoqAVXCqq3mc1jdTJakIZPNBKPbTavGcpFyL8Qm8k9528/s1600/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjdvBDRRuKiya53cf9Bu6bvzxsD7DjTd_en1yzcmMqTR5oMvotAnwwDHqBBDNAcerR0IAYBxjCxNpv_0xN8ybOZnTutb7dMiHvjV0-895ZRjVHX9olBnLIRd7amuxQ0QVcyu9Nuhx6f6Y/s1600/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdT4tIax4IBcH_xec8cgpBVhbuH_ewIm2exIhJKSyqUbbPDPyh2V95j9SaqyTms2wV2mE0hRkM0a_xCtKM4Jdq3krKppxifqbuAfTlTN4_TDQRjvfavDRVzu9lmXyFnXx4zM1hGyQFdJc/s1600/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiDR8CxeK7cPQCMiG6BnYnk7Z35sg-AxC0cvc3rbMg4yOv-_mfC-9zSbQnRVmaP5AIsM_n0X3lKlFKJS2HtX5XnVR7g-AKIY5xiYPrfgzKZOYi-P39uHLyBHt2d2o9clpXCzocWk-0zO0/s1600/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkWpRd9mnBZzhVRR_yZwLtHPh29jTq-BZU5eI9bPEn9BuBbtsLLfME1ZKKIHS5z54skjPATFG_R2IJVeR4peXmjJ7h0yZXyfAy-wO13-3hh9FVdYfqtvJ-WRjcn4qurX9msC6G83_dhlw/s1600/custom_hsb_s.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR5vFAJ8SC46-0GR_fFlZagRdztpssmEMC6RuFMfkgMQiQijHwIjYRPc7Tfxc2eJK0Vf0ImwaDkraCvUZ6DoJMvZEc_V56FEsyg6LTnWUm2RkBkYAbSVxoG8Q9rCKHuLsY0dDksgz65N0/s1600/custom_hsb_h.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjreJPnZuBNUzUD0ifV2GhMRFBh3owmSwPrB907cXzvXNkqkyycI2jJw6kVAZYgJJB1UzLuL1uzI-FNBKeOqYAekIxId8n_O-tGCoJtg0RMPdW1C7JApynl826PMWBMRAlcPeQie3BRzDQ/s1600/custom_hsb_b.png);
display: none;
}
#colorpickerHolder2 .colorpicker_submit {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxqg-fGW31HgOKcdoPE42BK5KJh87UD3_sqSw2QxIiRUwoTZ4UNJqvS9NWej-LWmRFI-zIIbu2dhPrawlxlvEL-tJIJHnkbuXXi4UqqEt5effiiisjHYR_8iCp-Mzs9VUcyTLr4j5UL5Q/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/AVvXsEhZxtwqtK0gCZUNxaxN7DFN_9a_mSsdFJine0ZVwp5kQu8MdyZeuGBMOmUdeDCc2yoOLHBTKx6mguwy9IRlaTRl__Bw09MbCXo5MSE66jchLVS73cDSx5ahGRdRBwWR-_fYfUhsUguzvmE/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/AVvXsEh3IVG-P10Oz2k5s569iR1HmNnI7T_AHMKhnmEAclrZ3ikyBJs_CHK8j9gDqph8bgbhyy4nTfHo9TvhkBRJVgZNRzfgO1z9gyYYLrPNBHafFHSvNrnmN2Fwo_7gNd0-dpkmHIshseQE7T8/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/AVvXsEjDx0nb3oRHm3mAdd3DJXJQvCvOEGSGKcGc80-TqImGiM-TuGFR1OylmFZKw-zBqB89sWvOWg_BcFlj755LitGfsCJ1gU-r4sMFhTqJoeAqL14Qt6vsv5F8nPL1Oy9_-SJ8xZEWY92nlaU/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/AVvXsEiM5XFUmmXg5o3ObVs7STwWBnMf8fc49bq2fTpzuCeJMDqvCv911O8_iavj3qiMIZsK7xm1i-xvDBEW5adlsQmxrW31EKERVdFBVldks80MXpgbP1XTNb3ACw9WDatUdWMNpBhr5NGk9Rw/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/AVvXsEjfp_uUr-DLU-7jNedBbMZpaRIvgv8N7KFg770w_msL36cOQTr4ZDnjlmbAL2WKbEDeYdFJ69OVpaM5wZT5JzsPLaFn5GBS0Z4OKQZjDOJJQgn2p66pMYSPf3HQvel7k76tYxcLcegdZSk/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/AVvXsEh7IabvPCFpFJPiG7DOJmm1H29UjIvF2BJNugBcuOtQkgy_-rX2hndXuoqSgskJZPnPs2jFX2UTRs4UwY0K7jOTVLyDsk8jGaQheeV34SYvpH9gjruFIpVlQPIGE0MjWW3SzKMUOoJf6kw/s1600/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHjynUNx7vbfJIKgeFPdHOCxjUxjlo2ahdaROYPuNJ3oO5tvDWM2J010vPn4aOlMvPWyalvPhmUmKVabQsQxNU9DVeBLHq8hp4MZJnlHNCapM2ugqU4G057D6p0WYfDe1hnWa2WQaxHQ0/s1600/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV5Tt_PF7EA7S1z4ttEgzJHrCe47MNSLRnTHI5w98VoiBWm7Q-hY8yU7phujolFJxhfr8lyzQdFXAJt54mCUGnFuoiOUba9FZ9Xc-RAaSEAJsAOhYTiBRuZQY5RfeT-HRZMwI8LkkXdAg/s1600/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglUyq56TXW4VCrhBmYO-Pu57ML5C_zEXn9cUisTUnQoDnru11MN-1a60xHgtIpvmoiRobPdn42heJAZXKJH3mUOmTtSGcsx4gQi7nnep8nt7Fgz7klIivQuSOeN-MoRpulWKqRClr8aNw/s1600/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjos3qd5vFEQJx38Jn9D2G3g3Mej42bstCvCnU5hODKpRANIxYzm-MuKCgkYoEZzf42xt3A32-KYQz3y2zD1ZPy2Gw3P9mB133iQ9XCr2DBia03E0fiNfkT4EnS9Y9AJiFaBxzSS8W5sjs/s1600/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTH49Kgnus7RKVubpZPPI-tPIULGyVGzyIu6z8puX-2vEoKtDHVwOF40o5xrJ6C4fEK-jv1GeHplW15Ft7VppOs9BOnxlrLfmYhQJ7gX7MxnCWyxrrw3mMAYjnRGCWU6foMTKWyvA-GJ0/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/AVvXsEgbDFyeB8G5wh05o_lKWqjg0CnEWhjyZXZsuka-Q521_LjVgWTJK9NK1tb3xzfTzwXmkYRYNLLRLtndJrEIpFmkYXPOPuNtIBFALRfkLWPZY7O-Nw6RAekP_QWT4v6lhu8Al30aedhL-n0/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.Selanjutnya simpan kode dibawah ini tepat di atas 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 pilih edit laman lalu pilih add gadget , pilih Html,JavaSricpt, masukkan kode dibawah ini :