. Berkreasi pada Border Blog | Catatan Si Virgo Girl

 Subscribe in a reader

Berlangganan gratis Via Email Di bawah ini

Friday, November 18, 2011

Berkreasi pada Border Blog

Beberapa hari yang lalu kembali sobat blogger bertanya pada saya mengenai kode ssc border lengkung, border memiliki fungsi untuk memberi batas/garis (seperti) pada suatu bidang/box/tag html. Garis ini sangat bagus yang menjadikan blog kita tampak lebih indah dan berkesan.

Garis lengkung ini bekerja dimana saja, di sidebar, footer, header, dan juga bagian posting. Contohnya bisa sobat lihat pada gambar di bawah ini:

Border Lengkung
 
Berikut bagian-bagiannya kode CSSnya:
  • -moz-border-radius => ini akan membuat segala sudut jadi melengkung, baik itu kiri atas, kiri bawah, kanan atas dan kanan bawah
  • -moz-border-radius-bottomright => ini membuat garis melengkung kanan bawah
  • -moz-border-radius-bottomleft => ini di gunakan untuk membuat garis kiri bawah melengkung
  • -moz-border-radius-topright => ini untuk garis melengkung kanan atas
  • -moz-border-radius-topleft => ini untuk garis melengkung bagian kiriatas
Bagaimana? Tertarik untuk membuatnya? Silahkan ikuti langkah di bawah ini:

1.      Login ke blogger dengan account anda.Lalu ke TATA LETAK –> EDIT HTML.
2.      Jika sobat ingin headernya menggunakan garis lengkung, maka cari kode h2.date-header { , Lalu letakkan kode di bawah ini setelah kode tersebut.

border-left:3px solid #c0c0c0;
border-right:3px solid #c0c0c0;
border-top:3px solid #c0c0c0;
border-bottom:0px solid #c0c0c0;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;

3.      Jika garis lengkunganya berapa pada postingan, maka cari .post-body { , Lalu letakkan kode di bawah ini setelah kode tersebut.

border-right:3px solid #c0c0c0;
border-left:3px solid #c0c0c0;

4.      Jika ingin pada footer, maka cari kode .post-footer { , Lalu tambahkan kode di bawah ini setelah kode tersebut.

  border-left:3px solid #c0c0c0;
  border-right:3px solid #c0c0c0;
  border-top:0px solid #c0c0c0;
  border-bottom:3px solid #c0c0c0;
  -moz-border-radius-bottomleft:15px;
  -moz-border-radius-bottomright:15px;

5.      Untuk mengganti border pada kolom sidebar,anda hanya perlu menempatkan kode dibawah ini setelah kode .sidebar .widget {

border:1px solid #c0c0c0;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px

6.      Simpan.

Ket : Warna hijau adalah warna dari border dan sobat dapat mengkreasikan warna anda sendiri.

Selesai deh… mudah kan..!!!

12 comments:

Kalau membuat bayangan di belakang border gimana non??

banyangan yga gimana?

This comment has been removed by a blog administrator.

effect shadow di belakang kotak

kalau kita buat border-radius itu kan cekungan pada sudut kotak
buat border kotak ini mempunyai sebuah bayangan non...

tau gak cara nya non??

ooo... effek bayangan pada border..!!!

tunggu aja postingan'y.. :D

kalo mau cari referensi design blog... pasti aku kesini. nice inpoh :)

thanks mas bro..
ini nih yang saya cari..
soalnya saya lagi design design blog sendiri....
hehee :)

itu di pastekan diatas kode h2.date-header { , atau di bawahnya?

maaf saya tdi tidak melihat
sekali lagi maaf

 

My Followers

Page Like

Copyright© 2011 Catatan Si Virgo Girl | Template Blogger Designer by : Utta' |