8 Cara Membuat Border Blog

Seperti yang telah diketahui, umumnya setiap kali seorang blogger baru akan berhadapan dengan template yang memiliki ‘border’ atau garis batas dihampir seluruh elemen layout. Ini dapat diterapkan pada header, post body, sidebars, dan lain-lain. Seperti yang telah diketahui juga bahwa htmlpun dapat didukung oleh Cascading Style Sheet atau CSS. Blogger dapat dengan mudah menambahkan, mengubah, membuat style dan penyesuaian lainnya dengan menggunakan CSS.

Dibawah ini adalah properti-properti yang dimiliki oleh border berdasarkan jenisnya:

·         Border

·         Border-top

·         Border-left

·         Border-right

·         Border-bottom

·         Border width

·         Border-top-width

·         Border-left-width

·         Border-right-width

·         Border-bottom-width

·         Border color

·         Border-top-color

·         Border-left-color

·         Border-right-color

·         Border-bottom-color

·         Border style

·         Border-top-style

·         Border-left-style

·         Border-right-style

·         Border-bottom-style

Ada pula beberapa jenis nilai border style yang dapat dimasukkan seperti dotted, dashed, solid, double, groove, ridge, inset dan outset. Tapi, sebelum membuatnya, ada baiknya anda mengetahui dulu sintaks dari border. Lihat gambar berikut:

Penjelasan:

“Selector” merupakan elemen dari html yang akan diberi border, misalnya pada header, menubar, sidebar, image, body, dan lain-lain. Setiap deklarasi selalu terdiri atas sebuah properti dan sebuah value (nilai numerik). Dan, setiap properti merupakan atribut style yang ingin anda rubah, didalamnya juga terdapat value.

Untuk melakukan eksperimen diatas, ada banyak piranti yang bisa digunakan. Atau, blogger dapat langsung membuatnya on-line di blog lain sebagai blog test. Gambar ilustrasi diatas dapat dibuat menggunakan TextMate, Aptana Studio, Notepad++, atau yang lainnya. Untuk TextMate hanya berlaku untuk Mac, sisanya Windows. Berikut adalah ilustrasi sintaks dari penggunaan kode border selengkapnya:

#selector {border: 2px solid #000000;}

# selector {border: 2px dotted #000000;}

# selector {border: 2px dashed #000000;}

# selector {border-style: double;border-color: #000000;}

# selector {border-style: groove;border-color:#0000FF;border-width:4px;}

# selector {border-style: ridge;border-color:#FF00FF;border-width:4px;}

# selector {border-style: inset;border-color:#00FF00;border-width:4px;}

# selector {border-style: outset;border-color:#00FFFF;border-width:4px;}

# selector {border-style: hidden;}