Cara Membuat Tulisan dalam Kotak di Blogger: 12 Desain HTML
Cara Membuat Tulisan dalam Kotak di Blogger dengan HTML: 12 Desain Menarik
Ingin membuat tulisan dalam kotak di Blogger agar artikel terlihat lebih rapi, menarik, dan mudah dibaca? Anda bisa melakukannya menggunakan kode HTML sederhana tanpa harus menguasai pemrograman web. Dalam panduan ini, Anda akan mempelajari cara membuat kotak tulisan di Blogger, mulai dari kotak border berwarna, kotak dengan background, kotak kutipan, hingga tabel sederhana yang bisa disesuaikan dengan desain blog.
Kotak tulisan sangat berguna untuk menonjolkan informasi penting, catatan, tips, kutipan, kode HTML, maupun rangkuman materi. Jika digunakan secara tepat, elemen ini juga membantu pembaca menemukan informasi utama dengan lebih cepat.
Panduan berikut cocok untuk pemula, pelajar, mahasiswa, dan siapa saja yang ingin mempercantik tampilan artikel menggunakan Blogger.
1. Apa Itu Kotak Tulisan di Blogger?
Kotak tulisan adalah elemen visual yang digunakan untuk menempatkan teks
di dalam area yang memiliki batas, warna latar, jarak, atau bentuk tertentu.
Dalam HTML, kotak semacam ini biasanya dibuat menggunakan elemen
<div> atau <p> dengan properti CSS.
Sebagai contoh, Anda dapat menggunakan properti border untuk
membuat garis tepi, padding untuk mengatur jarak antara teks
dan tepi kotak, serta background-color untuk memberikan warna
latar belakang.
Kotak tulisan bukan sekadar hiasan. Penggunaannya yang tepat dapat membantu pembaca membedakan informasi utama, catatan tambahan, contoh kode, dan kutipan dari isi artikel lainnya.
Kabar baiknya, Anda tidak perlu memasang plugin tambahan untuk membuat kotak sederhana. Kode HTML dan CSS dapat langsung ditulis pada editor postingan Blogger.
2. Manfaat Kotak Tulisan untuk Artikel
Sebelum mempraktikkan tutorial, ada baiknya memahami alasan penggunaan kotak tulisan dalam sebuah artikel.
Menonjolkan informasi penting
Kotak dengan warna latar lembut dapat digunakan untuk menandai kesimpulan, pengumuman, catatan penting, atau informasi yang perlu diperhatikan pembaca.
Membuat artikel lebih terstruktur
Kotak membantu memisahkan contoh, tips, dan penjelasan tambahan dari paragraf utama. Dengan demikian, pembaca dapat memindai isi artikel dengan lebih mudah.
Menampilkan kode atau materi pembelajaran
Bagi blog tutorial, teknologi, sains, maupun pendidikan, kotak dapat digunakan untuk menampilkan kode HTML, rumus, definisi, dan contoh soal agar tidak bercampur dengan teks penjelasan.
Mendukung pengalaman pengguna
Desain yang konsisten, kontras warna yang memadai, dan jarak teks yang nyaman dapat meningkatkan keterbacaan. Namun, terlalu banyak kotak berwarna justru bisa membuat artikel terlihat ramai.
3. Persiapan Sebelum Memasang Kode HTML
Untuk mengikuti tutorial ini, Anda hanya memerlukan akun Blogger, sebuah postingan, dan kode HTML yang akan digunakan. Sebaiknya siapkan juga salinan artikel sebelum melakukan perubahan.
Perlu diketahui bahwa Blogger menyediakan mode Compose dan HTML pada editor postingan. Mode Compose digunakan untuk mengedit konten secara visual, sedangkan mode HTML memungkinkan Anda memasukkan atau mengubah kode secara langsung.
- Buka dashboard Blogger dan pilih blog yang akan diedit.
- Buat postingan baru atau buka artikel yang ingin diperbarui.
- Tentukan bagian artikel yang membutuhkan kotak tulisan.
- Salin kode HTML yang sesuai dari contoh di bawah.
4. Cara Membuat Tulisan dalam Kotak di Blogger
Ikuti langkah-langkah berikut untuk memasang kotak tulisan pada postingan Blogger.
Langkah 1: Buka editor postingan
Masuk ke dashboard Blogger, pilih blog Anda, lalu klik Postingan. Pilih Postingan baru untuk membuat artikel atau buka artikel lama yang ingin diedit.
Langkah 2: Tentukan posisi kotak
Tulis judul dan isi artikel seperti biasa. Tentukan bagian tempat kotak akan ditampilkan, misalnya setelah paragraf pengantar atau di bagian penjelasan yang memerlukan penekanan.
Langkah 3: Beralih ke mode HTML
Pada editor Blogger, buka menu tampilan atau mode editor dan pilih HTML view. Nama atau posisi menu dapat berbeda bergantung pada versi antarmuka Blogger yang digunakan.
Langkah 4: Tempelkan kode kotak tulisan
Tempelkan salah satu kode yang tersedia dalam artikel ini pada posisi yang diinginkan. Sebagai contoh, gunakan kode berikut untuk membuat kotak sederhana.
<div style="border: 1px solid #cccccc;
padding: 15px;
background-color: #f5f7fa;
border-radius: 8px;">
Tuliskan informasi penting Anda di sini.
</div>Langkah 5: Periksa hasilnya
Kembali ke mode Compose jika diperlukan atau gunakan fitur pratinjau Blogger untuk memeriksa hasil tampilan. Pastikan teks tidak terpotong dan kotak terlihat baik pada layar komputer maupun ponsel.
Langkah 6: Simpan dan publikasikan
Jika tampilan sudah sesuai, simpan perubahan atau publikasikan artikel. Untuk artikel yang sudah terbit, periksa kembali halaman publikasinya setelah perubahan disimpan.
5. 12 Contoh Kotak Tulisan HTML untuk Blogger
Berikut berbagai variasi kotak tulisan yang dapat langsung digunakan. Ganti teks contoh dengan konten Anda sendiri. Semua contoh menggunakan CSS inline sehingga tidak mengharuskan Anda mengubah template blog.
1. Kotak Border Gold atau Emas
Kotak berbingkai emas cocok untuk menonjolkan catatan, informasi khusus, atau kutipan yang ingin diberi kesan elegan.
Ini adalah contoh tulisan di dalam kotak dengan garis tepi emas.
<div style="border: 3px double #FFD700;
padding: 15px;
background-color: #ffffff;
text-align: left;
border-radius: 4px;">
<strong>Contoh kotak emas</strong>
<p>Tuliskan isi kotak di sini.</p>
</div>2. Kotak Teks yang Bisa Disalin
Jika ingin menampilkan teks atau kode yang mudah dipilih dan disalin,
gunakan elemen <textarea>. Contoh ini cocok untuk
kode pendek, bukan untuk membungkus seluruh paragraf artikel.
<textarea readonly rows="3"
style="display: block;
width: 100%;
max-width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 5px;
background-color: #f8f9fa;">Teks yang ingin ditampilkan</textarea>
Atribut readonly membuat teks tidak dapat diedit langsung
oleh pembaca. Pembaca tetap dapat memilih teks untuk menyalinnya. Pada
perangkat tertentu, pengguna mungkin perlu menekan dan menahan teks
untuk memilihnya.
3. Kotak Background Biru Muda
Warna biru muda memberikan tampilan yang bersih dan cocok untuk tips, informasi tambahan, atau penjelasan singkat.
Gunakan kotak ini untuk menyampaikan penjelasan yang membantu pembaca.
<div style="border: 1px solid #b6d7f0;
padding: 15px;
background-color: #eaf4fc;
text-align: left;
border-radius: 6px;">
<strong>Informasi tambahan</strong>
<p>Tuliskan penjelasan di sini.</p>
</div>4. Kotak Background Krem
Kotak berwarna krem cocok untuk catatan, penjelasan tambahan, atau rangkuman yang tidak perlu terlalu mencolok.
Periksa kembali kode sebelum menyimpan artikel agar hasilnya sesuai harapan.
<div style="border: 1px solid #d9d6c8;
margin: 12px 0;
padding: 15px;
background-color: #fbf8eb;
text-align: left;
border-radius: 5px;">
<strong>Catatan</strong>
<p>Tuliskan catatan di sini.</p>
</div>5. Kotak Background Biru Tua
Warna biru tua dapat digunakan untuk ringkasan atau informasi penting. Pastikan warna teks dan latar belakang memiliki kontras yang memadai.
Gunakan warna yang kontras agar tulisan tetap mudah dibaca.
<div style="border: 1px solid #243b64;
background-color: #29447e;
padding: 15px;
margin: 12px 0;
color: #ffffff;
line-height: 1.7;
border-radius: 5px;">
<strong>Informasi penting</strong>
<p>Tuliskan informasi di sini.</p>
</div>6. Kotak Abu-Abu dengan Sudut Membulat
Sudut membulat memberi kesan modern. Desain ini cocok untuk catatan singkat dan rangkuman artikel.
Kotak dengan sudut membulat membuat informasi terlihat lebih terpisah dari paragraf utama.
<div style="border: 1px solid #b8bec5;
background-color: #f1f3f5;
padding: 15px;
border-radius: 12px;
margin: 12px 0;
color: #222222;
line-height: 1.7;">
<strong>Ringkasan</strong>
<p>Tuliskan ringkasan di sini.</p>
</div>7. Kotak Border Putus-Putus Abu-Abu
Garis putus-putus dapat digunakan untuk membedakan contoh atau materi tambahan dari penjelasan utama.
Ini adalah contoh tulisan dalam kotak dengan garis putus-putus.
<div style="border: 2px dashed #9ca3af;
padding: 15px;
margin: 12px 0;
color: #26364a;
background-color: #ffffff;
border-radius: 5px;">
<strong>Contoh</strong>
<p>Tuliskan contoh di sini.</p>
</div>8. Kotak Border Orange Putus-Putus
Warna oranye dapat dipakai untuk peringatan ringan atau hal yang perlu diperhatikan. Jangan menggunakannya secara berlebihan agar pembaca tidak kesulitan membedakan informasi.
Periksa kembali kode HTML sebelum menekan tombol Publikasikan.
<div style="border: 2px dashed #e66b32;
padding: 15px;
margin: 12px 0;
color: #713b1c;
background-color: #fffaf5;
border-radius: 5px;">
<strong>Perhatian</strong>
<p>Tuliskan pesan di sini.</p>
</div>9. Kotak Background Kuning dengan Border Ridge
Model ini menggunakan garis tepi bergaya ridge, yaitu garis yang memberikan kesan timbul. Efek akhirnya dapat berbeda sesuai browser.
Sesuaikan warna dan ketebalan garis agar tetap nyaman dilihat.
<div style="border: 3px ridge #9a7b00;
padding: 15px;
background-color: #fff2a8;
text-align: left;
color: #332900;">
<strong>Tips Blogger</strong>
<p>Tuliskan tips di sini.</p>
</div>10. Kotak Background Kuning dengan Border Dotted
Border dotted menghasilkan garis tepi berbentuk titik-titik. Desain ini dapat digunakan untuk informasi tambahan atau contoh sederhana.
Anda bisa mengubah warna kuning menjadi warna lain sesuai tema blog.
<div style="border: 2px dotted #8a6d00;
padding: 15px;
background-color: #fff2a8;
text-align: left;
color: #332900;
border-radius: 4px;">
<strong>Catatan tambahan</strong>
<p>Tuliskan catatan di sini.</p>
</div>11. Kotak dengan Area Gulir (Scrollable Box)
Kotak dengan area gulir bermanfaat ketika Anda perlu menampilkan teks
yang cukup panjang dalam ruang terbatas. Properti
max-height dan overflow-y membantu menjaga
tinggi kotak agar tidak berlebihan.
Ini adalah contoh teks pertama. Anda dapat memasukkan uraian tambahan di dalam kotak ini. Ketika jumlah teks melebihi tinggi maksimum, pembaca dapat menggulir bagian dalam kotak untuk melanjutkan membaca.
Gunakan model ini hanya jika diperlukan. Untuk artikel biasa, kotak yang mengikuti tinggi teks secara otomatis sering kali lebih nyaman dibaca.
<div style="box-sizing: border-box;
width: 100%;
max-width: 100%;
max-height: 160px;
overflow-y: auto;
overflow-wrap: anywhere;
border: 1px solid #cbd5e1;
padding: 15px;
background-color: #f8fafc;
border-radius: 5px;
line-height: 1.7;">
Tuliskan teks panjang di sini.
</div>12. Kotak Tabel Dua Kolom
Jika ingin membandingkan dua informasi, Anda dapat menggunakan tabel HTML. Contoh ini menampilkan dua kolom dan dua baris isi. Tabel dapat dikembangkan sesuai kebutuhan.
| Kolom 1 | Kolom 2 |
|---|---|
| Isi kotak 1 | Isi kotak 2 |
| Isi kotak 3 | Isi kotak 4 |
<div style="width: 100%; max-width: 100%; overflow-x: auto;">
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr>
<th style="border: 1px solid #cbd5e1; padding: 10px;">
Kolom 1
</th>
<th style="border: 1px solid #cbd5e1; padding: 10px;">
Kolom 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid #cbd5e1; padding: 10px;">
Isi kotak 1
</td>
<td style="border: 1px solid #cbd5e1; padding: 10px;">
Isi kotak 2
</td>
</tr>
<tr>
<td style="border: 1px solid #cbd5e1; padding: 10px;">
Isi kotak 3
</td>
<td style="border: 1px solid #cbd5e1; padding: 10px;">
Isi kotak 4
</td>
</tr>
</tbody>
</table>
</div>
Catatan: jika ingin membuat tabel dengan empat kolom, tambahkan dua
elemen <th> pada bagian judul dan dua elemen
<td> pada setiap baris. Pastikan tabel tetap nyaman
dibaca pada layar ponsel.
6. Cara Mengubah Warna dan Ukuran Kotak
Setiap desain di atas dapat disesuaikan dengan mengubah nilai properti
CSS di dalam atribut style. Anda tidak harus menghafal
semuanya; cukup pahami fungsi properti yang paling sering digunakan.
| Properti CSS | Fungsi | Contoh |
|---|---|---|
border |
Mengatur garis tepi. | 2px solid #000 |
padding |
Mengatur jarak di dalam kotak. | 15px |
margin |
Mengatur jarak di luar kotak. | 12px 0 |
background-color |
Mengatur warna latar. | #eaf4fc |
border-radius |
Membulatkan sudut kotak. | 8px |
line-height |
Mengatur jarak antarbaris teks. | 1.7 |
Contoh mengganti warna kotak
Jika ingin mengubah kotak biru muda menjadi hijau muda, cukup ganti
background-color: #eaf4fc; menjadi
background-color: #e8f5e9;.
Anda juga dapat mengganti warna garis tepi dengan mengubah nilai setelah
properti border. Sebagai contoh, gunakan
#2e7d32 untuk garis hijau tua.
7. Cara Membuat Kotak Tulisan Responsif di HP
Artikel Blogger sering dibaca melalui ponsel. Oleh karena itu, kotak tulisan sebaiknya menyesuaikan lebar area konten dan tidak memaksa pembaca menggeser halaman ke samping.
Hindari penggunaan lebar tetap seperti width: 600px; untuk
kotak teks biasa. Pada layar yang lebih kecil, ukuran tersebut dapat
melampaui lebar artikel.
Untuk kotak teks umum, gunakan pola berikut.
<div style="box-sizing: border-box;
width: 100%;
max-width: 100%;
padding: 15px;
border: 1px solid #d1d5db;
background-color: #f9fafb;
overflow-wrap: anywhere;
border-radius: 8px;">
Kotak ini menyesuaikan lebar area artikel.
</div>Untuk tabel atau kode yang memang memiliki baris panjang, gunakan area gulir horizontal secara terbatas pada elemen pembungkusnya. Jangan menerapkan lebar tetap yang besar pada seluruh halaman.
8. Kesalahan yang Sering Terjadi Saat Membuat Kotak di Blogger
Kode HTML terlihat sebagai tulisan biasa
Hal ini biasanya terjadi karena kode ditempelkan pada mode Compose, atau tag HTML ditulis sebagai teks yang ingin ditampilkan. Beralihlah ke mode HTML untuk memasukkan markup yang akan dirender sebagai kotak.
Kotak tidak muncul setelah disimpan
Periksa apakah tag pembuka dan penutup sudah lengkap. Contohnya,
elemen <div> harus ditutup dengan
</div>. Pastikan pula tanda kutip pada atribut
style tidak hilang atau tertukar.
Ukuran kotak terlalu lebar
Hapus lebar tetap yang tidak diperlukan dan gunakan
width: 100%; serta max-width: 100%;.
Untuk tabel yang lebar, tambahkan pembungkus dengan
overflow-x: auto;.
Warna teks sulit dibaca
Gunakan warna teks yang kontras dengan latar belakang. Teks putih lebih sesuai untuk latar gelap, sedangkan teks gelap umumnya lebih nyaman pada latar putih atau pastel.
Tampilan berbeda dari pratinjau
Tema Blogger dapat memiliki aturan CSS yang memengaruhi elemen artikel. Periksa halaman yang sudah dipublikasikan dan lakukan pengujian pada beberapa ukuran layar. Jika diperlukan, sesuaikan kode dengan tema yang sedang digunakan.
9. Apakah Kotak Tulisan Berpengaruh pada SEO?
Kotak tulisan tidak otomatis membuat artikel memperoleh peringkat lebih tinggi di Google. Manfaat utamanya adalah membantu menyajikan informasi secara lebih jelas dan meningkatkan kenyamanan pembaca ketika elemen tersebut digunakan dengan tepat.
Untuk mengoptimalkan artikel Blogger, perhatikan beberapa hal berikut.
- Konten bermanfaat: berikan jawaban yang lengkap, akurat, dan sesuai dengan kebutuhan pembaca.
- Struktur heading: gunakan H1 untuk judul utama, H2 untuk bagian utama, dan H3 untuk subbagian.
- Keterbacaan: pecah paragraf yang panjang dan gunakan daftar jika membantu menjelaskan informasi.
- Pengalaman mobile: pastikan kotak, tabel, dan kode tidak merusak tata letak halaman pada ponsel.
- Kecepatan halaman: hindari skrip atau elemen tambahan yang tidak diperlukan.
- Internal link: hubungkan artikel dengan panduan lain yang benar-benar relevan di blog Anda.
Hindari menambahkan kotak hanya demi memperbanyak elemen visual. Gunakan kotak jika memang membantu pembaca memahami informasi. Kualitas isi, relevansi, dan pengalaman pengguna tetap menjadi prioritas dalam optimasi SEO.
10. Pertanyaan Umum (FAQ)
1. Bagaimana cara membuat tulisan dalam kotak di Blogger?
Buka editor postingan Blogger, beralih ke mode HTML, lalu tempelkan
kode yang menggunakan elemen seperti <div> dengan
properti CSS border, padding, dan
background-color. Periksa hasilnya melalui pratinjau.
2. Apakah membuat kotak tulisan di Blogger harus menggunakan CSS?
Untuk membuat desain kotak dengan warna, garis tepi, dan jarak yang
dapat disesuaikan, CSS sangat membantu. Anda dapat menggunakan CSS
inline di atribut style tanpa perlu membuat file CSS
terpisah.
3. Apakah kode kotak tulisan bisa digunakan pada semua tema Blogger?
Kode HTML dan CSS sederhana umumnya dapat digunakan pada berbagai tema Blogger. Namun, hasil tampilannya bisa berbeda karena setiap tema mungkin mempunyai aturan CSS sendiri.
4. Bagaimana cara mengubah warna background kotak?
Ubah nilai pada properti background-color. Misalnya,
gunakan #eaf4fc untuk biru muda atau
#e8f5e9 untuk hijau muda.
5. Mengapa kotak tulisan melebar di layar HP?
Penyebabnya bisa berupa lebar tetap yang terlalu besar atau konten
panjang yang tidak dapat membungkus baris. Gunakan
width: 100%, max-width: 100%, dan
overflow-wrap: anywhere untuk kotak teks biasa.
6. Apakah kotak tulisan dapat berisi gambar dan tautan?
Bisa. Anda dapat memasukkan elemen gambar, tautan, daftar, atau paragraf
ke dalam elemen <div>, selama struktur HTML valid
dan sesuai dengan kebutuhan artikel.
7. Apakah terlalu banyak kotak dapat merugikan SEO?
Kotak tulisan bukan faktor yang otomatis merugikan SEO. Namun, terlalu banyak elemen dekoratif dapat mengganggu keterbacaan dan pengalaman pengguna. Gunakan secara wajar dan prioritaskan kualitas konten.
8. Bagaimana cara menampilkan kode HTML agar bisa disalin pembaca?
Untuk teks yang bisa dipilih dan disalin, Anda dapat memakai elemen
<textarea readonly>. Untuk menampilkan kode sebagai
contoh yang tidak dijalankan browser, gunakan
<pre><code> dan tulis karakter tag sebagai
entitas HTML, misalnya <div>.
11. Rangkuman dan Kesimpulan
Membuat tulisan dalam kotak di Blogger cukup mudah jika Anda memahami
dasar HTML dan CSS. Dengan menambahkan elemen <div>
atau elemen lain yang sesuai, Anda bisa membuat kotak berbingkai,
kotak berwarna, kotak sudut membulat, area teks yang dapat digulir,
hingga tabel sederhana.
Pilih desain sesuai fungsi konten. Gunakan warna yang nyaman dibaca, atur jarak teks dengan baik, dan pastikan tampilannya responsif di perangkat mobile. Jangan lupa memeriksa hasil melalui pratinjau sebelum memublikasikan artikel.
Kunci membuat kotak tulisan yang baik bukan hanya desainnya, tetapi juga kegunaannya. Kotak yang sederhana, responsif, dan mudah dibaca akan lebih bermanfaat bagi pengunjung blog.
Semoga tutorial ini membantu Anda mempercantik artikel di Blogger. Silakan pilih salah satu contoh kode, sesuaikan warna dan isinya, lalu praktikkan pada postingan Anda.
12. Referensi dan Artikel Terkait
Referensi teknis
- Pusat Bantuan Blogger — panduan penggunaan dan pengelolaan blog.
- MDN Web Docs: HTML — dokumentasi elemen dan struktur HTML.
- MDN Web Docs: CSS — dokumentasi properti CSS untuk mengatur tampilan halaman.
- Google Search Central: Creating Helpful, Reliable, People-First Content — panduan membuat konten yang bermanfaat bagi pembaca.
Artikel terkait di maznara.com
Untuk memperluas pembahasan dan membangun tautan internal, Anda dapat menambahkan tautan menuju artikel maznara.com yang membahas topik berikut. Pastikan URL di bawah disesuaikan dengan artikel yang benar-benar sudah tersedia di situs.
Posting Komentar untuk "Cara Membuat Tulisan dalam Kotak di Blogger: 12 Desain HTML"
Silahkan Berkomentar Dengan Bijak