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/AVvXsEij_sxTyQBvBmpbzoqkYogI9dqIzodsJcj1Yq6vRbOXUbpQUayjABHwzC3ct7qcGd2RSHVKX6Q38ukghN7IVC4be_j9gJcA0R29LoBB_w2CGzS51vMFTVDGwD-HSh40KOS4-RVsMs0vUug/s1600/select2.png);
}
#colorSelector div {
position: absolute;
top: 3px;
left: 3px;
width: 30px;
height: 30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij_sxTyQBvBmpbzoqkYogI9dqIzodsJcj1Yq6vRbOXUbpQUayjABHwzC3ct7qcGd2RSHVKX6Q38ukghN7IVC4be_j9gJcA0R29LoBB_w2CGzS51vMFTVDGwD-HSh40KOS4-RVsMs0vUug/s1600/select2.png) center;
}
#colorSelector2 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij_sxTyQBvBmpbzoqkYogI9dqIzodsJcj1Yq6vRbOXUbpQUayjABHwzC3ct7qcGd2RSHVKX6Q38ukghN7IVC4be_j9gJcA0R29LoBB_w2CGzS51vMFTVDGwD-HSh40KOS4-RVsMs0vUug/s1600/select2.png);
}
#colorSelector2 div {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij_sxTyQBvBmpbzoqkYogI9dqIzodsJcj1Yq6vRbOXUbpQUayjABHwzC3ct7qcGd2RSHVKX6Q38ukghN7IVC4be_j9gJcA0R29LoBB_w2CGzS51vMFTVDGwD-HSh40KOS4-RVsMs0vUug/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/AVvXsEi4bYXcKxahHKv2aWD0z4kJm_bXyjND9gzDvvGd2KkeD-GvD_ZThkTLbhVhabb0Dxuo9LYqZ8K7zYdTFAYxMMZjSrLThFKdY3dow0q5_tmVQgkVGdWOiy0aRT1wd8cdIYDVv4k6H-P9ONg/s1600/custom_background.png);
position: absolute;
bottom: 0;
left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdHLAru_I3HmAdYECT6BG4B11zMMdRVn9GLKyc39BnZxvnteNcuZXn41XyVMXPIezKofr796EhaTN4V9eCOErlO_QbgNGEtjpGVLMeFS3Xj9VRAdNJ_05T8vzM_ECGcBO1Ghw6QcuhWi4/s1600/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP7CZWZak8B2czkQMDFVgAh4Z7-GWtT9BFJ-8EaPqVZkhH8PY4A_JIGT7Qa-SUNDq7VnTot6pBxrJD_5VcSr1i9AcvY_Nwx8Zxg5VXt6LU-HjDJ5l99vGMujNVGF8MZIYTM10ih0Zpago/s1600/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh83L9Y0nULWuWiPUKpqupJiVA1OD1jeFKfzOBXHdAwFJGup5LaayPIQQufRBAIRMn0DFBSAbXFRfnEO_ksljWNx0MVYyQ3vvsgGyqeK3TPw28y1ObLXhPD9se-nobMLbfFcrWcEjBjqJI/s1600/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfJPcNFSeFTuZGm3fLttmORIlI8NG-DFrmXFWOdsl2MIuN16KR7AOUWSpcTj4gLc6hQlL3dQxut71OFj2L6nY13NvKSjTt0wlXmPJzQzFGjCD0pKKWMRj93Plwd8NVmfHwCZxtYi-3ZyE/s1600/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAYBpEExcm3K5eP9nPZayJ7cYC2CeURvlfSEgJFWcDuH0_Bhb1yU8a_xmB0ckstX3omV7lIfQ3vfqAsdXtomxGPnLmKKzXuZOc_tAteISdhPRK4o_n3TBAaoULzZGyTTD6rgl-fwS8G3o/s1600/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB3mDoOuAokFIvmD2Ph1vCa1t7eS1k5yES8VgXg9bhjYkolFgCTJX1BCfpK8R6dPf4IILF3MveUlk-8lTmfyxLbzKkWTQYQqppQoeBP_CXfFjKvtkxWBq7KsKpBkDQPGj8PBOr3E9R6ps/s1600/custom_hsb_s.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixgM114bOXIOPmUM2p2EcP7SV1yn34KJ3hAZ5BEj9FKEKbagyCUjUfNqiq4gKrZkaN_S8aR2Cm7o2CZ6zPQHdG8TTf7u-CqphDxBgf_8yNHVHqV3rPsLGjr23FRWzobar9MLIxpef0FEs/s1600/custom_hsb_h.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-MgI2hfQJoTn_-mBdmLldF3gaNkd4-axXDWgNdqQN-KM8CRnbf-8yhYyM6nbQpxNe-6wu3X6V3S_5wK3q4E1vykeXMBHrp-j6vrVGto-ko-6jG7o52qn0-E-GnwQerg1Tls5hNQcvYJM/s1600/custom_hsb_b.png);
display: none;
}
#colorpickerHolder2 .colorpicker_submit {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR0yL2SkSQzF04Snr-Wdj7e3-YsPrgd9taFlb7-gO8z7wI7i_LJWr45ZU-QRkOP3GyqOMAOoB0vIAeQGlHDT9pEdWq3vonQ7h9Wu96UQPxnIUlmhkdIZZ8RH6kHBWR_c41aweU0Dueggo/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/AVvXsEjuVSGMXG7EnRcXsXPmP5H76OEv9FbIAH3iBj_GDqTS7RLLemncOQT1d2Ukg8vTp1g5z9Ui9Vf2iALlRxjSdpIMPAQvicP0NV7Ae5MSI3otzpbAQwWypuxkzemghtG1aA6YAQJsGfq8uCo/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/AVvXsEhqqg-tIgTur_oDI0o9jRlpHbdELoLTemg64l-C7oKUd2Suv8w78bdXTBQmaDrUEPculnVVnXMynmQx5gQLTfO-GER_eko_RXZ-bcthYJi_k-KsB0prVcZiGHGXDwicCjc8xjhqmjEuLPE/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/AVvXsEhFAdY-r7AZb80vnH4r92FHwBxe7iXa60F-zo8TLojVesqUgbYP67hkjycxPrbj4g651udBCI4XW8QfIOaptT-yNaeFbl065TNobc2wCCiPcveWTHt2CrvXrZOxM6LNV9F-JeNfato0hmE/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/AVvXsEgdZ9MSQHsSoj1lvct5KfqNMZ2pP_ngAz2_lqGZGTk-U04T1VsDRXZ-9CcZlti_JmI2_wNweXRV0aTq05bALIuVF3W3-u1bnP5dNtt7czQICutq5s3pHWCQeFTxyKzB-MdZGEE5EY5Wk1I/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/AVvXsEhoZF7dveaebxRW3x1VhAiDMI3thC0D9dlcmxIpFDRolvcpxYUoxk731cFutaF8750XYq_05um4QC-fxe3P0JK0Zxq2g3fgCqeQiWzeFgWynmmQ44NDVEPsj9H4aT4gLC0pcmyj4zoYcks/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/AVvXsEjVZnxPukF6l-Pm11LiXQWXWYfQT1xyQDG6NaQD9ugZn9l1adLPmMCcicegioaccm_gYl0ioWbgsmnaiIqPEe3W0lw-Q8kyQQ_Ejl5w5bkIMzjIk2NHeSwIYXTcyU0jv11QPC91-Azt8gQ/s1600/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEQMPuJEGlYRRk2NYxVp4PkcrjGkXVFUUi217cwurZSQCi8fRMHNJbTGdgTU0KTFhYlxeB_Ermzui__WqbPxz8xiF5ZUFNI8TJEcUevxK0wKAYNPLZQXXqmOXu2PWtVIBRHZKJnIO-J34/s1600/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEvFsfWCWmRTugF5mwIiPDBVVT1KMyLdF6F8VT-lPYDGyZyg0nNiGIZWpopJ2BkoCLxa77Lcjq_lXxKb8vAl2XUcjVXInzp3OsU5mdA9fLJyl59x05F9LJzHPpKm-xdcfPOgapSnWRkbw/s1600/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLFL6aEnxJ5fyuG7m9LKd84BhT7kEWKOjHMUh-ghKFRR13pAAc-WGOBo-DkQtvUjD1MN_SQS7hy3nRIwQfkHWrQVaKqam1ry2bJa7qSz2zlwXXPQNi1eoT9H8Sq0wkE5WPU7E08IMGlSU/s1600/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Ca5BLKuNZ3FlhnbU0GQ4vvi3Rdoeh1rCcOYs8cinMXrbm4T3Ak5cWs1TCdkT2DR1NdOoFnRD15jR5lf-8axBpJo5t_teIgwvGkQbvHyBmpSPrDRYgv-3JOxxV2QnTclRlJfPOmA1LtY/s1600/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicz89JHvObwaTiv5QQnqXEymyYw1yZ5uFuAHqvddd4C8aaiIn-YPrN5JGmbVLbnxIcYiIo8j_7BMJRBM-PUadBxp08tuZbqLUybY8kRKd4GDxGKktox7z5q_ht1-blRjHzjmCuslzJPEI/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/AVvXsEhrIzhJDRMHQnGbyMYhBk2cPVhiYZLqpfF_sR3wSsDxHPvVVYQjJHqUx9oWiwfbIDV_7QYAgvt6U9qwTtAZyGgLqZYnenA4oBGJTlkehwFFooNE-PSIQUs9iSPNVcqBdVISGWe-fE349EQ/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>