Cara Membuat Garis dan Border di Blog

Jika dilihat dari bentuknya, Garis adalah gabungan dari titik-titik yang banyak, dalam dunia blogging seringkali kita mengenal garis sebagai line (dalam bahasa inggris), secara tidak kita sadari ternyata banyak sekali faktor-faktor pada tampilan blog yang melibatkan garis, seperti pada saat kita menggunakanya untuk membatasi tepi blog antara isi dalam dan outer blog, semua itu memerlukan garis untuk menjadi penegas antara 1 tempat dan tempat lainya.

Jika anda tanya, apakah manfaat garis di dalam dunia blog? sebenarnya tidak ada manfaatnya secara optimisasi untuk mesin pencari, melainkan hal ini berguna untuk "mempertegas" atau "membatasi" elemen-elemen pada blog, seperti halnya yang dapat anda lihat di blog ini, beberapa widget yang warnanya agar samar dengan background, maka akan saya berikan garis tepi agar pengunjung mudah membedakannya, selain itu, garis tepi juga membuat elemen-elemen di blog anda terlihat lebih rapi dan tersusun.

Lantas apa yang ada didalam benak kita mengenai perihal "Garis" ini? tentu kita akan bertanya tentang bagaimana cara membuatnya, sebenarnya sederhana saja, dalam blogspot kita dapat membuat garis dengan kode HTML, namun ada beberapa kode yang harus kita perhatikan dalam mengoperasikanya, karena sebenarnya garis itu sendiri dapat kita explore secara luas bentuknya, mulai dari putus-putus (dashed), titik-titik (dotted), sambung (solid), dan lain sebagainya.

Cara Membuat Border

Dibawah ini adalah contoh border pada suatu elemen:

 CONTOH ELEMEN
 Lirik Lagu Band Barat (Misalnya)
 aaaaaaaaa.....cacacacaca.....
 nananaaaa..... bababaaa..... 

Kode yang saya pakai pada elemen diatas adalah:

<div style="background:#cccccc;border: 2px  solid #808080; float: left; margin: 4px 0px 5px 0px; padding: 2px 0px; width: auto;">objek/elemen</div>

Keterangan:

• #cccccc = kode dari warna background isi border.
• border: 2px = 2px adalah kode yang menunjukkan ketebalan border, semakin kecil angka tersebut maka semakin tipis garisnya, begitu juga sebaliknya.
• solid = dalam bahasa indonesia artinya padat yang berarti garis akan selalu menyambung, ada juga perintah lainya untuk menampilkan model garis yang berbeda, dashed (putus-putus), dotted (titik-titik), dan lain sebagainya.
• #808080 = ini adalah kode yang menunjukkan kode warna, jadi jika kita ingin merubah warna dari garis tersebut, maka kita harus mengetahui apa kode dari warna yang kita inginkan tersebut.
• float: left = left adalah kode yang menunjukkan dimana letak garis tersebut, left (kiri) dan right (kanan),  misalnya jika anda memilih float: right, maka kode tersebut akan terletak/melayang di sisi kanan.
• 4px = kode yang menunjukkan spasi atau jarak dari border arah ke atas.
• 5px = kode yang menunjukkan spasi atau jarak dari border ke arah bawah.
• padding: 2px = 2px adalah kode yang menunjukkan spasi atau jarak dari garis border ke objek atau elemen yang diberi border.
• width: auto = lebar garis, sebenarnya anda bisa merubahnya ke dalam bentuk (px) dan (%), misalnya 430px, dan jika dalam bentuk persen misalnya 50% (lebar bordernya setengah dari lebar objek atau elemen yang diberi border), tetapi lebih baik jika diberikan (auto) saja, karena perintah tersebut akan langsung menyesuaikan lebar border dengan lebar objek elemen.
• objek/elemen : isi di dalam border itu sendiri.

Kode Warna : http://camex.wen.ru/Sampel/Warna.html

Tambahan: jika anda ingin memberi border hanya diatas, dikiri, dikanan, atau diatas elemen, maka anda cukup menambahkan kode right (disebelah kanan elemen), left (disebelah kiri elemen), top (disebelah atas elemen), dan bottom (disebelah bawah elemen), contohnya:

<div style="border-top: 2px solid #B8B8B8; float: left; margin: 4px 0px 5px 0px; padding: 2px 0px; width: auto;">objek/elemen</div>

Jadi anda cukup memberikan, -top, -bottom, -left, atau -right disebelah border. Hasil kode diatas akan menjadi seperti dibawah ini, yaitu border diatas (top).

 CONTOH ELEMEN
 Lirik Lagu Band Barat (Misalnya)
 aaaaaaaaa.....cacacacaca.....
 nananaaaa..... bababaaa.....

Cara Membuat Garis

Sebenarnya secara garis besar kode yang digunakan untuk membuat border dan garis hampir sama, hanya ditambahkan sedikit kote petunjuk, yaitu ditambahkan -top (atas) disebelah kode border.

Dibawah ini adalah kode garis lurus (solid):

<div style="border-top: 2px solid #B8B8B8; float: left; margin: 4px 0px 5px 0px; padding: 2px 0px; width: 100%;"></div>

Hasilnya seperti ini:

Dibawah ini adalah kode garis putus-putus (dashed):

<div style="border-top: 2px solid #B8B8B8; float: left; margin: 5px 0px 5px 0px; padding: 2px 0px; width: 100%;"></div>

Hasilnya seperti ini:

Dibawah ini adalah kode garis titik-titik (dotted):

<div style="border-top: 2px solid #B8B8B8; float: left; margin: 5px 0px 5px 0px; padding: 2px 0px; width: 100%;"></div>

Hasilnya seperti ini:

Keterangan: Untuk mengatur warna garis, ketebalan garis, lebar garis, spasi jarak kebawah garis, spasi jarak keatas garis, dll semua-nya sama dengan keterangan pada tutorial cara membuat border diatas.

Jika tutorial ini ada yang sedikit kurang jelas, anda bisa menanyakanya dengan cara meninggalkan komentar dibawah atau langsung menghubungi saya di muhammad.farhan.mf@gmail.com. Demikian informasi terbaru tentang Cara Membuat Garis dan Border di Blog, baca juga artikel menarik lainya seputar tutorial blog tentang membuat widget smooth sliding social media di blog, semoga bermanfaat, dan selamat mencoba.