Skrip Kode "Anti Bentrok"
Untuk mencegah bentrok kode (konflik CSS/JS) antara gaya bawaan template blog (seperti Blogger/WordPress) dengan kode kustom di dalam artikel, cara terbaik adalah menggunakan teknik CSS Scoping menggunakan properti all: revert; atau membungkus konten artikel dalam kontainer dengan aturan isolasi tertentu.
Berikut adalah penjelasan dan cara penerapannya.
1. Skrip Kode "Anti Bentrok" (CSS Isolation)
Simpan kode CSS berikut. Kode ini berfungsi untuk mereset elemen-elemen di dalam artikel agar tidak terpengaruh oleh CSS global luar, sekaligus mencegah CSS dari artikel merusak tampilan web di luar artikel.
<style>
/* Kontainer Utama Anti Bentrok */
.article-safe-container {
all: revert; /* Mengembalikan semua style ke default browser sebelum ditimpa template */
box-sizing: border-box;
font-family: inherit;
color: inherit;
line-height: 1.6;
}
/* Pastikan elemen umum di dalam artikel tetap aman dan terisolasi */
.article-safe-container h1,
.article-safe-container h2,
.article-safe-container h3,
.article-safe-container h4,
.article-safe-container h5,
.article-safe-container h6 {
all: revert;
font-weight: bold;
margin: 1.5em 0 0.5em 0;
}
.article-safe-container p {
all: revert;
margin: 0 0 1em 0;
}
.article-safe-container img {
max-width: 100%;
height: auto;
display: block;
}
</style>
2. Apakah Bisa Dipasang di Menu "Tata Letak" (Layout)?
Ya, sangat bisa, dan ini adalah cara yang paling efisien agar Anda tidak perlu memasukkan kode secara manual di setiap artikel.
Berikut adalah cara pasangnya (khususnya untuk platform seperti Blogger / Blogspot):
Masuk ke halaman Tata Letak (Layout) di dashboard Blogger Anda.
Cari bagian/slot widget yang berada di dekat area postingan (misalnya di bawah Header atau di dalam bagian Main/Blog Posts jika ada opsi widget HTML/JavaScript).
Catatan: Jika di Tata Letak tidak ada widget khusus untuk menyisipkan kode global di atas postingan, Anda bisa masuk ke menu Tema (Theme) > Edit HTML.
Letakkan kode CSS di atas tepat di atas kode
]]></b:skin>atau di dalam tag<head>template Anda. Dengan cara ini, CSS anti-bentrok akan aktif secara otomatis di seluruh halaman artikel.
3. Cara Menggunakan pada Artikel
Setiap kali Anda menulis atau memasukkan kode kustom (seperti tabel, widget, atau elemen HTML khusus) ke dalam artikel, bungkus seluruh kode tersebut di dalam tag div dengan kelas article-safe-container:
<div class="article-safe-container">
<!-- SEMUA KODE / KONTEN ARTIKEL ANDA DI SINI -->
<h2>Judul Bagian</h2>
<p>Paragraf artikel yang aman dari bentrok CSS template.</p>
</div>
