kiriman islami: Jquery Color picker

Cara membuat :

1. Seperti biasa login Blogger terlebih dahulu pergi ke menu rancangan, lalu pilih edit html,
2. Cari kode ]]></b:skin>
3. Masukkan kode dibawah ini tepat di atas kode ]]></b:skin>

/*----------------
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/AVvXsEhPFDe5O0YvtHHdpQdOPIF4M8mUvQ5kCWniq41aG5ao-0rn4lLk0c5AOrc0WCG4yvJUUBFsOTqeyRDvTSDI3Rrl8sFzh_wOKuEQKS_sgezaX4KjgAiwKuA-rKbnnmAG28fwB4AopXm3cNw/s1600/select2.png);
}
#colorSelector div {
position: absolute;
top: 3px;
left: 3px;
width: 30px;
height: 30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPFDe5O0YvtHHdpQdOPIF4M8mUvQ5kCWniq41aG5ao-0rn4lLk0c5AOrc0WCG4yvJUUBFsOTqeyRDvTSDI3Rrl8sFzh_wOKuEQKS_sgezaX4KjgAiwKuA-rKbnnmAG28fwB4AopXm3cNw/s1600/select2.png) center;
}
#colorSelector2 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPFDe5O0YvtHHdpQdOPIF4M8mUvQ5kCWniq41aG5ao-0rn4lLk0c5AOrc0WCG4yvJUUBFsOTqeyRDvTSDI3Rrl8sFzh_wOKuEQKS_sgezaX4KjgAiwKuA-rKbnnmAG28fwB4AopXm3cNw/s1600/select2.png);
}
#colorSelector2 div {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPFDe5O0YvtHHdpQdOPIF4M8mUvQ5kCWniq41aG5ao-0rn4lLk0c5AOrc0WCG4yvJUUBFsOTqeyRDvTSDI3Rrl8sFzh_wOKuEQKS_sgezaX4KjgAiwKuA-rKbnnmAG28fwB4AopXm3cNw/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/AVvXsEjY7GWzBFS-o0rFwHAdiYva_zDXeEQ2P-fzVCRTc-HH6Y42hJWFlskpBeVig4Z0z4NGs9yEjIHNi3zwRQghrqywfO-jozVvbCh3azkvat4ryVpbHp9Lu8SG2UjKfKTn9HYBmxzLlOAaCUQ/s1600/custom_background.png);
position: absolute;
bottom: 0;
left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAHQ3jcmZWSghr_Z6Vk50Pqh4fsgn0MT4NrZH7IYYoyn7awtyvPRIfZFB9N7O2s1I3levlrQIcZGF0_FtPmw2SR04wBNfGKzfgVk5O8H9Okdx5I1rwztAgf0gsfE375oNVz8IOFnJ2xoU/s1600/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHG4Hl-moDYSdJEoRFkRoXYK6N90J5Lt2mnvc6YDAmxBYCXm8G4j2Dh285sPxOa7-oWBOXmV-W4Ao6rtrP3scgEQwbrn_5WoZbU6OJfEhCo8Ojfu2zskem5yw2K3uLWdk5w4VB__z5ywo/s1600/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzcPOkHBrnah4Xj2JZiz6k69Er8eX5RxtavAYBhLo4IhEqVuYQbQ2Rz1fjTSS9yC5rkWNHfT5fzX0XxZXrlQ11cjPIPADfV3MEQ4o7yczUtjDl2ABab9MDEIhBSgwiwtrQcEE0nfj8Myo/s1600/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtpzKHEnGogzMIFdVaGNdK0DoAtteg5I7jxi6xNYd-YmS_0KeK0XTSJ-_YKuMiva1aRR49JoCz9hRQrLPHXRj9xvXWQx9c3fDhF4tMOMxk1WxkgCmY1ISYV1YmZPgHy2z5ayZ5BcWRDBI/s1600/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE5SNkM26W3r3y7A-Hy8iQq4e07kxrHOCiEIkBlSX7jnJfELp4UnilqN7Fa6JozB77c5nGivLsBkB8mNPT0fXEGD1VUT7GIJ9u1aZcLMpXbJR5dR6mpRazrFb3wP_QlI5y_LZOLI4C0Nk/s1600/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsLaX6Yg6Uw9JCIECFxBA6SAZbTRbuuyapt8VPcg91d0kNtIqAm_9riuk7pY2A0ahjKqi0trm7e-tVjSZZJtr1XIWRcopB5oTvDyH5Vzyss94nXrJZVpPM7TugHovC4vMZY2Zl9FMye2A/s1600/custom_hsb_s.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjEJGA93HE1VeBa-lqOdWsRXueBNNLubXE_85t0_J8MpkCCbK85yAUSQ6E-faL8pofgRZceyEOa5k2xtTYHJ2k2XQM0XfxUn3gZaDizCPDY6NWOVOkvd99QzQB2Sm2Jl5pvRgion9e1-4/s1600/custom_hsb_h.png);
display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUu2JkIghzMdS0DxPlECrrEkODWT3DwHoJhm5KkyC2rDe-mqYFyN2Q0fGkqRR3GoHOJhbsCCOHFXB0nle_GqKLWbrroEnBvTv1frBjGnNhQJnE0EnlI6C1bDi9_CCdiVURpuDojlvEFDo/s1600/custom_hsb_b.png);
display: none;
}
#colorpickerHolder2 .colorpicker_submit {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKMRwGj7zRLAy5SGoIiIMMTYXEDpXke090x6EiPEUbAgIs4R9C4DbT9afjjh3xU9nHgO-Nmup_kpkgjKkQ_nXiy37Po5m7JdRDVGi_vQy2DtOpOPf38fDusTmyJ6v1leD6X0zWfexHPBI/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/AVvXsEivCo-WoabOnOGskEoEnH1oy6MLSmLkb6HTr4-Max0NnD6MJPMnlDk63dOOEuGbBE0YJEH1MkAG8h1AEjb_UqqwnwPx09Wx2EwWPE8PfW1B1H__FmXoQCq2exCtUIckPRPjg7lZ8EFohXs/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/AVvXsEhFa5xgKJ4BtBX_yDawWtovR1zQeZVQqXh_FRQ-jxoQ2APBW_NGErKWeRIb9vDoaclKMhd5tYXqtf91vUrhyphenhyphenaGpqtrIBoJSRzuJcDHKbTQowZ0e-F4rWiFQj542EGg11u5nyorXGXmXzKE/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/AVvXsEgInnVVfLodMSYkH6R2M1XaKM4IL6gikioX_G7ZTe1TwYLxvjvk32SHXURMz-ewcfjQrioq2-hPO6zfk5J_oqxB71Ki7kcEhF0tzlsPoO9gRneRVRGC-NQBEOnXzuAkQrZBe6peItPweio/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/AVvXsEggYQSq_txUSTXfxFqA_JC6h7J2Ngtad6Ub93kYTvIrKHG2IU7MyePwCdGeu3ZDMOkj0hv2P41WDTntqJO-0YVttLKElj1CyBuBLZNZ-ZLEz-IJNcsxw1jAkyJ7yFZ9-QusCLuji5MMLZ4/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/AVvXsEgWGSU2_q9ZLWO-oWjU5-3U94p0IB6juSRLzhzWe37RQIf7zZ75Zf4VHnSoG1Eg2abaASj_cE-Dh7GRVdsyR7y06LnIhNFDtcoFI5egMFSc0m9xbIitzypJyGVoBv2G4435OlUB-AtX3bg/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/AVvXsEj_x24TgckQU4pnfhgma8c2e6mYviQiokGn6snRodgNOCz3sTtbKxz9yo4Qg0ywVe1XnIaKAIyvLRQCvRPWEeVvpKc-WSa6yy1HGeEJ_h_mc-IILN0dlgsr5eZD_6-w6SWqg-6MbvCEQCU/s1600/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglAfGK9FdCHEEQNfX3dDX9FThrhfpiv54zDvJkhmU9W9dWhYkkITWAG7edbWvUZsHiju3MFXDccOD8AnlCxyfwOXOF2DACGJ5JWudLh9uTuWxs4ulXcdDYsxlcP3LM6dJxJ1MqMCFEvGY/s1600/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCxwpLOiaJTyR2ZPAQwkhdWklet2gporqKyYx06mCLxiMScxoeamK1iO3CMbN2CdMpEWKDDAr5FFJGqHHjkDVzHWN1P4iAhw1eFKcBg3i_LW21FzVnb7WEJIxGLCRjHNbukx6Ld6AVIw8/s1600/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1HxvbZYE2B1AA_HoAT3v3Tuy1sFlHj-4ubetggVh2EZWLNTBKLsFydi5QT8ReozEWP6Ff8JTc3cOoV1dTcUvMMOimzcEatldmaWh8qhtWedU466Zxi9lPkxxJa8Mk54dcXxswZvhk6yA/s1600/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ7NCfXJHoDTX6RnNIdUtNkJRBoMYLyIhB2JErmY2ERukzh-7JXGyqpVrnzkRlcRFM1EZq7NuJip9Nskx-egkCWoMr8dhRWgeuLfVF-YBSWxAmUdnFosH_2CDzEq68owR1nV02Zrdlzkw/s1600/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy5bKHPAfBeWFw9P0tfssjWlT5gfBN8tiJXiBMu4QtC2zFit7vuJqK8uC00tP4mczHn0qJyebnQvXKIFrzvqs4Gc_TD9NdOajWhib5nO3cASfutAwnz5PvcckWmZozzZ-FLfB7dkztyS8/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/AVvXsEhF54lB5gUkB42jDUWSgpCOkDB6VRMRtQVFor8pwniHwllaK63x_frjMVFcUho0OHe0bHC9dBR-dHj9yF62eooCyJmwC3A8_mG2Pww-q64-ut-q2Ft3aYfiyF8__1IPLqO9djQMGy2xlec/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;

}

4.Selanjutnya simpan kode dibawah ini tepat di atas 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>

5. Terakhir pilih edit laman lalu pilih add gadget , pilih Html,JavaSricpt, masukkan kode dibawah ini :

kiriman islami

Sunday, 27 November 2011

Jquery Color picker

No comments:

Post a Comment