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/AVvXsEi0HA61oz_AIG-uLKfPMweXRDaGHF3X5wxRMGfilm7uHASNeYCXsT6V1jJHEm9cNGvfKjS964Qzcau74XGBe9OI2GJJVt67D2ts-25d0V-6dVVjELl8DpFdwIJsd1DnhmDtCE4A1RH7QTU/s1600/select2.png);
}
#colorSelector div {
position: absolute;
top: 3px;
left: 3px;
width: 30px;
height: 30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0HA61oz_AIG-uLKfPMweXRDaGHF3X5wxRMGfilm7uHASNeYCXsT6V1jJHEm9cNGvfKjS964Qzcau74XGBe9OI2GJJVt67D2ts-25d0V-6dVVjELl8DpFdwIJsd1DnhmDtCE4A1RH7QTU/s1600/select2.png) center;
}
#colorSelector2 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0HA61oz_AIG-uLKfPMweXRDaGHF3X5wxRMGfilm7uHASNeYCXsT6V1jJHEm9cNGvfKjS964Qzcau74XGBe9OI2GJJVt67D2ts-25d0V-6dVVjELl8DpFdwIJsd1DnhmDtCE4A1RH7QTU/s1600/select2.png);
}
#colorSelector2 div {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0HA61oz_AIG-uLKfPMweXRDaGHF3X5wxRMGfilm7uHASNeYCXsT6V1jJHEm9cNGvfKjS964Qzcau74XGBe9OI2GJJVt67D2ts-25d0V-6dVVjELl8DpFdwIJsd1DnhmDtCE4A1RH7QTU/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/AVvXsEjf9xxhwrHID9QtbFfx9e3WurtdobzWJ0Rqu0H1N27eLZVQvRGJJerwbN-1q5KgugNT83nsF57KwsoqwFkL8YL1FjnPJww7fnxAa719lgGppHUkvqt3eZQLgwyzu1-Mhue4afx2QMiKOAs/s1600/custom_background.png);
position: absolute;
bottom: 0;
left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmrp4CzQ5qHm3RuemLKPYLY8tivjaFZsBBVfh_BBmfPLAsIMlUVDfMS0_3pSAeKUwO5XQkeHWzILpx5gd_PSeFWJY8Y4oHNtbgUCP2P9sSUCfRFFrCZ6E1RDK9-V5LTOaM1VdCUvutoCY/s1600/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglsYtJcrQ7eE2qhWjBWzStGMlUMghABxm8EP8n1AdSpopUp4RLaio9TOGWhTBRpspwvNlGOJOA5f4_PPzNEQEKnFFXAidLhx5baxtljwUJ_di1Kcaks_laNpV_hBYhV89w82UbCg6nQwE/s1600/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXRQC98W927V7WcdE2w5-sxDxL_SSdp56uyzPqnMAqJdaNNaub0to7PMMaUQOqAdR4INQJMOrJLjua4naIwEBpFKdjML0ext2vuO8wMGkWKNHriO8jLXAS12nVdhEyZSxTEYdXRiGSicw/s1600/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNW8FCs3FSQ15j42pVAudjWbx6B5TfjGF9zVR8uIAgdqAodrVTiRnVWKaAftZ9oTGb_qxiLDy6qwP1I6ETmrQ6GEOLfAU_3_sLM9VA8FYzNmQG8X3CrZ3WRdTbMGK2doZYs7sbrDsugYs/s1600/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGgneGew6UeaIWWAW3zYSCwsZqD3uHKu7UVci5J2iPRtdmw7XYJEdm7L7ifEGm3EC5UnCa6q9cQHW0U3JNCov9Y7nX9N-VYa53MEZmwPt_Jc-gUz0x16J5nXncw_Eo02cx0VUr0Ia6Z88/s1600/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWP7Td5wYh1yBTTLPV-6ia06oEXJDz_ifk1vsMdclEA1uO4Yk6ufDcoE2gqAgUex5dAGq4lv-jD1p2z2dUaTKzpgyhuepKKy9PD2Cc55vaVxOvPDAUaE-ZDQS5gFeksuc_ydCLcPoNR0E/s1600/custom_hsb_s.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSfQ_zlSyE7teEpJYmcy0b_XDKRJeqsC93mXsDu9ENVFlTtOjJulnuPZ2KI_6DzuX5y1Zqn5CZmH5Pqeb9aQ1DeqHwOaelVC04JTrMlJjDtkjcHn0lDFGC4JlD5xUfsEi376DJOCgEszY/s1600/custom_hsb_h.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdaAQkvgzJyPiulN1lrF6myFo-yXPG-nsgkUCw_EGhALcgbx5y5YYYaljP9EHHZG8UmB4-XxnYNcltDG-XavkoHMkNRMxNK2Gv_fbwdXY6CIcL7axL3MpRQBB8jM0WxVyQQAnU6mnG0wk/s1600/custom_hsb_b.png);
display: none;
}
#colorpickerHolder2 .colorpicker_submit {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-P5Ff7T2fj30iDjB_4wEYMkGLM4lfQ3sO3pqBXL2OJUa84uLlcYf7mFgpvaOf22uf1ttMbL8cfyVmV5NlyzYO53N-f1qexsAkQey8m1wCggusjy0sC0LV2xhTP02XnHPGsF_DRMVd3EY/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/AVvXsEhYYEssMkwh007CqiPHiKzVGb_ix-Yt6cyTeDSxcfABGUFBKHhdGLpP1dnxV_LNmtcDb-DBht0chqFZ8b8d0HrXNZW1_y5p36yZfeyR3JEvZPZY1Jt0xihqk4n95U_GMwXZodtKvFMQOpE/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/AVvXsEgNdTqXmegMP6N3Er1m9tV9ay0Y-b1YvF9u-nqGfhMqxHT7exi1DUnoCHjsiv_pP6xIzHrV0tkkfyhDyv_v_0-0wj6QkySlHg4PGgMTpXnBJSw4pnNzLEUTXe9vUJefrVTx5QC5d6UNihg/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/AVvXsEjrMWJkoOj7O0SdaHjKSjcQId6nPwZmnw7G5XHr1b-bmKQHQ_4a-CyNqgSRv4xoK9bFGjWbPLgapmsL7Rh_YftWPfumGjdyZm0fiM8YcQMm5Z57N6WJgKvcEq2cnK5Zy5t0Jbt653_mnpw/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/AVvXsEjEjKwnWKRlxthGZtMJNzMQwNgNdDy64_9dtAAoowwKt1WlH1DentNRTexeOPs_UMrQPH8kupgxrtsGHM13BSCGsj77keXlNpPRwQZQYIMkMh_g0BFa9PMe15VtpqJOoZnFsO9X_1D7GwY/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/AVvXsEi3STiJsD6f9BJZp5g1Z4b5aH4MxKcPgVNBz4jYDTGQlHQVHuYSEGI3HRoNnD9JNk-RekwhBnsCBsxrcuWzK752VkDtvC1yRV6qYwv6HaJ6yQ1MjoJHcWlkFi6_Zx7qnWCh80BlSGpJdkM/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/AVvXsEiQil5m8qLXBO1sV9uEMe3VsuBDf8TqcUP0NYC0JFPGpb-toWlpJefrg6ofCnUltEL3x3pj7L9ZhhrJGHuZtYup7C-aOWNX4z1WtozG-bkZngAdEG2M877nN_Prdl1GpvFJWg0uDDj_-Qk/s1600/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn0JuRzOyvjDnCITF6BxvUG4WbK1qrY32xvFF2yQbDMWycgJahyeSz7E6i5CQgEVL43Vh2cv7yMhzZPXpW02Z0RPqstRUYWGgr7vT-IZjN8LF4o8Wjj4YuyDXkk-jWBUqNwK9P0O2MRAA/s1600/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8QXwpqc3BVj9pgcQZuuoWy5ZezWdBDj2muM856-rBqjE-vkyzw2bG-k32ZAJPrx-MODTReQqIId2uJCYwwk9gvUUsCgZMRpi9tm_ysWyQkXUhtwTu7PONGbncOjEmwNFOaLsMGG5qDt8/s1600/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-KNt4Rea2UvianhFbYUdsqyG2DhqOPXJJbQhHJa2yTXNJeTuUWXVQSYc1-5h0gMC9oJKBXEBzHiwGfIynR3gT73fkoQM5nWco06fciNTmJwmOnufwC-ftbHl153Gh1OuenanZgho92TE/s1600/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ5E5W76JklRnRZ2G0nMMhuwblnBWlbYZ4T2UYQesFJG6E02RPrxYbTOYVeKgWpSXaeJ3NQBnukvtcBNp25eAgVNS8DHIZzD5txZeimcxDUYYxUOO-gX9Z7Jwo3v-HHPF98X5gwvey1Ns/s1600/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3LAXjacy0kYf28QvZAOnUKhuAyzibtH6-1rNHNxaRwV6fUjlPA3MbxYM_1RY0gaQ52S-VKGWr6TjZaZUUIXz5F-dOFLB6-3k5fq5ohYTjoPe-8ItmiByXSUIpBcejGpL5yiBltDjC04g/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/AVvXsEh2j8QGkBYdRUmrPuH2TeaundAM-fGTsWehcqZPut-1Q0g_Yq8qD3vMiE9qxKJkDAm-6zZGZLnY0lIicyx3fLm6tcKcpWhBnnDDaHNlYso_hFPluIt-9lYfjC7NCN7yTmFD1UxjX9oJZvE/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>