Cara Membuat Garis Lengkung Pada Border

Border adalah salah satu property css, border memiliki fungsi untuk memberi batas/garis(seperti) pada suatu bidang/box/tag html. Nah pada border ini kita akan mempelajari cara membuat garis lengkung pada border. Garis ini sangat bagus yang menjadikan blog kita tampak lebih indah dan berkesan.

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

Atau

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. 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..??^^
(Kode berwarna hijau adalah warna dari border.Pada contoh ini,saya memakai kode warna abu-abu. Anda dapat mengkreasikan warna anda sendiri. (baca: Tabel dan Kode Warna))

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

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Hacks

• Cara Membuat Permalink di Blogspot
• Cara Memasang Tweetmeme di Setiap Postingan
• Membuat Navigasi Ala Google di Blogspot
• Cara Manipulasi Jumlah Komentar
• Cara Menambah Emotion Pada Kolom Komentar
• Merubah Warna Header Pada Blog
• Menambahkan Elemen Baru di Bawah Header
• Cara Membuat Navigasi Halaman Bernomor

Blog

• Ribuan Backlink Gratis dari IMTalk
• Cara Memasang Tweetmeme di Setiap Postingan
• Cara Mendaftarkan Blog ke DMOZ
• Cara Membuat Short URL Google Plus
• Cara Daftar Google Plus (Google+)
• Google Update Pagerank Juli 2011
• Cara Menghapus dan Mengecek Broken Link Pada Blog
• Apa itu Google Plus (Google+) ?
• Tips Menghadapi Komentar Negatif
• Menambah Meta Tag Untuk Perkuat Postingan Kontes SEO
• Kontes SEO, Berbahaya!
• Pentingnya Menjawab Setiap Komentar di Blog
• Kenali Pengunjung Blog Anda
• 10 Artikel Terbaik Bulan Juni 2011
• Metode On Page dan Off Page SEO
• Cara Membuat Link Internal di Setiap Postingan
• Siapa Pengunjung Setia di Blog Anda?
• Tips Mendapatkan Pengunjung Setia di Blog
• Favicon Generate - Fitur Baru Blogger
• Cara Menambah Tombol Google +1
• DAW-XP Toolbar - Akses Cepat Menuju DAW-XP
• Cara Membuat Toolbar Alexa Sendiri
• Cara Memasang Alexa Widget
• Manfaat Alexa Toolbar
• Apa itu Alexa Rank?

Anda sedang membaca artikel tentang Cara Membuat Garis Lengkung Pada Border dan anda bisa menemukan artikel Cara Membuat Garis Lengkung Pada Border ini dengan url http://daw-xp.blogspot.com/2011/04/cara-membuat-garis-lengkung-pada-border.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Garis Lengkung Pada Border ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Garis Lengkung Pada Border sumbernya.