Caranya adalah sebagai berikut :
1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :
/*----------------8. selanjutnya simpan kode berikut diatas kode </head> :
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/AVvXsEhjY4p5e51a4RFvQBqett-5NBAzOrz_Rx_0uahS4v-MyA3l4R3xSZWYiMpLKWppu2cHo0tOB3MFQJ6LsJMG1lQUH-TUWQWg9OcX961Y0uTdF2NzSbEC-kIuA7wLXrq4ow7wgeaRmbbm5sw/s1600/select2.png);
}
#colorSelector div {
position: absolute;
top: 3px;
left: 3px;
width: 30px;
height: 30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjY4p5e51a4RFvQBqett-5NBAzOrz_Rx_0uahS4v-MyA3l4R3xSZWYiMpLKWppu2cHo0tOB3MFQJ6LsJMG1lQUH-TUWQWg9OcX961Y0uTdF2NzSbEC-kIuA7wLXrq4ow7wgeaRmbbm5sw/s1600/select2.png) center;
}
#colorSelector2 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjY4p5e51a4RFvQBqett-5NBAzOrz_Rx_0uahS4v-MyA3l4R3xSZWYiMpLKWppu2cHo0tOB3MFQJ6LsJMG1lQUH-TUWQWg9OcX961Y0uTdF2NzSbEC-kIuA7wLXrq4ow7wgeaRmbbm5sw/s1600/select2.png);
}
#colorSelector2 div {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjY4p5e51a4RFvQBqett-5NBAzOrz_Rx_0uahS4v-MyA3l4R3xSZWYiMpLKWppu2cHo0tOB3MFQJ6LsJMG1lQUH-TUWQWg9OcX961Y0uTdF2NzSbEC-kIuA7wLXrq4ow7wgeaRmbbm5sw/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/AVvXsEjPZXT9r-cRHD2eEpY1uhX8YLx7LrlmpcQRLeNtepeZ1B7z6nb-wUJwnJAr2SJ_hqbchyphenhyphenSWQr8J0NxWJwuoSN4i_NFqGB73SNIkbDG2lmNTOUX5AgOQHNrgeNkV0-_fDE9wNYM2rbqp1t0/s1600/custom_background.png);
position: absolute;
bottom: 0;
left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBXnpi84nM43edgX9W9FnGC61DajqcYXj6OXc9SI-phhdSuflU4i0faW_Zr4ktUjWSZ9ePP98JHySSqk8Lvi_33WGJtFSDn1a3JvomiYraG4c1RAdKD013O7v7k_E-0bCb0BM3HhEYOlM/s1600/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQP_paG5yLUrQOMhyHEY9O3cDbQJQzgR5fS6qg9gAzcq00iVSrIhIikaUfGrPz_lCTeq_04rs40OcfR_QasEDxJdmCGO6p1i0fnMIJ9wN391HrQ7iIRoLpMmXOhJaIAFM0yk3_YDScOXs/s1600/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfQBijZq3g7kB_9PmEpdFSOD0ftn_lE9bgAqk56GRQNfhygycZJ8bBdH-oOwlTtGZfzvALGxFlnamhtbFYb26LMri8KQdHgqEeOTYrpqHKLFAYrt9Lt9i5CBwyq1D0D_WHpJ2GS7p9_Fg/s1600/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi05fimjDlioGg8zvq1CtLkLOEHZghw1cOY5_6nBZqgJ6BlJfrSJimhQ95fM1Z4hyKZJRe3jyumUojHloAKY_QFC2ye_J28KAsPzJTWjfmSWRy10xEhVPEalsKrMioQ9S0IsJJUBn0dR9c/s1600/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgodwRjh1_iTSMT11Ndg8t3tk-7rAjfslJ-byIFlA3HcxLkm2q6FgFQWAtueP9lQIutP367VDgVEghEGP5L5bPTR9B1ZnfMXavnrdoszPBHwH1VGHoGTzqgDAECa3nZMuTM_NoQhcFLC6c/s1600/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfuqqQ7v4wFmRqmsPAzQ-duoLLviTz4UMWYixcN0MK1kpr4kAw7trhSuKJSBWH7iiNs9iuXswrbs4whwF98g1VGoalR0qncWqttvHcicLQLZJEHp9APaOigZkYKYw7W5D_wBcWuBGui_Q/s1600/custom_hsb_s.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg2SwGWG6t3Yhd9_SPWdPx9AnZfNs6pJPYzq2hz04K3GaEWa1sHI7lCOHeuVcyNixAzofVn4KXAnCPvUU0DMOEExYWWN-n-YX0LDprU_78ljot8NlPoeUw-8VH6KPiH5fIZdydxpoJSaI/s1600/custom_hsb_h.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFutD9Pw3G1dZd0xxp6A2ZTg1MoXdKn37kw5P5FBsth8Rl3k1aOrL1kgBcECOqYmGBHzhe10qWYE4ZhPz6YH7qLcWTGLu6dG_rMKK1mReZgw27rFOA1cQuRRKDpN6zGbaUQrIPc4AzNlo/s1600/custom_hsb_b.png);
display: none;
}
#colorpickerHolder2 .colorpicker_submit {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbwM2qGi5xRjBLLKbrB8gOvi9iD55J5KGlu8sp5FGpt6HlGT6bJyJLeNaa55fG8q9KdUDjBQLFn6ocBHgh3wx2gZyAu7g1BUzdTrGxsl3EE9wuqOI_oT_XCby00vUcu_cPpItt92iwh8I/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/AVvXsEi-jZhSyNJvVEO070Cgi8xpM9Ix7qbE-9IEaBe_bAq_9vzVLILV5_nnPYSZlPJ5iaYVeYYi4MREYtYTwOEY1yq5DpQexorPzxt7lPkM7HvjWyrpXyIKTCEf5IrkCg37w4TAttLxLnuDuRA/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/AVvXsEgV1tKfZHBIGLgbAok7DKM7oFSB_56ciY4yjwYiBJATVi0Igup7qu1cs-JW6oV-sw5FwB2DeS-XmZyMaGZ16W_19NBpSSL3qV54lLY2X7WGOIyGWY22lRg0G_vTKtrTRCOitoB6rjIdPGU/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/AVvXsEi23yvpr4exPANfYprrstaOCMa5SZpROj_x6UsDr6s8sbYw3R5GJ1S6eZEcBCb_2vY81tdC5Om-CWguMoUcwZSsoc_P5kLcOBqbORWp5CndbgF38o0dB-o09cjvik6whkVmG8GC8Qxpq-I/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/AVvXsEjiDuVdmzJQd1vC9VzBAe0XOn-nxHfbzE2jcUBkbtiUgkbBomQndKquakfNv-IC4KeK3d2CTsSGA1jOLNClli1hpruQjzfKQtI3yEks48uuqwtmuW5p3h_Jd0VMr4YANS6mDiQmk_S92LM/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/AVvXsEiRZkZuaZmLgA70JXdtPKbc6sNkYKeVGflVY5ByvPLCGJdJJdnG7G_I3Bc0LBdA6hQOBldM50mngqZdLII3-5NgIAEaNDkhcRHq7H_KEqiyxUYW9ATPK5PSyd9n3M1N4M276OjuLVLZk9U/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/AVvXsEhz7sKiHpe4uvVGafUMP1M7Jg4WevWYLD9M-iitjC2zQXsB2CkNCp7PgIM84ggdCr0BjBqvCudaOea0_-z5MXLMjC8Xsax8d4fw0LNeQpM9rccI1FX1-1A_QSUxAMHxCgxJRY-0T68PYrE/s1600/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmwmJArtNkdzxo-Qq3xb0R_onOFWYtGMDoQ2EoRM7P_jhuNiTTylQH9ZQaBNOXTj1LTS97HO8xVmq3LlGk-Zy_JOlMr8sEiFKwM1-Ux2cBmf9GvV77zLhl1hNs2AAROaSpPFyAhHTHl0/s1600/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtt9pFhScF1TTNd_n38uyPJfp2gbVL76ZUjEtQn340O76M_C3CPDH1NxbbLoCQSxYHGk9jRpt7cgxWERk5oRoxTueIbcyvL0XC4NqCb0_psABTxLxfLC-9ipVm8Z3iH9B4Sxne2DlaCyw/s1600/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI5makr82RyfnTTJFBC5-Ee3xdHnjNbAaBUYd8SSGK8EDlxusCmqZ_PYPVNWUg-qN8J7J4aNImVZQBRtOSEZ7181DEuCSS7wqtp4X8C-b3xdNn9UZTmf-7c4vnTYB8xn9Sc91e95Rkdd0/s1600/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3nFxnZGqvqxK82NNsdKseERgdTGqcWvuC-CcxasTKIZq98DtG7Bnij-Ieu_LOTH-RHrjsmDOx4QZcStsjfaUv1ONLPnx87RBp8qKPzieNQDDF4B6KC5RLHMayG2kyr0pLRKS3_I2dyNA/s1600/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipnloB_b9V2ZkEHwaNkrMMtcrmSu4FTSktWI_wiDbSxeoYOZJjk1cOBu-vDuSEwV2A6cJdQLRK_9SftHq2s5DEv8OWFBIi_aqd83v0srkaRe62XwJXNL-vwX3ePcIzeGHH7XIKSLB0IUw/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/AVvXsEi6lnCqM8fNDNooaXq-Me8_M6smxgnz_zEVRhM0wUhkctlIbFVUV3Xc5s7hOl6PNQ1lwVfMH78bO0v1X5xy6zegC7LqS2GiHlpjNG3eIoINsNeVtJIMJVu1RqdkJ1Mrevd9v2vm2xq3jiY/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;
}
<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>
9. Terakhir cara pemanggilannya pada html atau posting, gadget, sesuai keinginan anda :
10. Save
