Maksudnya, kita kan membuat efek melengkung pada tepi-tepian atau lebih tepatnya pada sudut sudut yang ada di blog kita..
ini bisa kita terapkan pada foto, box / kotak atau template kita.
untuk contoh bisa lihat dibawah ini.
puluthriau
Bahkan kita bisa membuat lingkaran.. Contoh
puluthriau
Jika ada yang tidak bisa melihat rounded pada kotak diatas, kemungkinan browser anda saat ini tidak mendukung code CSS tersebut, setahu saya memang ada beberapa browser yang tidak mendukung code itu.
Jadi, jika ada yang tertarik, maka perbaharui lah browser anda.
Sebenarnya, hal itu, bisa kita akalin / ada cara lainnya, contohnya menggunakan gambar (Lain Waktu)
Untuk yang tertarik bisa kita lanjutkan.
Gunakan code berikut ini,
border-radius:5px
maka akan terbentuk lengkungan sebesar 5 pixel, nah, itu code standarnya, untuk mencakup lebih banyak browser, tambahkan code berikut ini.
-moz-border-radius:5px;
-webkit-border-radius:5px;
kita bisa membuat lengkungan / rounded pada sudut terentu, contohnya kita akan memberi efek rounded corner pada sudut atas saja, maka codenya akan berubah menjadi seperti ini.
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
untuk lebih lengkapnya codenya seperti ini
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
Silahkan dicaoba masing-masing
Cara menempatkannya pada template blog kita?
kita bisa lihat pada contoh dibawah ini,
disini kita akan membuat rounded corner pada sidebar kita
Pada dasbor » Klik tata Letak » Edit HTML » cari kode seperti ini:
.sidebar{
background:#F00;
border:2px solid #FFF; }
Kemudian tambahkan code berikut dibawah code tadi:
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
Sehingga kodenya jadi seperti ini:
.sidebar{
background:#F00;
border:2px solid #FFF;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
}
Simpan template
Lihat hasilnya pada blog kita.
Selesai, Selamat Mencoba.
3 Responses to » Rounded Corners On Blog
wah bagus juga nih tutorialnya makasih sob ilmunya nih,..,.,.,.<!!
Sama Sama Sob
makasih sob, sy dah coba, dan berhasil
SAY SOMETHINGS . . .
Giliran Kalian Yang berkomentar, Jangan Malu-Malu.
Hubungi Saya Jika Ada Masalah . . .