Warta Baraya

Membuat Kotak Dengan Sudut Lengkung
22 Agustus 2010

Membuat sebuah kotak dengan sudut lengkung, alias tak bersudut, sebetulnya sangat gampang. Kita tinggal otak-atik kode htmlnya saja, tergantung mau dimana kita bikin kotak, apakah di area postingan, sidebar ataupun footer.

Barangkali ada diantara sahabat yang belum pernah mencoba membuat kotak model seperti ini di blognya? Contoh realnya bisa dilihat di blog ini, jadi terlihat ada kesan rapi dan suasana teratur. Okelah, jika belum coba, mari kita ikuti langkahnya :

• Misalnya kita akan membuat kotak pada area postingan. Pada edit HTML, carilah kode :
  
  
  #main-wrapper {
  width: 407px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;
  background:#fff;
  margin:0px;
  padding:10px;
  
  /* fix for long non-text content breaking IE sidebar float */
  }
  
  
• Lalu tambah kode di bawah ini
  
  
  border:1px solid #c0c0c0;
  -moz-border-radius-topleft:5px;
  -moz-border-radius-topright:5px;
  -moz-border-radius-bottomleft:5px;
  -moz-border-radius-bottomright:5px;
  
  
• Sehingga kodenya jadi seperti ini :
  
  
  #main-wrapper {
  width: 407px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;
  background:#fff;
  margin:0px;
  padding:10px;
  border:1px solid #c0c0c0;
  -moz-border-radius-topleft:5px;
  -moz-border-radius-topright:5px;
  -moz-border-radius-bottomleft:5px;
  -moz-border-radius-bottomright:5px;
  /* fix for long non-text content breaking IE sidebar float */
  }
  
  
• Simpan dan lihat hasilnya.
  

Untuk membuat kotak di sidebar atau di footer, sama prosesnya dengan proses di atas. Taroh saja kode html di atas di bagian yang diinginkan.

Label: Modifikasi Template

0 komentar:

Poskan Komentar