Cara Membuat Rounded Corners Pada Template Blogger

Hanya saja tidak semua browser bisa membaca perintah ini, sebagai solusinya kita bisa menggantinya dengan image.
Nah cara membuat rounded courners: mudah saja kita cukup menambahkan kode berikut :

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;

Yang berwarna biru dapat diedit sesuai dengan bagian border yang ingin kita buat melengkung dan besar pixel yang kita inginkan.
Contohnya kita ingin membuat border pada main (tempat menulis postingan) dan sidebar (tempat mengisi ragam widget) menjadi melengkung caranya:

• Pada dasbor>>> Klik tata Letak>>> Edit HTML>>> cari kode seperti ini:

.sidebar .widget, .main .widget {
  background:#fff;
  margin:0 0 1.5em;
  padding:0.5em;
  border:1px solid #C94093;  }

• Kemudian tambahkan kode berikut dibawah kode tadi:

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;

• Sehingga kodenya jadi seperti ini:

.sidebar .widget, .main .widget {
  background:#fff;
  border:1px solid #C94093;
  margin:0 0 1.5em;
  padding:0.5em;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px; }

• Simpan template

Lihat hasilnya pada blog sobat.
Kalau mau yang lebih menarik dan instant langsung aja ke spiffy corners dan spiffy box

Semoga bermanfaat