Rabu, 19 Juni 2013

Styler jQuery for Edit Internal CSS Coded Blogger

Master Zhinto ngeributin masalah jQuery plugin, itu mah bukan plug-in tapi kode biasa... Orang mah tidak ngerti script, ya gue bilang saja yang begitu itu plugins versi teranyar =)) Berbicara tentang jQuery plug-ins, Koben punya satu yg nyeleneh tetapi bisa dikatakan memiliki multifungsi :-B Masih ingat dengan fitur firebug is bugzilla! Secara global browser fasilitas untuk edit kode/script dapat menggunakan inspect element panel. Gue akan berbagi trick form action snippet jQuery (takut dimarahin sama Zhinto mau ngeutik plugin)
Aku beri judul begini saja styler jQuery for edit internal coded blogger b-)

Tools ini sangat erat kaitannya dengan firebug or inspect element feature! Fungsinya adalah mengedit kode CSS dan perubahan yg terjadi bisa langsung kita lihat seketika @-) Pasti sudah pada penasaran tuh seperti apakah gerangan ;)) Try it


Itu sepenggal contoh dimana Koben melebarkan kolom and mengganti warna latar belakang postingan, menghilangkan sisi kanan blog serta mengganti warna & teks dekorasi pada link. Kalian bisa bermain properti CSS sesuka hati tanpa perlu khawatir tampilan template menjadi acak kadut! Dengan tool beginian kita bisa mengedit nominal CSS apapun asalkan benar pemanggilan class or ID (. / #) CSS yg di maksud!
Bila memakai atribut input, tampilan CSS tidak terlihat secara gamblang. Oleh karena itu ada baiknya digantikan dengan atribut textarea ;) Maka menjadi bekieu coy...

<form id="styler">
<h3>Live Edit CSS Here!</h3>
<textarea id="text-area">body { background-color: #fff; color: #111; color: red; text-decoration: line-through; }</textarea><br/>
<input type="submit"/>
</form>
<style>
#text-area {
color: #eee;
width: 31em;
height: 121px;
white-space: pre-wrap;
font-family: Courier New;
background-color: #3e3e3e;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script>//<![CDATA[
$(function (){
var $style;
$('#styler').submit(function (e) {
e.preventDefault();
var css = $('#text-area', this).val();
if (!$style) {
$style = $('<style />');
$('body').append($style);
}
$style.html(css);
});
});
//]]></script>
Tinggal urusan kreatifitas mau diapakan entuh script :d Taruh gadget HTML/Javascript silahkan, taruh dipostingan monggo, terserah 8-|
Resource by: jsdo.it/fnobi/k2dE
Happy jQuery \m/

Tidak ada komentar:

Posting Komentar