10 Kode HTML Blogger yang Berguna untuk Mempercantik Artikel

Apakah tampilan artikel Blogger Anda terlihat terlalu sederhana? Salah satu cara untuk membuat artikel menjadi lebih menarik adalah dengan menambahkan beberapa elemen HTML sederhana.

Anda tidak harus mengubah seluruh template Blogger. Beberapa kode HTML Blogger dapat langsung digunakan di dalam postingan untuk membuat tombol, kotak informasi, tabel, quote, daftar, dan berbagai elemen visual lainnya.

Dalam artikel ini, kita akan membahas 10 kode HTML Blogger yang berguna untuk mempercantik artikel. Kode dibuat sederhana sehingga dapat digunakan oleh blogger pemula dan dapat dikembangkan sesuai kebutuhan.

Catatan:

Sebelum mengedit atau memasukkan kode ke Blogger, sebaiknya lakukan pratinjau terlebih dahulu untuk memastikan tampilan sesuai dengan template yang digunakan.

1. Kode HTML Tombol Sederhana

Tombol dapat digunakan untuk mengarahkan pembaca ke halaman lain, file download, halaman produk, atau sumber informasi tertentu.

Berikut contoh kode tombol HTML sederhana:

<a href="https://contoh.com"
target="_blank"
rel="noopener"
style="display:inline-block;padding:12px 22px;background:#2563eb;color:#ffffff;text-decoration:none;border-radius:8px;font-weight:600;">
Kunjungi Halaman
</a>

Ganti https://contoh.com dengan URL tujuan dan ubah teks Kunjungi Halaman sesuai kebutuhan.

Contoh penggunaan

Kode ini dapat digunakan untuk membuat tombol menuju halaman download, halaman kontak, tutorial lain, atau halaman tertentu di blog Anda.

2. Kode Kotak Informasi

Kotak informasi berguna untuk menonjolkan catatan penting, tips, peringatan, atau informasi tambahan.

<div style="background:#eff6ff;border-left:4px solid #2563eb;padding:16px;margin:20px 0;border-radius:8px;">

<strong>Tips:</strong>
Gunakan paragraf pendek agar artikel lebih mudah dibaca.

</div>

Anda dapat mengganti warna latar, warna garis, dan isi teks sesuai dengan desain artikel.

3. Kode Kotak Peringatan

Jika artikel berisi langkah yang perlu diperhatikan, Anda dapat menggunakan kotak peringatan agar informasi tersebut lebih mudah terlihat.

<div style="background:#fff7ed;border-left:4px solid #f97316;padding:16px;margin:20px 0;border-radius:8px;">

<strong>Perhatian:</strong>
Pastikan Anda melakukan backup sebelum mengubah kode template Blogger.

</div>

Warna oranye dapat digunakan untuk informasi yang membutuhkan perhatian tetapi tidak selalu berarti kesalahan.

4. Kode Kotak Sukses atau Tips

Kotak berwarna hijau dapat digunakan untuk menampilkan tips, hasil, atau informasi yang bersifat positif.

<div style="background:#ecfdf5;border-left:4px solid #10b981;padding:16px;margin:20px 0;border-radius:8px;">

<strong>Tips Blogger:</strong>
Gunakan gambar yang relevan agar tutorial lebih mudah dipahami.

</div>

5. Kode Blockquote untuk Kutipan

Jika artikel Anda berisi kutipan, pernyataan, atau kalimat penting, gunakan elemen blockquote.

<blockquote style="margin:20px 0;padding:16px 20px;border-left:4px solid #2563eb;background:#f8fafc;color:#334155;border-radius:6px;">

Konten yang ingin Anda tampilkan sebagai kutipan dapat ditulis di sini.

</blockquote>

Gunakan blockquote untuk kutipan yang memang memiliki konteks sebagai kutipan, bukan hanya untuk memperbesar teks biasa.

6. Kode Tabel Sederhana

Tabel dapat digunakan untuk membandingkan data atau menyajikan informasi secara lebih terstruktur.

<table style="width:100%;border-collapse:collapse;margin:20px 0;">

<tr>
<th style="border:1px solid #ddd;padding:10px;background:#f1f5f9;">Fitur</th>
<th style="border:1px solid #ddd;padding:10px;background:#f1f5f9;">Keterangan</th>
</tr>

<tr>
<td style="border:1px solid #ddd;padding:10px;">HTML</td>
<td style="border:1px solid #ddd;padding:10px;">Struktur halaman</td>
</tr>

<tr>
<td style="border:1px solid #ddd;padding:10px;">CSS</td>
<td style="border:1px solid #ddd;padding:10px;">Mengatur tampilan</td>
</tr>

</table>

Untuk tabel yang memiliki banyak kolom, pertimbangkan membuat versi yang dapat digeser pada perangkat mobile.

7. Kode Daftar dengan HTML

Daftar atau list sangat berguna ketika Anda ingin menjelaskan beberapa poin secara berurutan atau menampilkan kumpulan informasi.

Unordered List

<ul>
<li>Poin pertama</li>
<li>Poin kedua</li>
<li>Poin ketiga</li>
</ul>

Ordered List

<ol>
<li>Langkah pertama</li>
<li>Langkah kedua</li>
<li>Langkah ketiga</li>
</ol>

Gunakan ordered list untuk langkah yang memiliki urutan dan unordered list untuk kumpulan poin yang tidak membutuhkan urutan tertentu.

8. Kode Gambar Responsive

Gambar yang terlalu lebar dapat membuat tampilan artikel bermasalah pada perangkat dengan layar kecil. Salah satu cara sederhana adalah membuat gambar mengikuti lebar container.

<img
src="URL-GAMBAR"
alt="Deskripsi gambar"
style="max-width:100%;height:auto;display:block;margin:20px auto;"
>

Dengan max-width:100%, gambar dapat menyesuaikan lebar area yang tersedia.

9. Kode Garis Pemisah Artikel

Jika artikel cukup panjang, garis pemisah dapat digunakan untuk memberikan jeda visual antarbagian.

<hr style="border:0;border-top:1px solid #e2e8f0;margin:30px 0;">

Gunakan elemen ini secukupnya agar artikel tidak terlihat terlalu banyak terpotong.

10. Kode Tombol CTA untuk Artikel Blogger

CTA atau Call to Action dapat digunakan ketika Anda ingin mengarahkan pembaca melakukan tindakan tertentu.

Contohnya adalah menghubungi Anda melalui WhatsApp.

<a
href="https://wa.me/6281234567890"
target="_blank"
rel="noopener"
style="display:inline-block;background:#25D366;color:#ffffff;padding:12px 20px;border-radius:8px;text-decoration:none;font-weight:600;"
>
Chat via WhatsApp
</a>

Ganti nomor 6281234567890 dengan nomor WhatsApp Anda dalam format internasional tanpa tanda + atau spasi.

Jika tidak membutuhkan WhatsApp, Anda juga dapat mengganti URL tersebut dengan URL halaman lain.

Bonus: Cara Menggunakan Kode HTML di Blogger

Setelah mendapatkan kode HTML, Anda perlu memasukkannya pada lokasi yang sesuai.

1. Masuk ke dashboard Blogger.
2. Buat postingan baru atau buka artikel yang ingin diedit.
3. Masuk ke mode HTML pada editor Blogger.
4. Tempel kode pada lokasi yang diinginkan.
5. Gunakan fitur pratinjau untuk memeriksa hasilnya.
6. Jika tampilan sudah sesuai, simpan atau publikasikan artikel.

Penting:

Jangan langsung mengubah template hanya untuk memasang kode yang sebenarnya dapat digunakan di dalam postingan. Untuk kode artikel, gunakan editor HTML postingan terlebih dahulu.

Tips Agar Kode HTML Blogger Tidak Merusak Tampilan

Sebelum menggunakan kode HTML pada artikel yang sudah diterbitkan, ada beberapa hal yang sebaiknya diperhatikan.

• Gunakan kode yang memang diperlukan.
• Hindari memasukkan terlalu banyak elemen visual.
• Gunakan warna yang sesuai dengan desain blog.
• Periksa tampilan pada desktop dan mobile.
• Gunakan gambar dengan ukuran file yang wajar.
• Lakukan pratinjau sebelum menerbitkan artikel.
• Hindari menggunakan kode dari sumber yang tidak Anda pahami.

Jika sebuah kode menyebabkan tampilan artikel berubah secara tidak normal, hapus kode tersebut dari postingan dan periksa kembali bagian yang baru ditambahkan.

FAQ Kode HTML Blogger

Apakah kode HTML ini bisa digunakan di Blogger?

Ya, contoh kode pada artikel ini dibuat menggunakan HTML standar yang dapat digunakan dalam konten postingan Blogger. Namun, hasil tampilan dapat berbeda tergantung template dan pengaturan blog yang digunakan.

Apakah harus memahami HTML untuk menggunakan kode ini?

Tidak harus. Pemula dapat menyalin kode dan mengganti bagian tertentu seperti teks, URL, atau warna. Namun, memahami dasar HTML akan membantu ketika ingin melakukan modifikasi.

Apakah kode HTML dapat merusak template Blogger?

Kode yang ditempatkan di dalam postingan umumnya hanya memengaruhi elemen pada postingan tersebut. Meskipun demikian, selalu lakukan pratinjau dan gunakan kode yang Anda pahami.

Apakah kode HTML memengaruhi SEO artikel?

HTML yang terstruktur dapat membantu membuat konten lebih mudah dipahami dan digunakan. Namun, penggunaan kode dekoratif saja tidak otomatis membuat artikel mendapatkan ranking lebih tinggi. Kualitas konten, relevansi, pengalaman pengguna, dan berbagai faktor SEO lainnya tetap penting.

Apakah semua kode harus dimasukkan ke template Blogger?

Tidak. Kode yang hanya digunakan untuk mempercantik isi artikel biasanya dapat ditempatkan langsung pada editor HTML postingan. Kode yang membutuhkan CSS atau JavaScript secara global dapat memerlukan lokasi pemasangan yang berbeda.

Kesimpulan

HTML dapat menjadi cara sederhana untuk membuat artikel Blogger terlihat lebih terstruktur dan menarik. Anda tidak harus menggunakan kode yang rumit untuk mendapatkan tampilan yang lebih baik.

Beberapa elemen seperti tombol, kotak informasi, kotak peringatan, blockquote, tabel, list, gambar responsive, garis pemisah, dan CTA sudah cukup untuk meningkatkan tampilan artikel.

Yang terpenting adalah menggunakan kode secara proporsional. Jangan sampai elemen dekoratif justru membuat artikel sulit dibaca atau memperlambat halaman.

Tips terakhir:

Simpan kode HTML yang sering Anda gunakan di tempat khusus agar dapat digunakan kembali ketika membuat artikel baru.