cara membuat kode Warna pada blogspot

kadang kita bingung mencari kode warna untuk mengedit template kita kalau saya biasa pake adobe photoshop untuk mendapatkan kode warna tapi kan tidak semua para blogger mempunyai aplikasi program adobe photoshop tapi kita bisa memasang kode warna pada widget blogspot kita sehingga kita tidak bingung untuk mencari warna oke kita mulai tutorialnya :

1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]>
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/AVvXsEhfQpFdYBVKlJQoGHj-gYBR8N4ljLQGLws5DMNAVFkP2nEHOIHlCKDERlz78ebSxDKMsXZHsV-G2DRQKXT1H1WS-7zLKJVMMA3npFdJ7KMQLqGzjNAcaU9-tV2qmSi2fJAO8E0MJHxGfHg/s1600/select2.png);
}
#colorSelector div {
position: absolute;
top: 3px;
left: 3px;
width: 30px;
height: 30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfQpFdYBVKlJQoGHj-gYBR8N4ljLQGLws5DMNAVFkP2nEHOIHlCKDERlz78ebSxDKMsXZHsV-G2DRQKXT1H1WS-7zLKJVMMA3npFdJ7KMQLqGzjNAcaU9-tV2qmSi2fJAO8E0MJHxGfHg/s1600/select2.png) center;
}
#colorSelector2 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfQpFdYBVKlJQoGHj-gYBR8N4ljLQGLws5DMNAVFkP2nEHOIHlCKDERlz78ebSxDKMsXZHsV-G2DRQKXT1H1WS-7zLKJVMMA3npFdJ7KMQLqGzjNAcaU9-tV2qmSi2fJAO8E0MJHxGfHg/s1600/select2.png);
}
#colorSelector2 div {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfQpFdYBVKlJQoGHj-gYBR8N4ljLQGLws5DMNAVFkP2nEHOIHlCKDERlz78ebSxDKMsXZHsV-G2DRQKXT1H1WS-7zLKJVMMA3npFdJ7KMQLqGzjNAcaU9-tV2qmSi2fJAO8E0MJHxGfHg/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/AVvXsEjnmzSy48fLABfQHCdhlAUmQ8rWB2-qURsuM2Y4H5GBTZ9XN_iLZZzIExw0wMJpxrLipwdXDH1mUDS3zP2AuLzTEYLwr3otQjUpJL1903XfX-mYBMDdzSX9-RXu_03aKu3MTeKq44Lp5Vs/s1600/custom_background.png);
position: absolute;
bottom: 0;
left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkHcnz7oDIG3aJh8lnthwR6YovE8yfsLBU3s4wD1NqExDmHU00K6MBxIcKHXmQkoZBQ-8rAWGQSnMehbhkWxUhAFG67X6_r0Hc0Ak-SQ8qf3n3yY_zwRfzCUNzff7Ynfapyq2ihSEyy8/s1600/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibASlUGvfya66OUHNWe4me9FgZBYYUzU1neNo7d07FuEs1GhG07tbrH7W94o4HMoFDsn0bIquAfbnsPr0ajUfxdDBwZZbInspJRWsizrItsCBfGVjqyPU2rDXUCUG9RrS6mrwzlHAzrXk/s1600/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6G_9UWea7ddSb6hgfhpVqoHSvnXpDLs4ZUfZHRn4VwTvdKn4holuPZrBDiBxn-AX_y_B-7ropw5BvAVnrxR5V3xwKW1avlzgD97MO8xwvXlJ0ASGNFJoAfjZyKF3fbJOVw6D5_kHMc5g/s1600/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSyhNPTrPdTtxoX8_FFaivqHSd4kyAo4SgQFQaLns_ExTbfbNP2lKExes3uM0oIWehUYL8Dw_RA_JlKb0TvdMBotwxU2lKOCTIQUaGYpa_BTdWbXZEpp0witDRg7WcBdhvsh74J4zB62A/s1600/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnPi9YHd4-EVsvbdfY_wSJsUau5TWO3THHBP767XRkwdwuxsVJNFKF2p-XAn73sLtyFEacD75_MtD7HeAWGjyUuwI37_m0JpQlbqJpDAWtXt_jaP0a9dlPFjhsRrMa66XuEP4VtwLrH2I/s1600/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-54N6MBaKqhrJ8Rgs42zrQ9c2i6LuhR8MWSeq5UI7Mr7FqZOIhOKImWlkC8hSNJrcCNmsTf91-5qL-61iQQiG6sruztSGSJlvO_ILHIXvy2yLWM9kGXEMys2ICU2ctdGAXnyfawCcPVE/s1600/custom_hsb_s.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG-MTrb0WeOhDVT5uMl5i2m96PtNGe71c9XIxHTzr0Zm31NK5tv-e69qtZKm9KURC4FllnDpTLH_3Obc0btbLf0D62rGBhKVmgQMRjJ22fughQt5t_XBAjq4hTEUyp0ON-VtPkCtTuQSc/s1600/custom_hsb_h.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs9Q8uLT6SR4Z0qK-2EE98ZjcSejTAFOqVAb5xgDgzhVYH1KGyh3uaZWTaMCejsvp5yETNQU2MaqH7avXfJwvK7Pv67zg4PI4qfdgEQb7XUuySnRcxmvOhVAHJMzcd2RLbP0GbGGHEKpU/s1600/custom_hsb_b.png);
display: none;
}
#colorpickerHolder2 .colorpicker_submit {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Mfk5CO4CPNOPXqE5XBidIF4X4HXKqW2YUJylZPJ8ycHirgMtkculCPTA3STh2IQq8hGjRP3UYN30j_qPbIhBmmYDpKFkevUaJE12ryttD7cE0AnrNOuNW9NrVNg42GdTyMjv4uUcW70/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/AVvXsEja3UigDn7cED2S9ixItpmy2U5a8WExrMu9Iu9Dw7W893lfYNG-MbACWEEWDfY2K4_fn2KMaMz62CAEBz_VCnygKAx597syto5Dnm6rn6FvNP7qApziITcHmIDW3-5GqON7HwWLAMZRbRI/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/AVvXsEhuc8fyml4TDdKmPjW4rAhxfn3nMiD_JEmZjEOJOB8_zaeAcJSBRRXS8wWVh8GvBZiNmloQaTbM8RrL_yu-IyU15JbA42Ev_kS2SQrm_gRneAADN4tcppYPkzeFX8wdadfbsL2_6rWs160/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/AVvXsEh2m-R9UM8aTsjyHjhqK85dzgP3jGBzSUw-Uge2vOWwfa8ZKzO1U6ev9fhpTaWHeEfvch5TV-Sy65O9cg2B-vBf16CCqKJBmR5BNh9v2fBJKa-bPE0-270fFWdHknZi5SLtiGA2TW9_Bt0/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/AVvXsEiu4-cOJIbuV1h_PaNjeNfrzv7kERcKG98QMLDxjG2TzWMlbc5eJCbBYHluYBbWjAGEAmP46rukKb9rZDLeUUtrNCsvL5fWT5zo_26fcyrtu7BGo5AenRk29jaPdN3k8dFJRIXJUVKbjQg/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/AVvXsEjcJCbJcou1I3wAXTsg8oKc0yFRbArtDk3I-rZwYcBAuNbuMT_7l41W4Q5WepDyGV5eobWkIp0nI45_W93poXooRv-WnrYNxQ-xe-jn27O9CpkB5c4flT6Rt_rF60EQsDB-3SmL5YN3DRk/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/AVvXsEiYJ2YX0Nv8nKW2hRl3Ce_4wE5HmL0UIBJIRw4F00kqriRPKm-3POEcnAGk-TOjv0na3QldUavc1YCqbr4b5at2XWeNOz5Po-3n6IbB-YIuVY3OdzTxqZ6pt_03LA94Vz2D_76FuohwND4/s1600/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzeyF1OiGQPPOTHQMMdIoJ_1gYfLY4ykequ2b6sZ0JJ9Av-MbGLRwhhBvn6yXOoURAAD6O5duVjuUx-Af1o1WH808vF5Z5J2BK4FV7z64WGmtzK94bZwjBlvKQ3bnJfJzcDPy8lueb5hQ/s1600/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4jJ6WDEebPMExSoUvZiEWoU1G-jF6d2NG0C3H6PZaNIe4w5-n5l030GsbBqVWCqVpi-_CqYLYjTGPaBCYOcB3gCOL0bOCQrCcs_WH9pMPgRcfgu-3edhQSXzEZrhU1-pKI5P9aI13COM/s1600/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIO2Pspbt7gG_ZVYhJQKJ9ngoBYoCq8E3k0e7Ns-ZjREQlv7V3h_lskb5P0cXHfeyFqP-zBmTo-D2s94djdLyOm6lwWOQ1JnZdRfERPiDyH0Slcb43rRtslxt09qRjEhXINsdyUsLzZ48/s1600/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuYBueb-4xecjefPyJDmObrbzy5G7iXANGXOR5jvZ2CVl5G4g-FcGGa3-ot6E6DOC_UWdKzkW-hi28fYayye8kKGfLckfzK0XTHRkE_-hLsNkdaorn4Fkntk-u_IcIP9BAQiEOayhumkg/s1600/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_VcsTYzUTIUbceayFgHb6Dqq04YzplzVr_4Xqtu8aPLdwuM29FT4gL_9ay9bZiyb07rNo7Qxd0cEGJSllJqyTlcxfzlXU2XobqAovCSFagtKrSXkNbWEOvyTg9B42-rX41mhmhyxPCng/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/AVvXsEjG0VzSneQUA3kHKNEMP84ugJ_zNFP2aBbpqwkWeLA4Mm3SDXWtt57oQRmOT6MDwMF0L26ai5H9cxm2wjpMOTxlzy-pmqB3rjHXmXZ34iAEztXZ8G4VB59v_Fz3lTIDO-uv7F-weyPBHwA/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 widget html/javascrpt, pada blogger anda :

<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>