Cara Membuat Rounded Corners Pada Template Blogger

Posted by Unknown at 9:45 AM . Saturday, December 7, 2013

Labels: blogger, cara, corners, membuat, pada, rounded, template

Tutorial kali ini kita akan belajar membuat rounded corners pada template blogger, apa rounded corners? Rounded corners merupakan desain web atau blog baru yang sedang digemari saat ini karena kesannya yang menarik. Yang saya maksud rounded corners adalah membuat border atau garis lengkung pada web atau blog seperti contoh berikut:

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

Aspal