Cara Memasang Kode CSS dalam Postingan

Definisi CSS

Cara Memasang Kode CSS dalam Postingan — Kadang orang terjebak dengan definisi-definisi yang sulit sehingga belum kenal saja sudah malesin. Buat saya, definisi CSS itu sederhananya seperti seseorang yang sedang merias dirinya supaya tampil tambah cantik.

Jadi, CSS itu ibarat peralatan dandan yang mempercantik dirinya yang sudah cantik. Tanpa CSS, sudah cantik. Apalagi kalau dirias pake make-up CSS. Mungkin ini merupakan satu catatan pengantar awal untuk mendokumentasikan kode CSS apa yang bisa saya gunakan untuk dimuat dalam suatu postingan blog. Ini akan sangat berguna dalam rangka membungkus suatu tulisan (meskipun yang paling utama memang bukan bungkusnya, melainkan isinya).

Cara Memasang Kode CSS dalam Postingan

Persoalan utama sewaktu kita ingin memasang kode CSS dalam postingan adalah seringkali kode CSS itu merusak tampilan blog secara umum. Jadi kayak bentur gitu karena kode CSS kan dipasangnya di template blog, nah sekarang kita mau pasang CSS di halaman postingan. Ini jadi masalah.

Namun, saya beruntung ketemu dengan tutorial dari blog mastamvan (Ternyata Menyimpan CSS Style di Postingan Blog Tidak Sesuai dengan Prosedur Dokumen HTML) yang memberikan solusi untuk itu. Intinya, kode CSS itu perlu kita ubah dulu menjadi JavaScript supaya bisa dimasukkan dalam halaman edit HTML dalam suatu postingan blog. Jadi saya mau menaruh script pengubah itu di sini supaya kalau suatu saat saya butuh, saya bisa menemukannya di blog langsung.

Kode Dasar CSS

Kode CSS hampir selalu ditandai dengan tag <style></style>

CONTOH KODE CSS

<style>
Kode CSS Disini
</style>

JavaScript CSS dan Inline CSS

Kode dasar CSS itu harus diubah menjadi JavaScript atau menggunakan cara Inline terlebih dahulu sebelum masuk dalam postingan blog.

Untuk metode JavaScript CSS, gunakan kode di bawah ini:

<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 MASUKKAN DI SINI';
style.appendChild(document.createTextNode(css));
head.appendChild(style);
</script>

Setelah ditaruh kode CSS nya, kode itu perlu di compress dengan menggunakan minifier.

Untuk inline CSS, sebenarnya sudah sering kita temukan, yaitu saat kode CSS berada pada tag HTML dalam suatu postingan blog.

Contoh Penerapan

Mari kita lihat contohnya:
Saya mau merias kode HTML dasar Heading dengan CSS

KODE DASAR TABEL TANPA CSS

<h4>Heading 1</h4>

Sekarang dengan CSS.

KODE CSS

h4 {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Menggunakan metode , yaitu saat kode CSS berada pada tag HTML dalam suatu postingan blog.

KODE INLINE CSS

<h4 style="text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; color:white;">Heading 1</h4>

Hasilnya:

Heading 4

Sekarang menggunakan metode

KODE JAVASCRIPT CSS SETELAH DI MINIFY

<script type="text/javascript">var head=document.head||document.getElementsByTagName('head')[0];var style=document.createElement('style');style.type='text/css';var css='h4{color:white;text-shadow:1px 1px 2px black,0 0 25px blue,0 0 5px darkblue}';style.appendChild(document.createTextNode(css));head.appendChild(style);</script>

<h4>Heading 1</h4>

Hasilnya, sama:

Heading 4