1. Pasang CSS kotak warna di template (sekali saja)
Buka Tema → klik panah di sebelah tombol 'Sesuaikan' → pilih 'Edit HTML'. Cari (Ctrl+F) tag ]] > </b:skin >. Tempel kode CSS gabungan (.text-boxcoklat, .text-boxbiru, .text-boxkuning, .text-boxorange, .text-boxhijau, beserta versi :hover-nya) tepat sebelum tag itu. Klik Simpan. Ini hanya dilakukan SEKALI, bukan per postingan.
2. Atur teks & tampilan tautan 'Baca Selengkapnya' (sekali saja)
Kalau mau ubah teks tautan jump break bawaan (misalnya jadi 'Mau Lanjut ?? »'), masih di Edit HTML, cari kata kunci jump-link. Ganti isi <data:post.jumpText/ > dengan teks pilihanmu. Kalau mau tautannya berbentuk kotak warna (bukan teks polos), tambahkan juga CSS .jump-link a { padding, background-color, border-radius, dll } di dekat CSS langkah 1. Simpan.
3. Di tiap postingan: bungkus teks dengan <div class="text-boxwarna" >
Setiap kali menulis postingan baru, klik ikon ' < >' di toolbar editor untuk masuk mode HTML. Bungkus bagian teks yang mau diberi kotak warna dengan <div class="text-boxwarna" >... </div > — pilih salah satu: text-boxcoklat, text-boxbiru, text-boxkuning, text-boxorange, atau text-boxhijau. TIDAK PERLU lagi menulis <style >... </style > di dalam postingan, karena CSS-nya sudah permanen di template.
4. Sisipkan <!--more-- > di titik potong
Masih di mode HTML, letakkan kursor di titik di mana kamu ingin memotong tampilan cuplikan (biasanya setelah 2-4 kalimat pembuka), lalu ketik persis: <!--more-- > (huruf kecil semua, tanpa spasi di dalam tanda kurung). Boleh diletakkan di dalam ATAU di luar div, yang penting div-nya tetap ditutup dengan </div > di akhir teks (jumlah <div > pembuka harus sama dengan </div > penutup).
5. Cek tag <div > seimbang, lalu publish
Sebelum publish, scan sekilas: pastikan setiap <div class="..." > yang dibuka punya tepat satu </div > penutup, tidak ada tag dobel atau kurang. Ini penyebab paling umum background/kotak warna hilang atau tampilan halaman depan berantakan. Lalu klik 'Publikasikan' atau 'Perbarui'.
6. Cek hasil akhir di halaman depan
Buka halaman depan blog (bukan cuma halaman detail post) dan lakukan hard refresh (Ctrl+Shift+R / Cmd+Shift+R) untuk memastikan cache browser tidak menampilkan versi lama. Pastikan: teks terpotong sesuai <!--more-- >, kotak warna tampil dengan background-nya, dan tautan 'Baca Selengkapnya' terlihat jelas.
