Membuat Garis Lengkung Pada Border

Membuat blog yang indah dan sedap dipandang oleh mata pastinya menjadi tujuan dari teman-teman blogger.. Karena saya lebih menyukai tampilan blog yang simpel dan tidak berat loading pagenya,akhirnya saya mengakalinya dengan efek yang lebih segar dan rapi untuk setiap kolom di blog saya ini.Nah,sesuai dengan janji saya di postingan terdahulu mengenai cara membuat tampilan post terpisah . Dalam posting kali ini,kita akan belajar bagaimana cara membuat efek lengkung pada border.contohnya bisa anda lihat di garis tepi kolom post ini.. tertarik untuk membuatnya juga..??.Check this out…

1. Login ke blogger dengan account anda.Lalu ke TATA LETAK –> EDIT HTML.

2. 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. Cari kode .post-body { , Lalu letakkan kode di bawah ini setelah kode tersebut.

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

4. Sudah..??,sekarang 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. Simpan kerja anda.

6. Nikmati hasil pekerjaan anda barusan dengan mengklik tab Lihat Template.. sekarang kolom posting anda sudah lebih menarik bukan..??^^

(NB: kode berwarna hijau adalah warna dari border.Pada contoh ini,saya memakai kode warna abu-abu.Anda dapat mengkreasikan warna anda sendiri.Lihat kode warna disini)

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

• Selesai deh… mudah kan..?

Tutorial berikutnya,kita akan membahas mengenai cara mudah membuat banner blog animasi dengan Photoshop dan Adobe Imageready.Contoh sederhana dari efek animasi tersebut dapat anda lihat pada banner Do-Follow blog di bawah post ini.Mau yang banner yg lebih wuah..?? next post yah.. ^^

 

See u..