jQuery Color Picker: Farbtastic Posted by DSILAS , Monday, June 6, 2011 at 8:16 AM, in Labels: jQuery Color Picker: Farbtastic

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya : 

/* ---------------
jQuery Color Picker: Farbtastic
---------------------------------- */
/**
 * Farbtastic Color Picker 1.2
 * © 2008 Steven Wittens
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 */
.farbtastic {
  position: relative;
}
.farbtastic * {
  position: absolute;
  cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
  width: 195px;
  height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
  top: 47px;
  left: 47px;
  width: 101px;
  height: 101px;
}
.farbtastic .wheel {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDn54_VWH21oGDhZA1hkCodzshsWMrVMAAM3FITk1gt886c6EpipD17l6BGABfJeG-gJ_P6WhFjKi2acuPOTTyWvtq9YjKpMtvyZVRfgpW3F0-bcjDBdt6It85IVv-9sq0Bw-rTpdhMcQ/s1600/wheel.png) no-repeat;
  width: 195px;
  height: 195px;
}
.farbtastic .overlay {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirwSRYxOVJB7Q6dsFpIydXDoKHN24jzVTwShvWFbNDd2iZ4dw6UgvAKgdG6ficyKZNhWibjofTeWfNK_KdNAh67PPy6zZs5mvQKlrGvjJthuX6lmE5Hyg5dIr0v3c1T91-ja2VIKSKCQ0/s1600/mask.png) no-repeat;
}
.farbtastic .marker {
  width: 17px;
  height: 17px;
  margin: -8px 0 0 -8px;
  overflow: hidden;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiarwNsbpF3GvKrRQYYjqw-cJ5bTJgqOSlhoz0R4OBjEeoMI0jYOXwzFW8-9knovSy2Eu4jJ6ozlVDmcAHfpyaKWiBcMwwnEuJVEu3SoXBBQIQBR-eFJ7k0yYSxFW2F9B2-gJ_5KJ6qLM/s1600/marker.png) no-repeat;
}

selanjutnya simpan script berikut tepat 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/farbtastic.js"></script>
 <link rel="stylesheet" href="farbtastic.css" type="text/css" />
 <script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('#demo').hide();
    $('#picker').farbtastic('#color');
  });
 </script>

dan yang terakhir cara pemanggilannya pada Html :

<div id="demo" style="color: red; font-size: 1.4em;">
jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>

<form action="" style="width: 400px;">
<div class="form-item">
<label for="color">Color:</label><input id="color" name="color" type="text" value="#123456" /></div>
<div id="picker">
</div>
</form>

selesai.....