Membuat Garis Pembatas Horizontal/Vertikal Di Blog Menggunakan HTML

Cara Membuat Garis Pembatas Di Blog Menggunakan HTML. Garis Pembatas Mendatar atau juga istilah lainnya disebut garis horizontal ,garis itu ada dua kategori yang pertama yaitu garis Horizontal dan yang ke dua garis Vertikal, apa bedanya garis Horizontal dan Vertikal?

Pixabay.com

Garis Horizontal adalah garis yang mendatar atau melintang, untuk contohnya bisa lihat dibawah ini 

---

Sedangkan untuk garis Vertikal adalah garis yang tegak lurus menjulang ke atas, contohnya seperti dibawah ini

Pembuatan garis Horizontal atau Vertikal ini kebanyakan dalam tujuan untuk merapihkan tampilan di setiap postingan atau bisa juga untuk merapikan tampilan template pada blog dan juga wordpress.
Kita langsung saja ke Cara Membuat Garis Pembatas Di Blog Menggunakan HTML

Membuat Garis Horizontal Atau Mendatar
Caranya cukup simple untuk membuat garis Horizontal biasa atau default kalian hanya memasukan kode dibawah ini pada mode HTML

<hr/>

Hasil :

---

Garis Horizontal Panjang Setengah Dari Kolom Postingan

<hr width="50%" />

Hasil :

---

Atau

<hr align="left" width="200" />

Hasil :

---

Membuat Garis Horizontal Berwarna
Untuk membuat garis berwarna kalian harus memasukan kode cssnya terlebih dahulu pada template jika tidak hasilnya akan berwarna hitam polos seperti warna garis yang di atas, berikut kode cssnya dan masukan tepat diatas kode ]]></b:skin>

 /* Garis Horizontal Carakuy.id */
hr {border-bottom:dotted 1px #cccccc; border-top:0px;border-left:0px;border-right:0px;}
.carakuy { width: 100%; height:2px; overflow:hidden; position:relative; top:0px; left:0px ;}
.carakuy div{ height:2px; width:100%; float:left;}
.blue{background-color: #327EA3;}

Kemudian masukan kode dibawah ini pada postingan ataupun dalam template, jika pada postingan pastikan sudah pada mode HTML terlebih dahulu

<div class="carakuy">
<div class="blue"></div>

<div>

Hasil :

Note : Untuk merubah warnanya kalian harus menambahkan kode css warna terlebih dahulu tepat dibawah kode css yang sudah di beri warna merah diatas contoh jika kalian ingin mengganti menjadi warna merah tambahkan dulu kode css warna merah ini .red {background-color: #FF0000;} dan untuk penempatannya kalian hanya mengganti dari

<div class="carakuy">

<div class="blue"></div>

<div>

Menjadi

<div class="carakuy">

<div class="red"></div>

<div>

Untuk kode-kode warna HTML bisa kalian lihat di Kumpulan Kode Warna HTML
Baca Juga : Cara Agar Address Bar Browser Berubah Warna Sesuai Template
Cara Membuat Garis Vertikal
Masukan kode HTML dibawah ini, jika kalian memasukan kode dibawah ini pada postingan harus pada mode HTML terlebih dahulu jangan mode Compose.

<div style="border: 1px #ff0000 solid; height: 250px; width: 0px;">

Hasil : 

Note : Jika kalian ingin mengganti warna , gantikan kode warna di atas yang diberi warna merah dengan kode warna yang kalian inginkan pilih warnanya Disini.

Untuk mempertebal garis bisa kalian ganti angka nominal border yang diberi warna biru, semakin bertambah nominal angka semakin tebal garis dan jika ingin menambah tinggi garis bisa kalian tambahkan nominal angka height yang diberi warna oranye.

Kalian bisa berexperimen sendiri dengan menggabungkan beberapa atribut agar tampilan garis di atas semakin elegan.

Untuk lebih jelasnya silahkan lihat pengertian Tag Attribut HTML dibawah ini

Align = Untuk menentukan posisi garis pemisah, perintahnya left, right, atau center.

Color = Untuk menentukan warna garis.

Width = Untuk menentukan lebar dari garis bisa juga berupa pixsel (px) atau persen (%) dari lebar halaman posting.

Height = Untuk menentukan tinggi garis

Border = Untuk memberikan perintah tebal pada garis
Baca Juga : Alternatif Google Adsense Terbaik Dan Membayar Lebih
Kode garis Horizontal dan Vertikal diatas bisa di tempatkan pada postingan mode HTML, dalam template atau bisa juga pada Widget dengan menggunakan fitur JavaScript/HTML.
Demikian dari saya tentang Cara Membuat Garis Pembatas Di Blog Menggunakan HTML ini, Semoga bermanfaat.

Rewritter: Alber