Demonya bisa dilihat disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
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/AVvXsEgBy1HyQBgT3xc_8MSfEy4u5ATsxRt5KWD50ey14eN-gLcb1q72BvfMng9l0kA9sn5ifBEBiEJ1vxPaHLYS_DNhUoSr6ln1PwKsKwWlSvVAbe796SxnonEZ08r0VugDbSAOrpBDR2HELSM/s1600/select2.png);
}
#colorSelector div {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBy1HyQBgT3xc_8MSfEy4u5ATsxRt5KWD50ey14eN-gLcb1q72BvfMng9l0kA9sn5ifBEBiEJ1vxPaHLYS_DNhUoSr6ln1PwKsKwWlSvVAbe796SxnonEZ08r0VugDbSAOrpBDR2HELSM/s1600/select2.png) center;
}
#colorSelector2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBy1HyQBgT3xc_8MSfEy4u5ATsxRt5KWD50ey14eN-gLcb1q72BvfMng9l0kA9sn5ifBEBiEJ1vxPaHLYS_DNhUoSr6ln1PwKsKwWlSvVAbe796SxnonEZ08r0VugDbSAOrpBDR2HELSM/s1600/select2.png);
}
#colorSelector2 div {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBy1HyQBgT3xc_8MSfEy4u5ATsxRt5KWD50ey14eN-gLcb1q72BvfMng9l0kA9sn5ifBEBiEJ1vxPaHLYS_DNhUoSr6ln1PwKsKwWlSvVAbe796SxnonEZ08r0VugDbSAOrpBDR2HELSM/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/AVvXsEh1KZ2x9o0wcTJwSIa6nea5c2dn68or25hXDdJ26ALs35WwNzppbhdc4Ywt33ibhky_qKv4JDeqX50fLdlEolY-65lpwDSWTT_KF7OacJPNTRKWSurqoRsItV8c8XRHAG0-NPfFN4_fxRU/s1600/custom_background.png);
    position: absolute;
    bottom: 0;
    left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8FAkC0ZpMpX3zBBMSk80qMGbCWHDXFCxUDBgWddI5SRZOHXaXgABCANEivu5n-hIwhXzJvUK5EGnAbgD-YqkGO9de-FomD_gDijdPusdj6yZMSvdtB5MKQ20Np78Eti8skNWjpi7A9dU/s1600/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIP37Fo2PFSp5zmXB9YkzzjO3q0t-Dess1L1383cQJOVxWhjSkD64wNHsllrKCoo5EOO_PTRJK665WoHHrL5GaIZhrcsaIPolhLJrOAzyDxC5JmV1X4cmi7Bc6ojz05DqLZrc9MFqJbZo/s1600/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEinxObh4omoyvMv6JRG2uQQP2bnu4PxbE0sBRkLXV7cQz_eIeVq90sduzf3KrGbVElr52ZUQL2_ODwL6Bxvb1Y2E3b561G7Kiy5OwRbfWtqYbvYHOv6GSa5uPA4Z9yshKic55C-UOqA4/s1600/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9FJeRzHZOkBNNIjHw6S9glzeQB6WarsSOxglAEpp0AxsvpTLUuQ8WS9Yc4Lg8kHd_x3aTT29a9dOzGI5VvL8MjSQ3O0qMpGwFU3fM7kGcUQuPIXPA6VPryxlp7E6V7zIY13E0uA5bAeU/s1600/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBF7nGjnCOJRsJsVpRTFBFrDOQaj9dtvZ_wwb0Ur_ApQJRzury1LFQkvzprRXWkjWFarH1mXZO5N1q8llsfwQHaE7lhPCktFlM0aemAnR60vhyphenhyphenOrzLh0F1cenipgkZxHXU-PXy7WyjorA/s1600/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdcE9Q0m9CztlJpn9DJHWi12L1GNHD8LccoXi2YSMqBQyzcYsDmjd0HY-tlKfEtYQCCuAjdJbXDB1m_Z3z79OkKDpk2dKmGte13fg0vXWrnh3H0j5rOlf9rLxVZ81dEYg3yojr18-T62o/s1600/custom_hsb_s.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjancpwFNqQmRATGI_J2REXTiEWXII-iDSFqKGhjWKTHTnH-xPayuFcED4qcDioWnQR5cFcvFXW-LihbsqPYuOgJD0-3qVY-QfbL8CqJLb8ZhYmQ8ppn0iYg54nix3SOcOV38QHkmlx3t0/s1600/custom_hsb_h.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigSTkFQY3Mzup4XaxL_UDOuBsTskGpKuYRbEz_rwPgFr3Ltc7GuIjjAb8wuS5IwsSm80JWTmn7htqIT73jtw0fGIcwBb8KUbup-vN_ElXfO7gO0LynrgWOif4LTz1X28aDNzYH3IXUgCk/s1600/custom_hsb_b.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_submit {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjofstmUvC8IWOxOIXyLUzZA-G0fIaJ1BncoGhIe2k9gUJRjkmFTJSe3xCnPxbhwaJFOfVYFO1j40RBmpsdIsDuhKc331RbTV4jI5jfzYR1I4Z1SF0FJYWi5fDGroDUBjp8DXEFUIxBQnI/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/AVvXsEiwhUC821Ui8ZWMxXufs7PgJ1c5jN5BwqxCVggrJlAzag6HjWq_VphdGOKWT5rYgjE2RR4v6oioJsnb8G9MaxxqPaBf2A7XpNhwW3vZXomcg6z4pmVlbYGcqWx8hoCUGwft3XmeJ20YXMY/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/AVvXsEjKe7n9WWagN9n5KbIG7NRh16gtW9UaGkjnedJOqXdvLOSlTnVWJeo-aO9mKF2fRPXi_H-j_ceWvNn0txGS-t2sNYCP1V0K38FPUB1D7HjMVWYNKDSuLMVROG9Pl6fJxhvp98LVVLw0GkI/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/AVvXsEh0q-16M3np-KI98C-hosk6MytfENDkmcSgtJGjNJs8Q1wJs2K5Q3u6hYvLVt8BskYNUjGTLb0V7kglc_m8kUY0ScM-qxf8O8-u95oanIQsI-sO9Kg5IIL9vdExYyL0CMS9RfJnSUrmfnk/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/AVvXsEgPCVzmK_yr9pfWQJ9PjVOG6ToNdf6GZegqf9MxnmFOgWV5Bd0_3cA2GUw8FMlLjDKNtS8ga9rSzRrpYQEb4tvREDKgVFIBNfgxnlGPXdYiOkbIx_7CXSOvcUGihJtBLAv7B8YkDOv3Bas/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/AVvXsEhXkJgC2KVPuKYsepdWs5aTx1DTd8AvGAHV7JtGC03BRqUbtzQXG0FMB_2AZn7tbeem4qL8znTbdFL7kUkg2JNmBeCCQw7h93tZ3IS_4w2BfNFTdSUhWYwTFvytjAOxBtJKCczfOlP3Iec/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/AVvXsEggGxWzwt5AfwzsaVkB1AyQWZeRnQxVvjWiqcY6IbaHG6YUATzpNV6WPmiF9I_DZW4ahcfpDdmgKkNMpP9oXEpMAea8qsYd6_EwKvNHFSNqKmVVG0XU2YtDu8Zk4m3wVyl5gtX21bAd8G4/s1600/colorpicker_rgb_r.png);
    top: 52px;
    left: 212px;
}
.colorpicker_rgb_g {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwuTvEYIVdeuwtAPf8gTlcyPSWA-bNzZ3SGd3QlLtvkPQWS2NsChBYzgPd6eAhl21sJZ5LDhyphenhyphenhlyeH8_i3ANrh_DyRGQgLoDJKsjU6bgj4HmT6tFUbJD7B1GKwISHGr4sTP6rKCdNKx1o/s1600/colorpicker_rgb_g.png);
    top: 82px;
    left: 212px;
}
.colorpicker_rgb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtNR_kT_eXXYEago9zbDMJwz2wi5e7FOMK61S87_Y7jq0wdNAHoHFxb5W-yG5MRSCdUf_w60IeJg8BbhEq1SC3OOQ2D6zFCXc5uB2Ftamj88OhfEq0SUUULoPWZmTN8dmxbfhYbonQcOI/s1600/colorpicker_rgb_b.png);
    top: 112px;
    left: 212px;
}
.colorpicker_hsb_h {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYc9sIQ1rP-uiGMZp1fyqLiDsn2RXHEy97khHK3P9k0subgvxURIhNIVYpyu65abyji5DuNl2WWUtOB_cCRE1WdACBixkMaV-iKOrUBmzVGytWVFKr_yHTlqvBSOMUZ7lsiR6BFXa6Ei8/s1600/colorpicker_hsb_h.png);
    top: 52px;
    left: 282px;
}
.colorpicker_hsb_s {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh5NKmKnJEclvCghuEoxFGxUm2brY9yGkdDgT93h1j6IzeB9PSYf7DOIljtUfkc8TKI35mCrVG57Yn8GNUpmI6Ao95y46ym8TxThzWQeigT2Qzom8VI1dXcblKfcvPBN46cb1oeOQRSsA/s1600/colorpicker_hsb_s.png);
    top: 82px;
    left: 282px;
}
.colorpicker_hsb_b {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjUkndGrLQHZVPsC-1UZGR9KpgnOdQAfs2t8sn3uxLVmZcZxXbdQYLRCCK21L5JjBGqi0L23b_BYgg1AvT46PYMvbKLZXcSQv2QU-OzCBar3ksjdZ1cD_-S_E0FR5LjpvB2xU7IN0Xrwg/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/AVvXsEihCNZmGDHxYaLvFF3KhyphenhyphenLfU0qXLLN1XD_QI3HczR-Z4G2rHAl70RYQQX5db8gZaQnMMqJEB4U7_3NBIoQ3j3x_mR0f8t0hdRzkam2PJfEEcf7uq06V9Dlq6XDdZlqzUlYTt2r_7ItYsjM/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 posting, gadget, sesuai keinginan sobat :

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

selesai..........

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Official Blog Of ZAS-XP.com di inbox anda: