Cara Simpel Membuat Garis Datar Warna Pada Blog – Garis Horizontal Blogger Blogspot

Garis Horizontal atau garis datar biasanya dibuat untuk memisahkan antara judul dengan deskripsi, postingan 1 dengan postingan 2, 3 dan seterusnya, memisahkan paragraf dengan paragraf yang berbeda topik dan lain-lain.

Cara Menambahkan Garis Horisontal (datar) pada Postingan Blogger Blogspot Post

Garis horizontal (atau, horisontal aturan) adalah garis yang dapat dibuat

  • Dengan panjang/lebar yang berbeda-beda,
  • Bisa disimpan sejajar di sebelah kiri, tengah, atau kanan,
  • Dengan ketebalan berbeda (atau ukuran),
  • Dengan warna yang berbeda,
  • Garis bentuk padat atau putus-putus, dan lain-lain
Untuk menambahkan garis horizontal di posting Blogger Blogspot, Anda harus masuk ke edit pos dan masuk ke edit HTML:

Berikut adalah beberapa contoh kode HTML untuk garis horizontal dengan Tag dasar <hr>

1. Tag Dasarnya Adalah <hr>

Jika hanya menulis kode Tag : <hr>

Hasilnya seperti garis berikut :


2. Atribut tambahan untuk Tag <hr>

Kode untuk garis horizontal dengan atribut tambahan adalah
<Hr align = “center” color = “green” size = “2” width = “80%”>

  • align harus ditambahkan pada kode jika lebar garis horizontal kurang dari lebar teks. Untuk atribut align adalah: left (kiri), center (tengah) atau right (kanan).
  • width harus ditambahkan ke kode jika Kita menginginkan garis horizontal dengan lebar kurang dari lebar teks. Untuk atribut ini dapat dinyatakan dalam piksel (misalnya 300px – Anda dapat melewati “px” setelah nomornya) atau dalam persentase (misalnya 50%).
  • color harus ditambahkan ke kode jika Kita menginginkan garis horizontal berwarna. Untuk atribut ini dapat dinyatakan sebagai nama warna (mis. red, green, blue, orange, purple dan lain-lain).
  • size harus ditambahkan ke kode jika Kita menginginkan garis horizontal yang lebih tebal. Nilai untuk atribut ini adalah 1, 2, 3, dll.
Artikel Terkait:  7 Trik Supaya Disetujui Google Adsense - Untuk Pemula

Catatan : Tag <hr> sama dengan <hr align = “center” size = “2” width = “100%”> dan di kebanyakan browser, hasil visual adalah garis horizontal dyang berwarna. Untuk size garis yang lebih besar, biasanya terlihat seperti bingkai persegi panjang, namun begitu Anda menambahkan atribut warna, warnanya akan terlihat.

Contoh 1

kode :

<hr align=”right” color=”orange” size=”3″ width=”500″>

Hasilnya seperti garis berikut :


Contoh 2

kode :

<hr align=”center” color=”#ff1100″ size=”5″ width=”60%”>

Hasilnya seperti garis berikut :



Contoh 3

kode :

<hr size=”5″>

Hasilnya seperti garis berikut :


Contoh 4

kode :

<hr size=”5″ color=”#999999″>

Hasilnya seperti garis berikut :


Contoh 5

kode :

<hr color=”green” width=”45%”>

Hasilnya seperti garis berikut :


Menambahkan Baris Horisontal dengan Tag HTML <div> 

Garis horisontal dapat ditata dengan menambahkan properti CSS yang sesuai, namun yang telah saya uji tidak menghasilkan hasil yang saya harapkan di kelima browser (IE9, Mozilla Firefox 12.0, Chrome, Opera 11.62 dan Safari 5.1.5 ), Terutama saat saya ingin memasukkan garis horizontal putus-putus.

Contoh 1 : Full Garis Lebar Horizontal

kode dashed (putus-putus) :

<div style=”border-top: 2px dashed #DB1200; margin-top: 1em; padding-top: 1em;”> </div>

Hasilnya seperti garis berikut :

Berikut Alternatif Kode Jenis Garis :

dotted
: Putus-putus kecil /burik dengan tebal garis 2px

solid : Garis padat dengan tebal garis 2px

double : Garis ganda dengan tebal garis 6px

groove : Alur dengan tebal garis 6px

ridge : punggungan dengan tebal garis 6px

Contoh 2 : Garis Horizontal Kiri

Kode :

<div style=”border-top: 2px dashed #0B5394; margin-top: 1em; padding-top: 1em; width: 400px“> </div>

Hasilnya seperti garis berikut :

Contoh 3 : Garis Horizontal Tengah

Kode :

<div align=”center”> 
<div style=”border-top: 2px dashed #38761D; margin-top: 1em; padding-top: 1em; width: 400px“> </div>
</div>

Hasilnya seperti garis berikut :

Contoh 4 : Garis Horizontal Kanan

Kode : 

<div align=”center”>
<div style=”border-top: 2px dashed #C27BA0; margin-top: 1em; padding-top: 1em; width: 400px“> </div>
</div>

Hasilnya seperti garis berikut :


keterangan :

  • 2px = Tebal garis
  • dashed (putus-putus) = Jenis garis
  • #DB1200 = Kode Warna garis
  • width : lebar yang dikehendaki



Artikel Terkait:  Cara Singkat Menambahkan CSS Custom ke WordPress

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *