Garis Melengkung Pada Kolom

Seperti janji saya pada pembahasan sebelumnya tentang membuat kotak postingan terpisah dan kebetulan ada pertanyaan dari salah seorang sobat yang bernama sadulur yang berkomentar pada tgl 19 mei lalu, isinya kira-kira seperti ini "makasih berbagi ilmu, ...kawan, tapi bagaimana cara membuat postingan garis melengkung pada sudut kolom agar tidak terlihat kaku". Thanks buat mas sadulur yang telah menanyakan hal ini.

Perhatikan kolom postingan blog milik saya, tampak kolom postingan terpisah-pisah dan membentuk garis lengkung pada sudut-sudutnya, bagus kan..
Tertarik dengan pembahasan ini ?? sipp..mari kita lanjutkan

1. Login ke Blogger dengan ID blogger sobat tentunya.
   
   
2. Klik Tata Letak
   
   
3. Klik Edit HTML
   
   
4. Cari kode h2.date-header {
   
   
5. Copy kode berikut tepat setelah kode diatas
   
   
   

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

   
   
   
6. Cari kode .post-body {
   
   
7. Kemudian copy dan letakkan kode berikut ini setelah kode tersebut.
   
   
   

   border-right:3px solid #0080FF; border-left:3px solid #0080FF;

   
   
   
8. lalu cari kode .post-footer { dan letakkan kode berikut dibawah kode tersebut.
   
   
   

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

   
   
   
9. Oke, sudah selesai..Simpan Template sobat.

Untuk kode yang saya tandai dengan warna merah adalah kode untuk warna border, sobat bisa menggantinya sesuai dengan keinginan sobat. Untuk kode warna-warna, sobat bisa melihatnya disini. Selamat mencoba !

Oleh : Dody FariaL Pada hari Minggu, Juni 07, 2009

Tweet

Berlangganan artikel terbaru via Email

Artikel Lainnya :