Home » » Jquery Color Picker

Jquery Color Picker


Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. 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(http://2.bp.blogspot.com/-90-Wqb5DlbI/TZUDJFfDaRI/AAAAAAAAAlI/S80IVG2lVbY/s1600/select2.png);
}
#colorSelector div {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    background: url(http://2.bp.blogspot.com/-90-Wqb5DlbI/TZUDJFfDaRI/AAAAAAAAAlI/S80IVG2lVbY/s1600/select2.png) center;
}
#colorSelector2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    background: url(http://2.bp.blogspot.com/-90-Wqb5DlbI/TZUDJFfDaRI/AAAAAAAAAlI/S80IVG2lVbY/s1600/select2.png);
}
#colorSelector2 div {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    background: url(http://2.bp.blogspot.com/-90-Wqb5DlbI/TZUDJFfDaRI/AAAAAAAAAlI/S80IVG2lVbY/s1600/select2.png) center;
}
#colorpickerHolder2 {
    top: 32px;
    left: 0;
    width: 356px;
    height: 0;
    overflow: hidden;
    position: absolute;
}
#colorpickerHolder2 .colorpicker {
    background-image: url(http://1.bp.blogspot.com/-1ZXMJahlTg0/TZUC30oEfwI/AAAAAAAAAkc/ctPcRR2Y2pM/s1600/custom_background.png);
    position: absolute;
    bottom: 0;
    left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
    background-image: url(http://2.bp.blogspot.com/-HX26EcTdR9A/TZUC-rTZfwI/AAAAAAAAAkw/G7x5cVtGcbY/s1600/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
    background-image: url(http://2.bp.blogspot.com/-sUpo_YeGUX0/TZUC5GjmydI/AAAAAAAAAkg/1svs4LRRXMQ/s1600/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
    background-image: url(http://1.bp.blogspot.com/-aDarPdovp1k/TZUDExpsiMI/AAAAAAAAAk8/pvS08DTcq1U/s1600/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
    background-image: url(http://1.bp.blogspot.com/-2kBz1yAo9u0/TZUDCkV6GzI/AAAAAAAAAk4/3clb6u2PnNk/s1600/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
    background-image: url(http://1.bp.blogspot.com/-bMxzEE_ymto/TZUDAcjVquI/AAAAAAAAAk0/1G2xwNYaOCs/s1600/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
    background-image: url(http://1.bp.blogspot.com/-KLctZy7L2cs/TZUC8zjTcuI/AAAAAAAAAks/AI-BSoc0lF8/s1600/custom_hsb_s.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
    background-image: url(http://1.bp.blogspot.com/-qJXM-QyMJX4/TZUC7mAe1tI/AAAAAAAAAko/IyU094XwEgE/s1600/custom_hsb_h.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
    background-image: url(http://1.bp.blogspot.com/-ATU4gcBe-RY/TZUC6AYyj-I/AAAAAAAAAkk/0bEE019Obm0/s1600/custom_hsb_b.png);
    display: none;
}
#colorpickerHolder2 .colorpicker_submit {
    background-image: url(http://2.bp.blogspot.com/-_J4mTWOsy9c/TZUDGBup95I/AAAAAAAAAlA/8GH5mpAxU5Q/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(http://4.bp.blogspot.com/-aIJo3WtqKzM/TZUCjFIFoxI/AAAAAAAAAjs/HA5v4Ux4VrU/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(http://3.bp.blogspot.com/-o44rK663NZQ/TZUCuuGLWMI/AAAAAAAAAkE/7eBHmF8EP6M/s1600/colorpicker_overlay.png);
}
.colorpicker_color div div {
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    overflow: hidden;
    background: url(http://4.bp.blogspot.com/-BZk6EYqiI0E/TZUC1EE1ZqI/AAAAAAAAAkU/-QcHocK8feI/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(http://4.bp.blogspot.com/-Vh8YTb5cgH0/TZUCs-1NevI/AAAAAAAAAkA/2mz-Q3Uyee0/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(http://4.bp.blogspot.com/-sqMT94pyWvQ/TZUClDsGJRI/AAAAAAAAAjw/mlKXDs48jkc/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(http://2.bp.blogspot.com/-zj0gejGYe2c/TZUCzXhWYvI/AAAAAAAAAkQ/e6rp6UoeFbc/s1600/colorpicker_rgb_r.png);
    top: 52px;
    left: 212px;
}
.colorpicker_rgb_g {
    background-image: url(http://1.bp.blogspot.com/-jX8gWnmqnHM/TZUCxrIcuqI/AAAAAAAAAkM/ruA58kXrSgc/s1600/colorpicker_rgb_g.png);
    top: 82px;
    left: 212px;
}
.colorpicker_rgb_b {
    background-image: url(http://4.bp.blogspot.com/-yRgAfSY9_F4/TZUCwMI_KJI/AAAAAAAAAkI/5XSgEDQ4gNM/s1600/colorpicker_rgb_b.png);
    top: 112px;
    left: 212px;
}
.colorpicker_hsb_h {
    background-image: url(http://4.bp.blogspot.com/-i8cr526eo1o/TZUCpgWrbTI/AAAAAAAAAj4/S-prIkn528A/s1600/colorpicker_hsb_h.png);
    top: 52px;
    left: 282px;
}
.colorpicker_hsb_s {
    background-image: url(http://3.bp.blogspot.com/-VQqpEWZQdDc/TZUCr9Z0hkI/AAAAAAAAAj8/BzC7JSWXCSE/s1600/colorpicker_hsb_s.png);
    top: 82px;
    left: 282px;
}
.colorpicker_hsb_b {
    background-image: url(http://4.bp.blogspot.com/-H0n6EAIF9YA/TZUCnJIO9zI/AAAAAAAAAj0/9NKylAcgoX4/s1600/colorpicker_hsb_b.png);
    top: 112px;
    left: 282px;
}
.colorpicker_submit {
    position: absolute;
    width: 22px;
    height: 22px;
    background: url(http://3.bp.blogspot.com/-PDymtGdZ1Z0/TZUC2pUM0bI/AAAAAAAAAkY/Qzr4VNbT7y4/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;
}

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

9. Terakhir cara pemanggilannya pada html atau posting, gadget, sesuai keinginan 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>

10. Save
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .