0 Modifikasi Tampilan Template Dengan Ronded Corner

Membuat ronded corner pada template mungkin akan mempercantik tempilan dari blog itu sendiri di bandingkan hanya dengan menggunakan Kotak persegi saja tapi tentunya bukan berarti template yang menggunakan kotak persegi jelek , Untuk selera dan penilaian setiap orang tentunya berbeda-beda.

Ok langsung saja pada pokok pembahasan, kali ini saya akan memberikan tips cara merubah tampilan template anda dengan menggunakan ronded corner. Sebagai conton anda bisa lihat blog saya yang ini www.chulection.blogspot.com .

Sebelumnya Sebagai tambahan saya akan menjelaskan sedikit tentang bagian-bagian dasar dari template itu sendiri.

Bagian Bagian Dasar dari Template :

• Yang pertama Background : Ini merupakan lapisan paling bawah dari sebuah template.

• Yang kedua Outer Wraper : Ini merupakan lapisan kedua di atas background.

• yang ketiga Header - Main Wraper - Sidebar - Dan Footer : Ini merupakan lapisan paling atas dari sebuah template.

Header mempunyai posisi di bagian atas .
Main wraper mempunyai posisi di Bagian tengan untuk posting .
Side bar Biasanya disamping kiri atau kanan atau juga kiri dan kanan.
Dan fotter Ditempatkan paling bawah.

Untuk Tips kali ini saya mencoba memberikan tips membuat ronded corner pada bagian outer-wraper atau bagian diatas background dan di bawah main wraper .

Sekarang buka blog anda.
Masuk pada Tata Letak dan pilih Edit HTML.
Sekarang anda cari Kode html di bawah ini.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background:#fff;
border:1px solid #04B4AE;
width: 660px;
margin:15px auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
}

Kode diatas merupakan kode standar dari template minima. sekarang anda ganti kode di atas dengan kode di bawah ini.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background:#fff;
border:8px solid #04B4AE;
-moz-background-clip:-moz-initial; -moz-background-origin:-moz-initial; -moz-background-inline-policy:-moz-initial; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px;
width: 660px;
margin:15px auto;
padding:15px;
text-align:$startSide;
font: $bodyfont;
}

Sekarang coba previwe atau pratinjau terlebih dahulu, Kalau sudah cocock silahkan di simpan.
Anda bisa merubah lebar atau widht-y , warna background ataupun border nya sesuai keinginan anda.Selamat mencoba.

Tweet

Komentar →