Form Action Textarea Popup for Playing HTML Code

Apa kabar bloglangnisme, semoga baik² saja ya semua :) Koben si bloglang anu ganteng kalem tea akan berbagi trick hasil dari melihat-lihat blog salah satu sobat kita yakni master Roxx Share ;) Walau rada sedikit empot-empotan untuk membuka blognya secara full #:-S tapi tak apalah :D Kinerja dari trik yg aka gue beberkan sekarang mungkin mirip dengan HTML editor! Intinya melihat hasil dari kita bermain-main dengan kode HTML. Ingat ya, form action textarea ini hanya mendukung HTML CSS saja!!!
Cara bermain textarea form action, kita memakai trick penulisan CSS bergaya Internal Style Sheet, diikuti dengan markup HTMLnya ;) Sebenarnya trik penulisan css bergaya internal style sheet bisa langsung diterapkan ketika kita melakukan postingan. Biar beda, unik and full stylish dong dari kebanyakan :)) b-)

Struktur penulisan internal style sheet...<style>...YOUR CSS CODED VARIABLE PUT HERE...</style>Berikut rumus default form action textarea for HTML CSS.

<script type="text/javascript">
function displayHTML(form) {
  var inf = form.htmlArea.value;
  win = window.open(", ", 'popup', 'toolbar = no, status = no');
  win.document.write("" + inf + "");
}
</script>  

<center>
<form>
<textarea cols="15" name="htmlArea" rows="5"></textarea>
<br />
<input onclick="displayHTML(this.form)" type="button" value="Lihat Hasil!" id="tombol"/>
</form>
</center>

Dengan memasukan ramuan tersebut Add a Gadget ► HTML/Javascript sobat sudah mempunyai tools tersebut :D Bisa langusng bermain-main dengan kode CSS kalian. Tapi bagaimana halnya rumusan itu dapat beroperasi dalam postingan, guna memberi demo-demo CSS karya kalian! Nanti hasil dari customize yg tampak pada sesi postingan akan berupa tombol saja.

Masukan JavaScript diatas tag </body> (recommendate) bisa juga diatas tag </head>

<script type="text/javascript">
//<![CDATA[
function displayHTML(form) {
  var inf = form.htmlArea.value;
  win = window.open(", ", 'popup', 'toolbar = no, status = no');
  win.document.write("" + inf + "");
}
//]]>
</script>

Sisipkan sedikit kode CSS di atas tag ]]></b:skin>.area_result {
width: 0px;
height: 0px;
display: none;
}Markup HTML, pemanggilan di sesi postingan.<center>
<form>
<textarea name="htmlArea" class="area_result">

YOUR CSS CONTENT ADD HERE

</textarea>
<input onclick="displayHTML(this.form)" type="button" value="DEMO!" id="tombol"/>
</form>
</center>YOUR CSS CONTENT ADD HERE tidak usah di phrase/convert, nanti tidak jalan atuh ;)) Untuk membuat rapat & padat kode CSS saat mau diletakkan di postingan, kalian dapat menggunakan tools online HTML Compressor. Pilih opsi blogger, kemudian setting seperlunya.
Sebenarnya script jg mendukung form action textarea ini, tapi suka ada errornya sob :D Kalau script online bisa berjalan mulus, tapi kalau script manual ada bugs :-s Good luck :)
Happy blogging \m/