Cara membuat garis border pada tempelat blog

Cara membuat garis border pada tempelat blog Garis (border) merupakan bagian utama dalam design tampilan suatu blog, garis membentuk bagian-bagian dalam suatu tampilan blog untuk memisahkan tujuan
dari bagian tersebut, seperti halnya pada bagian post yang terdiri dari judul - isi - dan keterangan, setiap bagian tersebut bisa dipisahkan dengan garis untuk memberi maksud dari tiap bagian tersebut.

Dari beberapa jenis garis border yang familiar dan umum kita jumpai adalah garis DOTTED (garis titik-titik), SOLID (garis lurus), DOUBLE (garis lurus double), selain dari ketiga macam garis border tersebut masih ada beberapa jenis garis yang bisa kita pakai untuk mendesign tampilan blog supaya mempunyai ciri berbeda dengan tampilan lainnya.

Dalam penggunaanya dalam template, garis-garis border tersebut dalam kode css-nya adalah sebagai berikut border:2px solid #dedede;

2px menunjukan ketebalan dari garis tersebut, semakin besar angkannya, semakin tebal garis border tersebut, solid menunjukan jenis garis border, sedangkan #dedede merupakan kode warna untuk memberi warna garis border.

Perintah border dalam kode css akan membentuk garis kotak yang didalamnya terdapat objek teks atau bagian template, dengan angka ketebalan border 2px akan menghasilkan ketebalan yang sama pada setiap sisi garisnya. Untuk memberikan ketebalan yang berbeda pada setiap sisi garisnya, kita harus memberi keterangan perintah berbeda pada setiap sisi garis tersebut, seperti border-top untuk garis bagian atas, border-bottom untuk garis bagian bawah, border-left untuk garis bagian kiri dan border-right untuk garis bagian kanan, sebagai ilustrasi dalam penulisan script-nya sebagai berikut :
border-top:2px solid #dedede;
border-bottom:9px dotted #eeeeee;
border-left:1px dashed #000000;
border-right:5px double #cccccc;
Kode tersebut diatas menunjukan perbedaan pada setiap sisi-sisinya yang berbeda, baik itu ketebalan garis, jenis garis dan warna garis.

Untuk mengetahui macam jenis garis border, saya ilustrasikan dalam bentuk contoh dengan ukuran ketebalan garis 15px dan warna #72C7F8 untuk mengetahui perbedaan dari jenis-jenis garis border tersebut.

SOLID

DOTTED

DASHED

DOUBLE

GROOVE

RIDGE

INSET

OUTSET

Setelah mengetahui jenis-jenis garis border,  bisa lebih menonjolkan garis-garis border tersebut untuk design tampilan blog dan menggabungkan efek backround. Jika belum mengetahui cara Membuat Efek Backround Pada Warna Background, bisa mengetahuinya dengan meng-klik link ini cukup sekian semoga bermanfaat

Komentar

  1. terus meningkatkan kualitas design blog, terimakasih telah share :) http://mypatriotmuslim.blogspot.com/

    BalasHapus
  2. owh, gitu ya, ada banyak juga ya jenis border ? ☺

    BalasHapus
    Balasan
    1. Kuarang lebih nya seperti itu sob trims atas kunjungan nya salam

      Hapus
  3. makasih atas infonya gan,,,
    folow balik http://irhanz.blogspot.com/

    BalasHapus
  4. thanks ats infonya, sgt bermanfaat. salam kenal.

    BalasHapus
  5. mantab mas, sudah saya coba dan berhasil, lihat di sidebar footer postingan saya :D hehehhe

    BalasHapus
  6. mksih Gan.. Artikelnya... langsung coba..hehe

    BalasHapus
  7. Maaf mo nanya dulu baru nyoba Gan, bagaimana cara mengaplikasikan penambahan border itu pada widget yang ada pada sidebar? Misalnya ana mau agar widget popular post yang ada di sidebar kanan blog ana mau dikasih garis putus-putus pada setiap barisnya. Mohon pencerahana Gan, maklum katro banget. Makasih banyak

    BalasHapus
  8. Keren ,sudah saya terapkan diblog saya...

    BalasHapus

Posting Komentar