Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Garis Horozontal dalam postingan blog dengan bermacam gaya HTML

Cara Membuat Garis Horozontal di Postingan blog - Inilah gaya seni menulis artikel agar tidak membosankan dengan menggunaka bermacam model bentuk dan gaya garis lurus bisa memasang pada tepi border atau pembatas garis baru, juga dapat ditambah warna latar yang bertujuan membatasi antara artikel, atribut desain color sebagai garis baru (alinea)

Berikut contohnya garis horizontal dalam postingan blog:




Istilah lain horizontal pada isi bacaan area postingan adalah sebuah garis lurus pada postingan bisa kita ubah warnanya semua atau sebagian. Seorang blogger pasti tertarik membuatnya untuk itu cobalah perhatikan beberapa alasan jika blog anda ada garis pembatas didalamnya

Fungsi membuat garis pembatas di blog


Beberapa fungsi atau tujuan dibuat garis pada artikel menurut versi saya sendiri:
  • Artikel dapat dibaca secara teliti
  • Mudah dimengerti yang mana penjelasan, dan mana tutorial, atau garis baru
  • Sedikit tidak merasa bosan jika dibaca oleh pengunjung, dll lagi...



Cara membuat garis di html


Untuk memasangnya sangat mudah sekali kita hanya memasukan kode perintah di HTML, berikut langkahnya:


  1. Buka blog anda > lalu fokus untuk membuat Artikel pada Entri > jika akan menambahkan garis horizontal tandai paragraf yang akan dipasang garis agar mudah dicari, lalu pindahkan mode masukan ke HTML
  2. Kopas kode-kode untuk membuat garis berikut pada html, silahkan cari macam-macam garis horizontal yang dapat dipakai pada postingan blog selanjutnya atas warna dan ukuran pixel

Berikut kode untuk membuat garis horizontal pada postingan blog


1. Kode untuk garis (solid) sederhana dengan satu contoh: warna hitam

<hr color ="solid black" align="center"/>

Jadinya:


Keterangan!
  • Ukuran panjang sudah saya atur responsive pada semua halaman: versi seluler maupun desktop
  • Warna bisa di rubah tinggal ganti bagian "solid black" atau warna lain

2. Ini garis lurus dengan titik atau bintik (dotted), jika anda mau bisa pakai boleh berikut kodenya:

<div style="border-bottom:2px dotted red;"></div>

Hasilnya:


Catatan!
  •  2px adalah ketebalan bintik dotted dan jarak bisa anda atur, juga warna red bisa diganti.

3. Berikut garis spesial dengan 2 warna keren:


<div style="-moz-border-box: 1px; -webkit-border-box: 1px; background-color: gainsboro; border-left: 90px solid lime; padding: 1px; t-align: left;">

Hasil sperti ini:



4. Garis selanjutnya Atribut Align, kode garis horizontal ini bisa anda atur semua sesuai kehendak: hapalkan kodenya selanjutnya tinggal anda atur color, border, juga ukurannya.

<div style="border-top: 4px solid #00ff7f; margin-top: 1em; padding-top: 1em;">
</div>

solid


solid

??.. Jika anda ingin mendesain sendiri tinggal mengganti 4px jadi 1,2,3,5,6 dst... dan solid menjadi dooted, double, groove, dan warna hingga menghasilkan garis seperti dibawah:

dotted

double

groove

Nah, diatasi adalah kode untuk membuat garis horizontal pada postingan blog, kalu ingin mengganti warna silahkan lihat: Daftar kode warna untuk Website

Atau jika anda butuh, dan ingin membuat kotak untuk script atau CSS desain template bisa baca Cara Membuat Kotak script di Postingan Blog

Itulah kode untuk membuat garis dalam postingan blog kurang lebihnya mohon maaf Semoga bermanfaat ya guys!

3 komentar untuk "Cara Membuat Garis Horozontal dalam postingan blog dengan bermacam gaya HTML"

  1. ada orang suka letak. ada yang tidak. bagi mereka ia membataskan penglihatan😊

    BalasHapus
  2. Kang share script responsiv slideshow donk di postingan mau pun di menu beranda

    BalasHapus