Cara Membuat Rounded Corners Pada Template Blogger -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Rounded Corners Pada Template Blogger, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel 3 kolom, Artikel Border, Artikel Tutorial Blogger, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Cara Membuat Rounded Corners Pada Template Blogger
link : Cara Membuat Rounded Corners Pada Template Blogger
Gambar dibawah ini

Cara Membuat Rounded Corners Pada Template Blogger

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

Demikianlah Artikel Cara Membuat Rounded Corners Pada Template Blogger

Sekianlah artikel Cara Membuat Rounded Corners Pada Template Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Cara Membuat Rounded Corners Pada Template Blogger dengan alamat link https://trikmitos.blogspot.com/2010/01/cara-membuat-rounded-corners-pada.html