Rabu, 11 Agustus 2010

Membuat garis lengkung pada sudut border

Para bloggers mungkin tidak asing lagi dengan namanya border, mungkin disetiap blog kita bisa menemukan adanya pemberian border. Namun selama pantauan saya dalam mengamati perkembangan blog-blog yang ada, saya jarang sekali menemukan adanya blog menggunakan garis lengkung pada sudut border. Saya tidak tahu apakah mereka sebelumnya sudah tahu bagaimana cara membuat garis lengkung border atau mereka sama sekali tidak tahu membuatnya? Nah,... jika kebetulan Anda belum bisa membuat garis lengkung ini, Anda dapat mengikuti tutorialnya dibawah ini.

Tetapi sebelumnya saya memberikan tutorialnya ada perlunya Anda juga harus membaca macam-macam border yang dimana akan Anda perlukan nantinya.

Tutorialnya sangat gampang sekali, jika Anda memperhatikannya.

1. Login ke www.blogger.com
2. Pilih Dashboard -> Tata letak -> Edit HTML
3. Sebagai contoh, saya akan menggunakan border dari posting. Anda cari kode yang mirip dengan ini :

.post {
margin:0px 0px 15px 0px;
padding:10px;
background: #FFFFFF;
border:1px solid #cccccc;
}
4. Ingat kode yang Anda cari tidak lah harus sama dengan diatas karena templates setiap orang berbeda-beda. Yang terpenting cari bagian .post {
5. Jika sudah ketemu Anda tambahkan kode dibawah ini tepat dibawah border:1px solid #cccccc;

Kode:
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;

sehingga menjadi:
.post {
margin:0px 0px 15px 0px;
padding:10px;
background: #FFFFFF;
border:1px solid #cccccc;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}

Ket:
-moz-border-radius-bottomleft:5px; = membuat lengkung bagian kiri-bawah
-moz-border-radius-bottomright:5px; = membuat lengkung bagian kanan-bawah
-moz-border-radius-topleft:5px; = membuat lengkung bagian kiri-atas
-moz-border-radius-topright:5px; = membuat lengkung bagian kanan-atas

6. Jika sudah klik tombon Simpan -> Lihat blog

Mulai sekarang Anda sudah tahu kan bagaimana membuatnya....
Semoga dari tutorial ini, Anda akan lebih semangat lagi dalam mengedit blog Anda sendiri karena kebanyakan orang membuat blog tinggal CP (copy-paste) template seseorang.

Tidak ada komentar:

Posting Komentar