Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

Post ini diterbitkan pada : Thursday, March 5, 2009

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… Big Hug

Border Lengkung


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..? Happy

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.. Wave


Do you like this post? You can share it with your community..
Dapatkan update artikel lewat email

Artikel Terkait

18 comments:

March 6, 2009 at 3:19 PM Visitor
Anonymous said...

bagus juga...

March 7, 2009 at 7:00 AM Visitor
Anonymous said...

thanks bos.. akhirnya terjawab juga tanya2 ku... hehe.. mantaabb.. langsung di test..

April 8, 2009 at 5:54 AM Visitor
Anonymous said...

Udah lama nih nyari cara buat bikin garis tepi jadi melengkung.
Akhienya dapet juga...
Thks for your informative and applicative articles.

aduuhh sebenarnya pengen banget pasang border melengkung, tapi sayang semua kodenya gak ada . . .

help me!!!

Uhuy boleh dicoba neh, thanks ya coy..

tulisan .post-body {
tidak ada, bagaimana cara meletakkan kode dibawah ini
border-right:3px solid #c0c0c0;
border-left:3px solid #c0c0c0;
thanks ya

Kalau memisahkan antar posting dengan garis batas gimana ya?
salam kenal

sip thanks gw pasang di blog gw ,
tapi di IE ga ngaruh ye om ,klo di firefox oks banget, , ,
begimane nih?

tips ok bgt,tp pas gue coba knp ada garis yang terpotong ya

Minta izin pake templatenya yah bro,,
Mw tanya neeh,
gmna cara membuat spasi antar widget yg satu dengan yg lain, sperti punya mu itu..

code itu bermasalah di browser internet explorer (ngga jalan). lliat triknya di http://panji.co.nr

kayaknya ini bisa bermanfaat! thank you.

Klu di Lihat Pakai Browser Ponsel/hp G Kelihatan Sama Sx boss...

mantep n keren nih tutorial....

Baguuuuuuuuuuuussssssssss............

bro... udh w coba kok jd gini ya.... yang melengkung cuma di bagian date headernya doank...
aq taruh kode di bwh post-body n post footer ko ga ngaruh ya...
cb cek bro....
http://belonglifelearner.blogspot.com

Dah Saya coba. Trims tipsnya. Silahkan kunjungi rumah saya.

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra