jQuery Color Picker: Farbtastic

liat demo disini
# Login blogger
# Rancangan, Edit Html, Cari kode ]]></b:skin>

Dan Simpan kode berikut diatasnya :

/* ---------------
jQuery Color Picker: Farbtastic
---------------------------------- */
/**
* Farbtastic Color Picker 1.2

*/
.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/AVvXsEhTDvcucHmaKZMh-3MNQ7f0WY1WL-TdHDhD_DtztHV_1GDFVHcDQW4lXquu86uQIQcAoOIeMNX1x7bti1ylVUlLoOoC1pUsh2LRccQ74BFxzjGcduZdz3rWf0bu59TsSxRh83-3Tt-4HIc/s1600/wheel.png) no-repeat;
width: 195px;
height: 195px;
}
.farbtastic .overlay {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1OmVIR_Ku11pUzZclRw8SzkyNBmb9ml2Y52ShLlW1NQDeA5OUvvuEs8x_Iano7vu38PgxFw4axYL3wqUaMj2_Vc4-4r63rGMMv2tLibwwRMogWJAri6utkGh4v98PFiUaq1P1hUkVyWc/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/AVvXsEirasIwyxuD19W2cROJ41Ocmd_754OWGzBe-PFcFXqOYujrNqnNX2XWIyD1oH7AaGgCwIQzUhXZ3y1sqp9Qnwf2V-_4-1BRq1INz9zp4FHA6acjlmlzfZrLDMHOF9dFNXGyIAWU4st0MNE/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://japarus.xtgem.com/warnagenerator.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 :

bisa di widget html javascrip, bisa di postingan

<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