CSS Preview in Post Area for Blogger

Apakah sobat masih ingat dengan artikelku yang berjudul form action textarea popup for playing html code. Trik menampilkan demonstrasi di area postingan ramuan CSS kalian! Penjelasan secara edukatifnya begini ;)) Penulisan (Internal Style Sheet & Inline Styles) dan penanaman kode CSS ketika berada di editor blog saat kegiatan menulis postingan sebelum publish.
Koben ingatkan kembali alakadar perbedaan cara penulisan dari Internal Style Sheet & Inline Styles

<style>
.Three-D {
font-family: arial,serif,tahoma;
color: #21416b;
font-size: 37px;
text-shadow: 0px 0px 0 rgb(9,41,83),1px 1px 0 rgb(-6,26,68),2px 2px 0 rgb(-20,12,54),3px 3px 0 rgb(-35,-3,39),4px 4px 0 rgb(-49,-17,25),5px 5px 0 rgb(-64,-32,10), 6px 6px 0 rgb(-78,-46,-4),7px 7px 6px rgba(0,0,0,0.6),7px 7px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);
margin: 10px auto;
text-align: center;
}
</style>

<p class="Three-D">CSS 3D Text</p>

CSS 3D Text

<p style="font-family: arial,serif,tahoma;color: #21416b;font-size: 37px;text-shadow: 0px 0px 0 rgb(9,41,83),1px 1px 0 rgb(-6,26,68),2px 2px 0 rgb(-20,12,54),3px 3px 0 rgb(-35,-3,39),4px 4px 0 rgb(-49,-17,25),5px 5px 0 rgb(-64,-32,10), 6px 6px 0 rgb(-78,-46,-4),7px 7px 6px rgba(0,0,0,0.6),7px 7px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);margin: 10px auto;text-align: center;">CSS 3D Text</p>

Kelihatan perbedaannya ada dimana! Ketika trick form action textarea popup... dibuat, gue terbayangkan dengan variabel textarea dan penulisan kode didalam konten yang tidak melalui proses phrase/convert! Faktor error code ketika memosting akan dominan ditemukan pada trick ini, disamping pemakaian tagging textarea waktu memosting sedikit memerlukan skill dan pengalaman tersendiri.
Oleh karena itu, sekarang Beben akan berbagi trik serupa dengan metode sama sedikit lain (bumbu ramuan) tentunya lebih aman dan friendly :D

Please before editing your template, you have to save Download Full Template

Letakan CSS berikut tepat diatas kode </b:skin>#CodeInput {
display: none;
width: 0;
height: 0;
}
#ResultCode {
width: 100%;
margin: 0;
padding: 0;
}Silahkan tambahkan variabel CSS sesuai dengan kebutuhan masing² Temukan kode </body> tepat sebelum/diatas masukan JavaScript berikut<script type='text/javascript'>
//<![CDATA[
function enen() {
var item = document.getElementById("ResultCode");
var text = document.getElementById("CodeInput");
item.innerHTML = text.value;
}
//]]>
</script>SAVE.
Ketika sobat melakukan postingan dan akan memberikan sebuah demo peragaan trik CSS yg mana penulisan bisa dengan 2 gaya diatas (Internal/Inline Style), ini dia markup yg mesti digunakan...

<input id="CodeInput" onchange="enen()" value=" ----- ADD HERE BUMBU RAMUAN TRIK CSS ----- " /><button onClick="enen()">View Demo</button><div id="ResultCode"></div>

ADD HERE BUMBU RAMUAN TRIK CSS Phrase/convert terlebih dahulu waktu menuliskannya!
Karena getElementById maka kalian hanya dapat melakukan demo 1x saja :P Soalnya gue tidak tahu tentang script menyeukript :))
Happy view \m/