Macam Jenis Garis Border Template Blog

 Sering kita melihat pada blog tetangga yang tampilannya rapi dan tertata karena tulisannya menggunakan garis-garis atau bingkai. Istilah tepatnya menggunakan border  tepi. Nah disini saya akan berbagi tips cara membuat garis/kolom didalam postingan dengan memakai kode HTML.

1. Cara sederhana membuat garis horizontal didalam postingan 
yaitu dengan Scrpt berikut ini:

<hr color="Black" width="480px" />

Hasilnya:

---

Warna dan lebar garis bisa diganti sesuai selera

2. Membuat Style Border didalam postingan blog.
Terdapat beberapa macam variasi border dan umumnya para blogger menggunakan diantara 5 macam tampilan berikut :

5 varian garis bingkai (style border)

ini adalah contoh tampilan dari dotted

Script aslinya yaitu:

<div style="border: 3px dotted rgb(0, 0, 0); padding: 5px; background: rgb(242, 242, 242) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

ini adalah contoh tampilan dari dotted

</div>

  Selain bergaya dotted, sobat juga bisa pakai dashed, double, solid, groove, ridge, inset dan outset (lihat gambar diatas)

Apabila sobat tidak ingin berhenti pada contoh diatas, sobat juga dapat menghias tulisan dengan memberikan kode warna sebagai background atau latar belakang. Caranya yaitu menyisipkan script sebelum tulisan/kode yang ingin diberi bingkai kemudian tutup dengan script. Lihat contoh berikut ini:

Kode Script:

<div style="padding: 5px; background: transparent url(http://i466.photobucket.com/albums/rr21/meeftha/NU.jpg) repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 500px; height: 50px;">

Tulis teks disini dan akan muncul background

</div>

Hasilnya :

Tulis teks disini dan akan muncul background

Di dalam garis bingkai terdapat teks dan background, silahkan ubah url gambar sesuai denan gambar pilihanmu..