Ternyata Menyimpan CSS STYLE Di Postingan Blog Tidak Sesuai Dengan Prosedur Dokumen HTML

Mengatasi Error Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

Cara Alternatif menyimpan / memasang css style di dalam postingan blog agar tidak error dan sesuai dengan Prosedur Dokumen HTML. Kali ini saya akan memberikan tutorial cara menyisipkan css style yang disimpan di dalam postingan blogger ke area head..

Sebelumnya saya sangat suka menyisipkan css di dalam postingan karena kita bisa memodifikasi tampilan post agar berbeda dengan yang lainnya. Tapi setelah saya baca-baca di blog DTE ternyata itu tidak diperbolehkan karena Tidak Sesuai Dengan Prosedur Dokumen HTML..

Css Style error karena tidak boleh berada di area body jadi kita harus menyimpannya di area head. Tidak seperti javascript, kode javascript bisa kita simpan di dalam markup head bisa juga di dalam body..

Mengetahui hal itu saya langsung cek postingan blog saya yang di dalamnya terdapat costum css style di situs HTML5 validator ternyata benar css yang disimpan di post itu tidak boleh. Pesan errornya seperti berkut

Error: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

From line 667, column 1; to line 667, column 23
sum.↩</p>↩<style type='text/css'>↩.perc...
Contexts in which element style may be used:
Where metadata content is expected.

In a noscript element that is a child of a head element.
Content model for element div:
If the element is a child of a dl element: one or more dt elements followed by one or more dd elements, optionally inte

Mengenai hal ini, saya langsung mencari cara gimana caranya agar css style yang kita pasang dalam postingan bisa di sisipkan / ke dalam markup </head> supaya tidak menampilkan pesan error dan tentunya sesuai dengan Prosedur Dokumen HTML..

Akhirnya saya menemukan tutorial di forum stackoverflow cara menambahkan style ke dalam are head dengan menggunakan javascript..
Kenapa javascript? karena javascript bisa kita simpan di area head dan body..

Nah sekarang saya akan memberikan cara alternatif untuk mengatasi Error: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

• Biasanya kalo kita memasang css di postingan tentunya dengan pembungkus css seperti berikut

<style type='text/css'>
Kode CSS Disini
</style>

atau

<style>
Kode CSS Disini
</style>

• Nah kode pembungkus css di atas kita rubah dengan kode javascript berikut

<script type="text/javascript">
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
var css = 'KODE CSS KALIAN MASUKAN DI SINI';
style.appendChild(document.createTextNode(css));
head.appendChild(style); 
</script>



Sebelum kalian memasukan css ke script itu, kalian terlebih dahulu harus mengompres css kalian / css minify bisa kalian gunakan tools ini Tools CSS Minifly Online
• Nah kalo sudah, kalian tinggal save dan lihat hasilnya

dan akhirnya sekarang saya harus merubah semua css style yang ada di dalam postingan dengan kode di atas agar semua postingan saya sesuai dengan struktur kode html yang benar... mungkin secara perlahan ane bisa perbaikinya :V

Okeh lah itu saja gan tutorial kali ini tentnag Cara Alternatif untuk memasang kode css di dalam postingan agar tidak error dan sesuai dengan struktur html yang benar ini semoga bermanfaat :)