Tutorial Blogger: Struktur Lewis Interaktif di Blogger

Tutorial ini menjelaskan cara menampilkan struktur Lewis molekul langsung di halaman Blogger menggunakan library RDKit.js, rendering berbasis WebAssembly tanpa server, tanpa plugin, tanpa biaya. Struktur dirender di browser pengunjung secara real-time dari notasi SMILES.

Apa itu SMILES? SMILES (Simplified Molecular Input Line Entry System) adalah notasi teks ringkas untuk merepresentasikan struktur molekul. Contoh: CCO = etanol, OS(=O)(=O)O = asam sulfat.

Bagian 1: Persiapan (Sekali Saja)

1.1 Buat repositori GitHub

Buka github.com dan login atau buat akun baru (gratis).

Klik tombol New untuk membuat repositori baru. Beri nama misalnya lewis-engine. Pastikan visibilitas diset Public.

Upload dua file berikut ke repositori tersebut: lewis.css dan lewis.js.

Setelah upload, URL CDN kedua file akan menjadi:

https://cdn.jsdelivr.net/gh/USERNAME/lewis-engine/lewis.css
https://cdn.jsdelivr.net/gh/USERNAME/lewis-engine/lewis.js

Ganti USERNAME dengan username GitHub kamu.

File lewis.css dan lewis.js hanya perlu di-upload sekali. Semua post yang menggunakannya akan otomatis mengambil dari CDN tersebut. jsdelivr meng-cache file dari GitHub secara otomatis, tidak perlu konfigurasi tambahan.

1.2 Dapatkan file lewis.css dan lewis.js

Kedua file dapat diunduh dari blog ini. Simpan keduanya lalu upload ke repositori GitHub sendiri yang sudah dibuat. Sila unduh kedua file dengan klik tautan berikut (dari google drive):
1) lewis.css;
2) lewis.js.
Dapat juga menggunakan link milik admin yang saat ini masih aktif, namun resikonya bila ini admin menghapusnya pengguna akan kehilangan akses.
Oleh karena itu sebaiknya lakukan hosting sendiri di github agar tidak beresiko kehilangan file css dan js. Berikut link yang langsung dapat digunakan (tanpa perlu hosting sendiri) kalau sekadar ingin mencoba saja:


<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/uriprukim-hub/lewis-engine/lewis.css">
<script src="https://cdn.jsdelivr.net/gh/uriprukim-hub/lewis-engine/lewis.js"></script>

Bagian 2: Cara Pakai di Post Blogger

Semua kode berikut harus dimasukkan dalam mode HTML, bukan mode Compose. Di editor post Blogger, klik ikon <> untuk beralih ke mode HTML.

2.1 Load engine di awal post

Paste dua baris ini di bagian paling atas konten HTML post:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/USERNAME/lewis-engine/lewis.css">
<script src="https://cdn.jsdelivr.net/gh/USERNAME/lewis-engine/lewis.js"></script>

Dua baris ini cukup di-load satu kali per post. Jika dalam satu post ada banyak molekul di berbagai bagian, engine tetap hanya perlu di-load sekali di awal.

2.2 Struktur dasar satu molekul

Untuk menampilkan satu molekul, gunakan pola berikut:

<div class="mol-canvas" data-smiles="SMILES_DI_SINI">
    <span class="mol-caption">Nama Molekul</span>
</div>

Contoh nyata untuk etanol:

<div class="mol-canvas" data-smiles="CCO">
    <span class="mol-caption">Etanol (C<sub>2</sub>H<sub>5</sub>OH)</span>
</div>

Hasil:

Preview

Etanol (C₂H₅OH)

Bagian 3: Pola Layout

3.1 Molekul tunggal di tengah

Bungkus dengan div.mol-center agar tampil di tengah halaman:

<div class="mol-center">
    <div class="mol-canvas" data-smiles="CC(=O)NC1=CC=C(C=C1)O">
        <span class="mol-caption">Parasetamol (C<sub>8</sub>H<sub>9</sub>NO<sub>2</sub>)</span>
    </div>
</div>

Preview

Parasetamol (C₈H₉NO₂)

3.2 Beberapa molekul berderet

Bungkus dengan div.mol-row agar tampil berdampingan dan responsif:

<div class="mol-row">
    <div class="mol-canvas" data-smiles="CO">
        <span class="mol-caption">Metanol (CH<sub>3</sub>OH)</span>
    </div>
    <div class="mol-canvas" data-smiles="CCO">
        <span class="mol-caption">Etanol (C<sub>2</sub>H<sub>5</sub>OH)</span>
    </div>
    <div class="mol-canvas" data-smiles="CCCO">
        <span class="mol-caption">Propanol (C<sub>3</sub>H<sub>7</sub>OH)</span>
    </div>
</div>

Preview

Metanol (CH₃OH)

Etanol (C₂H₅OH)

Propanol (C₃H₇OH)

3.3 Molekul besar, perbesar canvas

Untuk molekul kompleks seperti kolesterol, tambahkan style="width:420px;" agar struktur tidak terlalu rapat:

<div class="mol-center">
    <div class="mol-canvas" style="width:420px;"
         data-smiles="CC(C)CCCC(C)C1CCC2C3CC=C4CC(O)CCC4(C)C3CCC12C">
        <span class="mol-caption">Kolesterol (C<sub>27</sub>H<sub>46</sub>O)</span>
    </div>
</div>

Preview

Kolesterol (C₂₇H₄₆O)

3.4 Dua atau tiga molekul seolah satu canvas

Untuk menampilkan beberapa molekul dalam satu kotak yang menyatu, bungkus dengan wrapper div ber-border, lalu hapus border masing-masing mol-canvas:

<div class="mol-center">
    <div style="display:inline-flex;border:1px solid #dde6f0;border-radius:16px;overflow:hidden;">
        <div class="mol-canvas" data-smiles="OS(=O)(=O)O"
             style="border:none;border-radius:0;border-right:1px solid #dde6f0;">
            <span class="mol-caption">H<sub>2</sub>SO<sub>4</sub></span>
        </div>
        <div class="mol-canvas" data-smiles="O"
             style="border:none;border-radius:0;">
            <span class="mol-caption">H<sub>2</sub>O</span>
        </div>
    </div>
</div>

Preview

H₂SO₄

H₂O

Bagian 4: Fitur Lanjutan

4.1 Menampilkan H eksplisit

Secara default atom hidrogen disembunyikan (implisit) mengikuti konvensi struktur kimia umum. Jika ingin menampilkan ikatan O−H, N−H, dll secara eksplisit, tambahkan atribut data-explicit-h="true":

<!-- H implisit (default) -->
<div class="mol-canvas" data-smiles="OS(=O)(=O)O">
    <span class="mol-caption">H<sub>2</sub>SO<sub>4</sub> &mdash; H implisit</span>
</div>

<!-- H eksplisit -->
<div class="mol-canvas" data-smiles="OS(=O)(=O)O" data-explicit-h="true">
    <span class="mol-caption">H<sub>2</sub>SO<sub>4</sub> &mdash; H eksplisit</span>
</div>

Preview, perbandingan H implisit vs eksplisit

H₂SO₄, H implisit

H₂SO₄, H eksplisit

4.2 Caption dengan rumus kimia

Caption mendukung HTML penuh, gunakan <sub> untuk subskrip dan <sup> untuk superskrip:

<span class="mol-caption">
    SO<sub>4</sub><sup>2−</sup> &mdash; Anion sulfat
</span>

4.3 Ringkasan semua atribut

Atribut / Class	Fungsi	Contoh
`data-smiles`	Notasi SMILES molekul, wajib	`data-smiles="CCO"`
`data-explicit-h`	Tampilkan H sebagai atom dengan ikatan	`data-explicit-h="true"`
`data-caption`	Caption teks biasa (alternatif span)	`data-caption="Etanol"`
`style="width:Xpx"`	Lebar canvas custom, default 280px	`style="width:400px;"`
`class="mol-row"`	Wrapper berderet (flex wrap)	`<div class="mol-row">`
`class="mol-center"`	Wrapper di tengah halaman	`<div class="mol-center">`
`class="mol-caption"`	Caption HTML di bawah struktur	`<span class="mol-caption">`

Bagian 5: Template Siap Salin

Salin blok di bawah ini ke editor HTML Blogger, ganti SMILES dan nama molekul sesuai kebutuhan, kemudian publish.

<!-- STEP 1: Load engine (ganti USERNAME/REPO) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/USERNAME/REPO/lewis.css">
<script src="https://cdn.jsdelivr.net/gh/USERNAME/REPO/lewis.js"></script>

<!-- STEP 2: Tulis konten molekul -->

<!-- Tunggal di tengah -->
<div class="mol-center">
    <div class="mol-canvas" data-smiles="SMILES">
        <span class="mol-caption">Nama Molekul</span>
    </div>
</div>

<!-- Berderet -->
<div class="mol-row">
    <div class="mol-canvas" data-smiles="SMILES_1">
        <span class="mol-caption">Molekul 1</span>
    </div>
    <div class="mol-canvas" data-smiles="SMILES_2">
        <span class="mol-caption">Molekul 2</span>
    </div>
</div>

<!-- Lebar diperbesar -->
<div class="mol-center">
    <div class="mol-canvas" style="width:400px;" data-smiles="SMILES">
        <span class="mol-caption">Nama Molekul</span>
    </div>
</div>

<!-- H eksplisit -->
<div class="mol-center">
    <div class="mol-canvas" data-smiles="SMILES" data-explicit-h="true">
        <span class="mol-caption">Nama Molekul</span>
    </div>
</div>

<!-- Seolah 1 canvas (2 molekul) -->
<div class="mol-center">
    <div style="display:inline-flex;border:1px solid #dde6f0;border-radius:16px;overflow:hidden;">
        <div class="mol-canvas" data-smiles="SMILES_A"
             style="border:none;border-radius:0;border-right:1px solid #dde6f0;">
            <span class="mol-caption">Molekul A</span>
        </div>
        <div class="mol-canvas" data-smiles="SMILES_B"
             style="border:none;border-radius:0;">
            <span class="mol-caption">Molekul B</span>
        </div>
    </div>
</div>

Bagian 6: Referensi SMILES Umum

Beberapa SMILES yang sering digunakan dalam kimia anorganik dan organik:

Molekul	SMILES	Molekul	SMILES
H₂O	`O`	CO₂	`O=C=O`
NH₃	`N`	HCl	`Cl`
H₂SO₄	`OS(=O)(=O)O`	HNO₃	`ON(=O)=O`
H₃PO₄	`OP(O)(O)=O`	NaCl	`[Na+].[Cl-]`
SO₄²⁻	`[O-]S([O-])(=O)=O`	NO₃⁻	`[O-][N+](=O)=O`
NH₄⁺	`[NH4+]`	OH⁻	`[OH-]`
Etanol	`CCO`	Asam asetat	`CC(O)=O`
Benzena	`c1ccccc1`	Glukosa	`OCC1OC(O)C(O)C(O)C1O`

Untuk mencari SMILES molekul lain, gunakan database seperti PubChem (pubchem.ncbi.nlm.nih.gov) atau ChemSpider (chemspider.com), cari nama molekul, lalu salin nilai Canonical SMILES-nya.

Bagian 7: Troubleshooting

Masalah	Kemungkinan Penyebab	Solusi
Struktur tidak muncul sama sekali	RDKit.js gagal dimuat atau koneksi lambat	Cek koneksi internet, reload halaman. RDKit ~6MB, butuh beberapa detik pertama kali.
Muncul pesan "SMILES tidak valid"	Notasi SMILES salah	Verifikasi SMILES di PubChem atau coba di `rdkit.org/docs`.
Struktur sangat kecil	Canvas terlalu kecil untuk molekul besar	Tambahkan `style="width:400px;"` atau lebih besar.
Layout berantakan di mobile	Lebar fixed terlalu besar	Gunakan lebar ≤320px untuk mobile, atau biarkan default 280px.
Engine tidak jalan setelah update file di GitHub	Cache jsdelivr belum diperbarui	Tunggu ~24 jam, atau gunakan URL dengan versi: `@main` di URL CDN.
Kode HTML tidak tersimpan di Blogger	Blogger strip beberapa atribut	Pastikan tidak ada `onclick` inline. Gunakan hanya `data-*` atribut.

Dibuat dengan RDKit.js (WebAssembly) · Layout 2D: Compute2DCoords · Warna atom: CPK standar

Pages