Kotak Catatan di Blogger: HTML Responsif untuk Info Tambahan

Kotak catatan di Blogger dapat dibuat dengan HTML dan gaya inline pada isi postingan, tanpa mengubah tema atau memasang JavaScript. Gunakan elemen aside apabila isinya benar-benar tambahan. Pertahankan langkah penting dalam alur utama, lalu periksa hasil pada draf percobaan.

Contoh pada panduan ini ditampilkan sebagai teks kode, bukan komponen aktif. Anda dapat menyalinnya untuk latihan dan mengganti isi penandanya. Pemeriksaan ponsel, fokus, dan warna di bawah merupakan langkah yang perlu dilakukan pada halaman Anda, bukan laporan pengujian komponen yang sudah dipasang.

Pilih isi catatan sebelum menentukan bentuk kotaknya

Catatan tambahan dapat menjelaskan istilah, konteks singkat, atau informasi pelengkap yang tidak harus dibaca untuk mengikuti langkah utama. Tulis tujuan catatan dalam satu kalimat. Jika tidak ada kebutuhan yang jelas, pertahankan paragraf biasa.

Dokumentasi aside MDN menjelaskan bahwa elemen ini memuat isi yang hanya berhubungan secara tidak langsung dengan pembahasan utama. Jadi, kotak berwarna saja bukan alasan memilih aside. Periksa fungsi isinya terlebih dahulu.

Jangan memindahkan langkah wajib ke catatan samping hanya agar artikel terlihat lebih ringkas. Jika informasi tersebut merupakan bagian inti, pertahankan dalam urutan pembahasan. Pembaca harus tetap mengetahui tindakan yang diperlukan tanpa menebak apakah kotak itu boleh dilewati.

Jika Anda hanya membutuhkan pembungkus visual untuk isi inti, elemen div menurut MDN tidak membawa makna bagian khusus. Pada alternatif div sederhana, cukup pertahankan atribut style dari contoh dan gunakan penutup div yang sesuai. Jangan ikut membawa aria-label milik contoh aside.

Salin contoh untuk informasi tambahan

Contoh ini memakai judul singkat berupa paragraf yang ditebalkan, sehingga tidak menambahkan tingkat heading ke artikel. Ganti “Catatan istilah”, teks aria-label, dan paragraf isi sesuai catatan yang sebenarnya. Label yang dibaca teknologi bantu perlu selaras dengan maksud kotaknya.

<aside
  aria-label="Catatan istilah dalam artikel"
  style="box-sizing:border-box;width:100%;max-width:100%;margin:1.25rem 0;padding:1rem;border-left:4px solid #2563eb;background:#f8fafc;color:#1f2937;overflow-wrap:anywhere;">
  <p style="margin:0 0 0.5rem;"><strong>Catatan istilah</strong></p>
  <p style="margin:0;">Ganti paragraf ini dengan keterangan tambahan yang berkaitan dengan pembahasan. Simpan langkah wajib pada bagian utama artikel.</p>
</aside>

Aside yang diberi nama melalui aria-label pada contoh ini membantu mengenali informasi tambahan. Contoh tidak menambahkan role alert, aria-live, tabindex, atau tombol. Isinya merupakan teks statis, sehingga tidak memerlukan perilaku pemberitahuan mendadak kepada pembaca.

Properti box-sizing menurut MDN mengatur perhitungan ukuran kotak. Nilai border-box memasukkan padding dan border ke dalam lebar yang ditetapkan. Pada contoh, lebar mengikuti ruang artikel, sedangkan margin hanya memberi jarak vertikal.

Jangan menambahkan tinggi tetap hanya agar dua catatan tampak sama. Biarkan kotak bertambah tinggi sesuai teks. Untuk judul dan isi yang lebih panjang, periksa kembali jarak antarparagraf serta hubungannya dengan isi sebelum dan sesudah kotak.

Properti overflow-wrap MDN menjelaskan bahwa anywhere memungkinkan teks yang sulit dipenggal membungkus saat diperlukan. Ini membantu menangani kata atau alamat panjang; teksnya tidak dipotong menjadi lebih singkat.

Tempatkan pada isi draf dan periksa yang tersimpan

Simpan salinan isi sebelum menyunting artikel penting. Panduan backup Blogger dapat membantu menyiapkan cadangan yang lebih luas. Untuk mencoba kotak ini, gunakan satu draf percobaan terlebih dahulu.

Pada editor postingan, pilih Tampilan HTML dan tempel contoh setelah paragraf yang sudah ditutup. Kotak tidak ditempatkan dalam judul, deskripsi penelusuran, atau editor tema. Ganti seluruh penanda sebelum menilai apakah hasilnya cocok dengan tulisan Anda.

Bantuan pengelolaan postingan Blogger menyediakan langkah menyimpan draf dan membuka Preview. Simpan, buka pratinjau, lalu muat ulang editor untuk memeriksa HTML yang benar-benar tersimpan. Penyimpanan perlu dibedakan dari keputusan menerbitkan artikel.

Di pratinjau latihan, yang diharapkan terlihat adalah kotak catatan beserta isinya, bukan tulisan tag HTML. Jika hasil berbeda, periksa mode editor, tag pembuka dan penutup, serta apakah kotak tertempel di dalam elemen lain yang belum ditutup.

Jika catatan sudah ada, sunting elemen itu daripada menambahkan salinan kedua. Hindari menempel aturan global untuk semua aside atau paragraf hanya untuk mengubah satu komponen. Catat bagian yang diubah agar mudah dikembalikan.

Periksa lebar, keterbacaan, dan fokus

Buka pratinjau pada ruang artikel yang sempit dan lebar. Pastikan kotak tidak membuat seluruh halaman melebar, teks tidak terpotong, dan jarak dalamnya masih nyaman. Coba isi yang realistis, termasuk satu istilah panjang, bukan hanya kalimat pendek contoh.

Jika masalah hanya terlihat pada satu ukuran, catat lebar layar dan bagian yang berubah. Bandingkan isi serta gaya yang tersimpan sebelum menambah aturan baru. Bila penyebabnya belum jelas, kembalikan salinan awal dan sertakan catatan tersebut saat meminta peninjauan.

Panduan kontras minimum W3C WAI menyebut rasio minimum 4,5:1 untuk teks biasa. Periksa warna teks terhadap latar yang benar-benar tampil setelah gaya tema diterapkan. Warna dekorasi tepi tidak menggantikan kebutuhan agar isi dapat dibaca.

Contoh menetapkan warna teks dan latar pada kotak, tetapi aturan tema dapat memengaruhi elemen di dalamnya. Jangan menyimpulkan seluruh template lolos aksesibilitas hanya dari satu pasangan warna. Periksa pula ukuran tulisan dan hasil saat teks diperbesar.

Untuk menyelaraskan tampilannya dengan halaman, gunakan panduan warna dan tipografi Blogger. Pertahankan judul catatan yang menjelaskan maksud, sehingga pembaca tidak bergantung pada warna untuk memahami fungsi kotak.

Jika Anda menambahkan tautan, gunakan keyboard untuk mencapai dan mengaktifkannya. Panduan Focus Visible W3C WAI menjelaskan pentingnya indikator fokus yang terlihat. Jangan menghapus outline tanpa pengganti yang jelas. Kotak statis pada contoh tidak perlu dijadikan sasaran fokus tambahan.

Rawat catatan sebagai bagian dari penyuntingan

Periksa apakah informasi tambahan masih benar ketika artikel diperbarui. Catatan yang dahulu membantu dapat menjadi pengulangan setelah pembahasan utama berkembang. Ubah atau hapus bagian itu sesuai kebutuhan isi, bukan mempertahankannya karena desainnya menarik.

Simpan lokasi catatan, maksudnya, dan hasil pemeriksaan. Jika kotak tidak sesuai pada satu tema, tulis bagian yang bermasalah sebelum mengubah gaya. Pisahkan temuan mengenai isi, struktur HTML, dan tampilan agar peninjau mengetahui apa yang perlu diperbaiki.

Mulailah dari satu catatan yang mempunyai fungsi jelas. Contoh HTML ini membantu penyajian informasi tambahan; ia tidak menambahkan data terstruktur atau menjanjikan peringkat dan kecepatan pengindeksan tertentu.