.jpg)
Farbastic Color Picker merupakan satu dari beberapa color picker yang amat populer. Penampilanya yang sangat indah dan menarik, dengan bentuk selector warna sebuah bingkai pelangi berbentuk bulat sungguh menjadikannya terlihat bagai sebuah lingkaran pelangi menyala yang luar biasa cantik. Farbastic Color Picker widget ini didesain oleh Steven Witten dengan mengembangkan kemampunan yang dimiliki jQuery-1.2.6.js. Dari pengalaman selama ini, menentukan kode warna yang akan kita pakai, bila kita hanya melihat tampilan warna dalam bentuk teramat kecil, kadang-kadang apa yang terlihat ternyata tidak sesuai dengan yang kita harapkan. Oleh karena itu melalui posting ini, beberapa kode CSS telah aku modifikasi dengan pertimbangan agar warna terpilih bisa terlihat dengan sempurna dalam ukuran yang lebih luas (lebar). Ada tiga pilihan untuk menampilkan warna output dari Farbastik Color Picker, untuk menggantinya silahkan tinggal lakukan sedikit perubahan pada kode html-nya. Selain itu untuk lebih praktis saat pemasangan javascript di template, JQuery-1.2.6.js dan farbastik-1.1.js juga telah aku gabung dalam bentuk satu paket javascript.
Karena Farbastik ini telah berubah desainnya menjadi lebih besar, untuk menggunakkannya sebaiknya di lakukan melalui penambahan widget footer (ujung terbawah). Apabila sampeyan menggabungkannya dengan spoiler yang sudah kita postingkan juga beberapa waktu yang lalu, maka Farbastik Color Pikcker akan menjadi tersembunyi dalam spoiler. Farbastik hanya akan terlihat saat button "SHOW" di KLIK. Jadilah sebuah widget cantik yang menjadi lebih bertambah luar biasa. Agar lebih mudah dan praktis cara membuatnya dalam bingkai spoiler, maka sekaligus kita akan buat secara lengkap panduan memasangnya.
Javascript - CSS Code : Farbastic Color Picker in the container spoiler
Silahkan download terlebih dahulu melalui link di bawah ini :Javascript dan CSS sudah di upload dan dalam bentuk link. Didalamnya juga terdapat kode CSS spoiler.
Langkah yang harus dilakukan untuk membuat Farbastik Color Picker
- Login to BloGGeR (Login ke BloGGeR) : Gunakan User Name/Nama Pengguna atau Emeil Address. Tuliskan juga Password/Sandi.
- Dasboard (Dasbor) : Setelah login, beberapa saat kemudian kita akan masuk di halaman Dasboard. KLIK link Layout/Tata Letak atau Design/Rancangan.
- Layout/Tata Letak atau Design/Rancangan : KLIK Edit HTML.
- Cari Kode <head> (letaknya di bagian atas). Letakkan link Javascript yang telah di download persis di bawahnya.
Bentuknya jadi seperti ini : - KLIK Simpan Template/SAVE Template.
- Lanjutkan dengan KLIK link Page Elements/Elemen Laman
- Page Elements/Elemen Laman : KLIK Add Gadget/Tambah Gadget. Usahakan di bagian yang cukup lebar (bisa di footer widget - yang paling bawah).
- KLIK HTML/Javascript
- Copy- Paste : Copy kode HTML-1 untuk tanpa spoiler dan HTML-2 bila ingin menggunakan spoiler. Paste-kan ke dalam box penambahan widget yang telah tersedia.
- KLIKSAVE Setting/Simpan.
- Open Blog/Buka Blog dan lihat hasilnya.
<script src='http://stashbox.org/...../bgsGR_FCP.js' type='text/javascript'/>
<head>
Kode HTML-1 Farbastik Color Picker: Tanpa spoiler
<div align="center">
<h2 class="bgsGR_h2FCP" style="font-size:18px;">Farbastic Color Picker</h2>
<div class="clear-block"></div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
jQuery.farbtastic('#picker').linkTo('#color');
});
</script>
<div class="breakout-box">
<form action="">
<div id="picker" style="margin-bottom:0.5em;"></div>
<label for="color" style="font-weight:bold;color:blue;">Color - Warna:</label>
<div class="form-item">
<input class="bgsGR_BoksFCP2" type="text" id="color" name="color" value="#123456" />
</div>
</form>
</div>
</div>
</div></div></div></div>
</center>
Kode HTML-2 Farbastik Color Picker: Dengan wadah spoiler
<center>
<div style="width:420px;"><div class="bgsGR-boksSpoiler" align="center"><div style="margin:5px 10px;">
<span class="bgsGR-Spoiler">Farbastic Color Picker</span><br />
<input style="padding:2px 10px;margin-top:15px;font-weight:bold;font-size:16px;color:#990000; background:#00CCFF;" value="Show" onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].
getElementsByTagName('div')[0].style.display != ''){ this.parentNode.parentNode.getElementsByTagName('div')[1].
getElementsByTagName('div')[0].style.display = '';
this.innerText = ''; this.value = 'Hide';}
else { this.parentNode.parentNode.getElementsByTagName('div')[1].
getElementsByTagName('div')[0].style.display = 'none'; this.innerText = '';
this.value = 'Show';}" type="button" /></div>
<div style="float:left;margin:5px 0;"><div style="display:none;">
<div align="center">
<h2 class="bgsGR_h2FCP" style="font-size:18px;">Farbastic Color Picker</h2>
<div class="clear-block"></div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
jQuery.farbtastic('#picker').linkTo('#color');
});
</script>
<div class="breakout-box">
<form action="">
<div id="picker" style="margin-bottom:0.5em;"></div>
<label for="color" style="font-weight:bold;color:blue;">Color - Warna:</label>
<div class="form-item">
<input class="bgsGR_BoksFCP2" type="text" id="color" name="color" value="#123456" />
</div>
</form>
</div>
</div>
</div></div></div></div>
</center>
Keterangan/Catatan :
- Seluruh javascript dan kode CSS "download" sudah dalam bentuk link, sehingga tinggal di letakkan di bawah kode (tag) <head> .
- Farbastic Color Picker ini dibuat dalam ukuran lebar 400px supaya warna terlihat jelas.
- Kolom/box output warna tersedia dalam 3 macam box dengan 3 ukuran. Untuk merubah ukuran box output warna tinggal ganti kode yang terletak di kode HTML :
<input class="bgsGR_BoksFCP2" ... dst
Coba ganti dengan yang di bawah ini :
1. <input class="bgsGR_BoksFCP1" ... dst, atau
2. <input class="bgsGR_BoksFCP3" ...dst
. - Farbasric Color Picker sangat bermanfaat saat kita membutuhkan kode warna. Selain disimpan di widget blog, sampeyan dapat menyimpannya juga di blog lain yang dibuat untuk keperluan-keperluan khusus (tertentu).
- Link kode CSS dapat disimpan di widget blog bersamaan dg kode HTML-nya atau anda bisa juga menyimpan di atas tag </body> (stl download sampeyan bisa mempelajari secara lebih detail!)
Link kode CSS sbb:
<link href='http://h1.ripway.com/.../.../bgsGR_FCPspoiler.css' media='screen' rel='stylesheet' type='text/css'/>
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
» Happy Blogging - gubhugreyot «
Apa khabare Bos... semoga selalu sehat, aku coba buat konten ini tapi kok gak main ketika untuk memilih warna yang dikehendaki ya...? mohon pencerahannya dari saya di http://s-surya62.blogspot.com/ oh ya saya mengucapkan teria kasih atas ilmu yang telah dicurahkan, saya telah banyak menyedotnya semoga manfaat bagi saya dan yang lainnya, bagi yang akan bergabung di http://faceblog.com/ silahkan kunjungi situsnya untuk mencurahkan isi hati para pebloggers
BalasHapus