Tuesday, March 20, 2012

Properti Garis Pinggir (Border) Blog

pencil editUntuk mengedit garis pinggir pada template blog, baik itu untuk menambah, mengurangi atau pun mungkin merubah jenis garis, warna dan lain-lainnya, maka ada baiknya untuk mengetahui terlebih dahulu mengenai properti yang ada pada kode html garis pinggir atau border pada template tersebut.

Ketika masuk ke Blogger –> Rancangan –> Edit HTML dan melakukan pencarian (dengan menekan Ctrl + F) untuk kata border, maka akan dapat dijumpai banyaknya kata border pada template blog.

Secara umum kode html garis pinggir atau border ini ditulis seperti berikut:
border:1px solid $bordercolor;

1. border merupakan pernyataan atau seting untuk membuat garis pinggir pada ke 4 sisi yang ada. Selain "border", ada juga "border-top" untuk membuat garis pinggir pada sebelah atas saja, "border-bottom" untuk membuat garis pinggir pada sebelah bawah saja, "border-left" untuk membuat garis pinggir pada sebelah kiri saja dan "border-right" untuk membuat garis pinggir sebelah kanan saja. border ini mempunyai 3 properti yaitu border-width, border-style dan border-color.
 
2. border-width merupakan properti pertama dari border untuk menyatakan tebal garis pinggir yang dibuat. Besaran atau nilainya dapat dinyatakan dalam "px" (pixel) seperti terlihat diatas, atau dapat juga dinyatakan dengan kata umum yang dipakai untuk menyatakan ketebalan. Nilai ketebalan garis pinggir yang dapat digunakan adalah:
1px, 2px, 3px… dan seterusnya untuk garis yang lebih tebal lagi
thin untuk garis yang berukuran tipis
medium untuk garis yang berukuran sedang; dan
thick untuk garis yang berukuran tebal

3. border-style merupakan properti kedua untuk menyatakan gaya atau bentuk garis pinggir yang dibuat. Gaya atau bentuk garis pinggir yang dapat digunakan adalah:
none atau tanpa garis pinggir
hidden untuk garis pinggir yang disembunyikan
dotted untuk garis pinggir dengan bentuk titik-titik
solid untuk garis pinggir dengan bentuk garis lurus
dashed untuk garis pinggir dengan bentuk garis putus-putus
double untuk garis pinggir dengan 2 garis lurus (dimana nilai border-width setidaknya 3px keatas untuk dapat terlihat adanya 2 garis lurus tersebut)
groove untuk garis pinggir dengan gaya seolah-olah template mempunyai bingkai
ridge merupakan gaya garis pinggir yang sama dengan groove hanya saja berbeda arah
inset untuk garis pinggir dengan gaya seolah-olah template masuk kedalam
outset untuk garis pinggir dengan gaya seolah-olah template timbul keluar

4. border-color merupakan properti garis pinggir terakhir yang menyatakan warna garis pinggir yang dibuat. Secara default, atau bawaan dari 'sana'nya, warna garis pinggir pada template di blogger dinyatakan dengan $bordercolor yang merupakan variabel dari "Border Color" yang mana dapat dirubah sesuai dengan keinginan.  Nilai atau variabel warna yang dapat digunakan pada garis pinggir adalah misalnya:
#ffff00 untuk warna kuning dalam kode warna hexadecimal; dan
rgb(255,255,0) untuk warna kuning dalam kode warna RGB (Red-Green-Blue)
catatan: untuk mengetahui kode warna hexadecimal atau RGB lain, dapat melihat di http://htmlcssguides.com/web-design-tool/kode_hexadecimal_rgb.php

sumber: http://tips-for-new-bloggers.blogspot.com/2007/09/add-or-remove-borders-in-css-templates.html

*****

Sekarang setelah mengetahui properti garis pinggir atau border yang ada, maka langkah selanjutnya untuk merubah garis pinggir sesuai dengan keinginan akan menjadi lebih mudah.

Posting mengenai garis pinggir:
1. Membuat Garis Pinggir pada Blog
2. Membuat Garis Pinggir pada Kolom Posting

Selamat mencoba :-)

No comments:

Post a Comment