Rounded Corners On Blog

Rounded Corners On Blog

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.