Demonya bisa dilihat disini
cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html
3. Cari kode ]]></b:skin>
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/AVvXsEj4IE7N39Ky_g_Qy0ckOzDIIocWbQce6RtG6cCpQi5k9n4YEmnhmyokST-nQZrgRucTtaEkEQBLJxs0mNP6_TplcfQGo_Iq5A1IdwziXWiV_9p7VJ4qD46jlRrdmYoh2LkGD2_G3A5fBn4/s1600/select2.png);
}
#colorSelector div {
position: absolute;
top: 3px;
left: 3px;
width: 30px;
height: 30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4IE7N39Ky_g_Qy0ckOzDIIocWbQce6RtG6cCpQi5k9n4YEmnhmyokST-nQZrgRucTtaEkEQBLJxs0mNP6_TplcfQGo_Iq5A1IdwziXWiV_9p7VJ4qD46jlRrdmYoh2LkGD2_G3A5fBn4/s1600/select2.png) center;
}
#colorSelector2 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4IE7N39Ky_g_Qy0ckOzDIIocWbQce6RtG6cCpQi5k9n4YEmnhmyokST-nQZrgRucTtaEkEQBLJxs0mNP6_TplcfQGo_Iq5A1IdwziXWiV_9p7VJ4qD46jlRrdmYoh2LkGD2_G3A5fBn4/s1600/select2.png);
}
#colorSelector2 div {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4IE7N39Ky_g_Qy0ckOzDIIocWbQce6RtG6cCpQi5k9n4YEmnhmyokST-nQZrgRucTtaEkEQBLJxs0mNP6_TplcfQGo_Iq5A1IdwziXWiV_9p7VJ4qD46jlRrdmYoh2LkGD2_G3A5fBn4/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/AVvXsEiKZECUDwyft5HsV1G6TvBokF8Milgx1MDK5iZfU-azPW5UUoNjxRFIZ3y4dxrzCypucp1HsyhB4k0McYyxqL3NST4qipwkC9jasQ6XBI7yOTa7IGr7kFwxGZB4CySr5cuq7u76i6qyqjc/s1600/custom_background.png);
position: absolute;
bottom: 0;
left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZWPB1y8OLho3HlBkwHrrdcI9NsQSE8zVRfvqQ-Bkwfv-p5zP2qggI811WDF7htgiIxo9-PPZr71Fwzsg6BYlSoqo1EhOjNTscEKSXw07qA7PIMS1V44ArG90Ickc7lhdr76-s8OCHXzM/s1600/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsCWp42yG5tYFdeXlBr6ZXXjWCopJzC9zt56VJIwO6SnZnuSXvNEkgvL3E3fTmLJQl3mgj3pkixhV7SCiEyqqtPBryZ2VL3vIDwBoQKcTQ8AmW00QIsENFbSYyWc0aWp8vTjOMLy398iU/s1600/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwu1hk4_DEZIsSmIuAgltIfGMUV8NrI9DCMcNuomR_cYAOAGXAtS_Lv6PmA247-GGU7NWZrKqrqwhmMhnkT9yYFaC1olmU3-q2a8nKpGjWtISbnCPVYR5KWjnPkrIPMXWfFeY3fp0tkXk/s1600/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-TEsdun1Oq0k-BMDxoxCBTScheckKON-AxFyEPiBnwcAyJvGmtn4xf71wSP6jcGTeKnyYRYxRRhVQJ5pycekcHY59_7WE5Ww7i_UPMWT88EX_RfcWqRpo45ooc25SdZtj9JNoGwp0GkA/s1600/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgufX4MqUyQ-t0jAxiHL_UjicmFGlfeq9zm0_h-Tojd5MbEznLkPIDu4nnrWWSiMoWjLtAF1MiZyqgGGnYd_Tnu4YidcGkzFaPJJ1iB8gSlyWG26OFkGCO6ESIIkvJX5zpmwWcrHjSYrUI/s1600/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLhvE-_5a0AD7FW5nwFYNNxWo6bsijKKwKYyj-RAahN7opqRdTS27ASlCxkYqejRUCrZDBMp0hTcdgqcDnj1mwY020eqFQee-rqdk7qsxliMELB8ifbFzCIfindPLCfvrxXYiHm-4Fsss/s1600/custom_hsb_s.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6vLFLIvxpooJtuZTVKPgManoOAFwjbBa_xYjiCU0RnbqBo_tijHJFl7mdQR5cvKQByOmnLp6ODeRTpkTzAjCupWI4m_tCrjfo4XUUM1nEl_0sc4Pxh7eaLexeQTTKJKA9zH_8LzeF1-U/s1600/custom_hsb_h.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAu3gguIUZknmqH53iWryh8-RZZ-ONj20GvgWWfhee0YHoo3XLsQn4sbuFaoZ9ewzIQIvqOUSjhydTPJS0ngr8DDq66Av-mf35S5LysVcNwYYOUi8pstsVYudTI2nVlHPehdZQOKUMPoc/s1600/custom_hsb_b.png);
display: none;
}
#colorpickerHolder2 .colorpicker_submit {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEqsekq0cWBdt9LOZATsFVVOjJc4FEi07Kx0f0IkV_a4y3oXgMvoFL8B3In_7ZqxaDWK11s7te7OlQGdV-Vkm7jUHM6qBV_2Jfw56U2bzTJ9X26LXkamRbuhZuc5RbGjGCY4orlfXkzc4/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/AVvXsEibYzyttjf6qWy8aXTVITQGKk5bcETsC1S9L-mrbfjD24o1o0kypdtpWep7iMdLoHy4wbBJILrZwbeUX7ErITwTUt8aBGZ0PXKsdKg-_e2sbMIaiRAUkYaJnGfdZVV5QR1VSui3cpUKFrE/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/AVvXsEhN4pA4aU18Yw2cX0mIqYVyQoepb1iE0iw78cQF99f3tDP391UXEltgJ-h8x4svRFBBAEBtYzdtbVpY_Jw2w_uNBtdqwEKwjz9kpjBkJvtwfvq6k04oM4Qf_K2jF4PwR6Va1vcbd14yvzA/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/AVvXsEjbaBpz3ugdgNJ5C5yHZDoSDyYBiiVb9bhDSBKBZwp1EPnYV0lllE67KgRVyCwiGDIAL8AwB4-3WLUpR7-Bvrz6lLtZ9d5PRaexMSOe0uj9NDQ866UCMP7GzvwbvgTyQ0Gt_TKw55SLr0o/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/AVvXsEj1xGMSknz-J1B2NN9rjCShhB5_X71D3NR8gNqRWPNel9SoTz42CM3yN7RSNSvof1hWaVxuSXzqGGQrH02-bAyB_K3Ip4qeDMSEru320xsqx_pE32iynF3G5xXYdx098exMelWnJuMb4Xg/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/AVvXsEhr3XywkCtb0yEDHSAa55MIEe4TWPxh4_INbDxJkhCpht8RVpgUKrQ1CpHeIcciQz7WlJfrYY4W5bU-gB4294bGLxlKkqXhQ0V8g0P_jTtVP0sAC8OU2D9SUSp1ZdTQuAkt6cMXFoQrbwI/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/AVvXsEh4-mdyd8AHhpzkZvqHkFWnGtRyMSUPkZb_HYnMFgMZ5I6EEM7l93ShGSpTPaG0oAIQBPlo4ZgTy4HH-RW4pNnQZQf-u3IV2xVF7zJKml7SlZ-LMj44OS6hiyp_7lzDF4yhnksYVqstO6I/s1600/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCRZQVtHWVvSYvqB7Ffm1OTqdZ8KUhfScxEpaSuXWJCMBpgPgJhqlksuJjDoHaTZZ3XZWKPMs7kjCfYRoB0diag7T57BBgYqH566CYDA0JUw2caY2-hrovEFPqrqud4nulzgCAcjiowgc/s1600/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlVJ2vfInjDQs2XRHHDzH4Wvu1dZyIsXhCHjKJOBPqo0VikPK0ppa5TWU2zpV_ZMLOviOG_5LjypYK_b6AKsjHqldgLr9Ff4mBM5AOJhTA0LFgjy-kg32VSVVRv1TxpWpz3BIiKZAlCCE/s1600/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicTbCLC8GCt7DMkYyNpfG4r8RBqFLZMidZT1SHxq7SHEKX8e30g_SRJgGIDT0Ooh2ErYnTA_ljMveTj0uBwwDULInXPd1db9zuoEy4CuVxk1PrxRK2-Denv465i-2FMxMWC2zwbMWXMNg/s1600/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPnDyQMhd2T0QcjQ-sGKgSI5vg5olsJlbLlwCvCikA_zahCu-UdUrionN9EZAZFelS5o337XBOe8s3bkbVVQmhV5AfXR1c9989Rt6wzUJGV-Yn8GXUi49eGiepe6-3ATIVky_m6we7s8U/s1600/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAq2cFk79I0RBTDJ8zqbl4bLHW5jWI34sggnVpzgqDEWtVvpVj9ImAbo6cuo9J6aJGaStchsQXOf7Yn7OrkAw4TDo6NycPspgHfPghqvnbCpqD1PhTLpt4GveQwUdn5fdlOryfL-ka_Uc/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/AVvXsEi3l14TBUe8rtFxffzvMG-Hr2B2J_nRpn_F6LaBU-9jpTii5xtkOAQRGb4jktXt5FPE4hqzsy9TlDDBdSR5eYLN-jVES8TRY-kjHbuRrKLuyuS502UfDAHVdQQfoICl7IDPjWSpf7EDaGk/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..........
Posting Komentar