- Cara membuatnya :
- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- 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/AVvXsEjbW8p-wWsBpEekyki5AYXSzAmzS4_Zdh18Ok_Ght3QuH7Qtspf7zIx60K7g8WglAjsgaYH7JlAVI75XduR2eiTpfZoNml1ANGxkCPIFuH-YPcZBZvb6MbmAogfOTJ0fH3JRWBON6a34GE/s1600/wheel.png) no-repeat;
width: 195px;
height: 195px;
}
.farbtastic .overlay {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiepd44ZCrR-_gBxtVubPd-RdYIFHswU5GlwGKJyOWIqg75W6GA6N1hdQd04sWy8whBCN3Vm6N_YuA2FlkWYtdlYPteXrzatn02fpomGR33m6YhIuERbr3ZXWpPVLm_I3YvDR1dhyphenhyphenL8Shk/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/AVvXsEi_mkZKx1KUgYkdMvtKliEJtFNd8kIS-sV4XCoSCMCexRrsnFk9EoJ_rzyjgGQwkCFjbvIFao8S_PVhlMnbGAShyVWTba2SJkrIIpmgNSSpjG0UdKHofdBU4569CRlC-lSHzNzRhHVOwNc/s1600/marker.png) no-repeat;
}
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/AVvXsEjbW8p-wWsBpEekyki5AYXSzAmzS4_Zdh18Ok_Ght3QuH7Qtspf7zIx60K7g8WglAjsgaYH7JlAVI75XduR2eiTpfZoNml1ANGxkCPIFuH-YPcZBZvb6MbmAogfOTJ0fH3JRWBON6a34GE/s1600/wheel.png) no-repeat;
width: 195px;
height: 195px;
}
.farbtastic .overlay {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiepd44ZCrR-_gBxtVubPd-RdYIFHswU5GlwGKJyOWIqg75W6GA6N1hdQd04sWy8whBCN3Vm6N_YuA2FlkWYtdlYPteXrzatn02fpomGR33m6YhIuERbr3ZXWpPVLm_I3YvDR1dhyphenhyphenL8Shk/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/AVvXsEi_mkZKx1KUgYkdMvtKliEJtFNd8kIS-sV4XCoSCMCexRrsnFk9EoJ_rzyjgGQwkCFjbvIFao8S_PVhlMnbGAShyVWTba2SJkrIIpmgNSSpjG0UdKHofdBU4569CRlC-lSHzNzRhHVOwNc/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>
<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 :
selesai.....
Posting Komentar