Blog Mbahyar

Kembali ke tips dan trik, kali ini akan membahas tentang Mbahyar Jquery Color Picker, yang justru cara membuat widget dengan kode warna JQuery (gaya baru). Sebenarnya setelah saya sudah membuat kode warna widget, sobat bisa melihat posting saya sebelumnya adalah Cara Membuat Kode Warna Dalam Blog Widget. Nah bedanya jika kode warna dengan JQuery Saya rasa ini adalah lebih sederhana dan tidak memakan terlalu banyak ruang, dan pandangan yang lebih ringan, keren dan menarik. Selain itu CSS dan kode JavaScript yang digunakan lebih sederhana. Yang tentunya tidak akan menambah beban loading blog Anda. Penasaran? Untuk menjadi kawan Demo'nya lihat pada gambar di bawah ini:

Kode Warna Demo Dengan Jquery

Langkah-langkah berikut membuat widget dengan kode warna Jquery:

1. Login ke blogger sobat

2. Masuk ke design / desain

3. Pilih Tata Letak

4. Edit HTML

5. Kemudian melihat kode berkut: ]]></b:skin> (gunakan Ctrl + F pada keyboard Anda sob), setelah tinggal bertemu menempatkan kode CSS berikut tepat di atas kode ]]></b:skin>

/* jQuery Color Picker: Farbtastic */
.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(http://i865.photobucket.com/albums/ab218/1rd3/wheel-kode-blogger.png) no-repeat;
width: 195px;
height: 195px;
}
.farbtastic .overlay {
background: url(http://i865.photobucket.com/albums/ab218/1rd3/mask-kode-blogger.png) no-repeat;
}
.farbtastic .marker {
width: 17px;
height: 17px;
margin: -8px 0 0 -8px;
overflow: hidden;
background: url(http://i865.photobucket.com/albums/ab218/1rd3/marker-kode-blogger.png) no-repeat;
}

6. Lalu masukkan kode script berikut di atas </ head>

<script src='http://k-blogger.googlecode.com/files/jquery_color_picker.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/farbtastic.js' type='text/javascript'/>
<link href='farbtastic.css' rel='stylesheet' type='text/css'/>
<script charset='utf-8' type='text/javascript'>
$(document).ready(function() {
$(&#39;#demo&#39;).hide();
$(&#39;#picker&#39;).farbtastic(&#39;#color&#39;);
});

</script>

7. Jauhkan pertama. Dan lebih lanjut untuk menampilkan alat kode warna, sobat bisa menempatkan kode berikut dalam posting blog atau widget.

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

8. Simpan dan lihat hasilnya.

Keterangan:

Silakan mengedit CSSnya bagian, untuk menyesuaikan tinggi dan lebar template blog Anda. Kode Widget Dengan Jquery Warna (New Style) dapat dimasukkan ke dalam pos dan teman saya di widget blog. Good luck,