Cara Membuat Garis Horizontal di Blog

Assalamu 'alaikum.

Saat melihat salah atu blogger ternama menggunakan garis horizontal di bawah header di postingan blog, saya menjadi terinspirasi untuk melakukan hal yang sama. Namun setelah googling sana sini, saya tak kunjung mendapati hal yang sesuai keinginan.

Beruntung saya mencoba mencari di blog berbahasa inggris dan akhirnya bisa membuat garis horizontal seperti di bawah.

Garis ini bisa ditambahkan dibawah header (Subjudul artikel) atau di tempat mana saja yang sobat inginkan. Asiknya lagi, semuanya bisa diatur, mulai dari warna, ketebalan, sampai gaya garis.

Bagi pengguna platform Wordpress, menambahkan garis horintal adalah hal yang sangat mudah, yaitu tinggal mengklik ikon horizontal line yang ada di baris menu.

Sementara bagi pengguna blogspot, fitur ini belum ada sehingga kita perlu memasukkan kode untuk garis horizontal secara manual di bagian HTML postingan.

Membuat Garis di Blog

Untuk membuat garis mendatar di postingan blog, kita akan menggunakan tag HTML <div>. Perlu diingat bahwa garis yang tercipta nanti akan memiliki panjang yang memenuhi sisi kiri kanan artikel (Full width).

1. Buat postingan baru dan pilih "HTML"

2. Paste kode ini (seluruh teks dalam kotak )

<div style="border-top: 3px solid #dcdcdc; margin-top: 1em; padding-top: 1em;">
</div>
-Lanjutkan menulis disini-

3. Klik "Compose" dan lihat garis yang terbentuk.

Untuk menulis teks dibawah garis horinzontal tadi, silahkan hapus tulisan "Lanjutkan menulis di sini" dan lanjut mengetik kata yang diinginkan. Mengapa teks ini ini penting, karena jika sobat tidak ikut mempaste tulisan ini kemudian mengklik compose lalu mulai mengetik paragraf dibawah garis, maka garis tadi akan selalu muncul ketika sobat menekan tombol enter.

Mengubah ketebalan garis

Jika ingin mengubah ketebalan, ubah angka yang ditandai warna merah pada kode di atas. Semakin besar angkanya, semakin besar ketebalan garis yang terbentuk.

Mengubah warna garis

Jika ingin mengubah warna, ubah teks dengan background biru. Untuk melihat daftar kode warna, klik di sini.

Mengubah gaya garis

Jika ingin mengubah gaya garis, ubah teks dengan background hijau. Berikut adalah beberapa pilihan gaya yang bisa sobat pilih.

Solid

dotted

double

groove

Itulah pembahasan mengenai menambahkan garis horizontal di postingan blog. Untuk mendapatkan gaya dan panjang garis yang lebih bervariasi, baca di sini.

Semoga artikel ini bermanfaat dan membuat postinan sobat menjadi lebih menarik lagi. Terimakasih sudah berkunjung dan happy blogging!

La Sidin Mahasiswa arsitektur pecinta seni, blogger pemula, Badminton Addict, Local guide level 5, dan Pecinta musik klasik serta pop,

Share :