Tutorial Rounded Corner

Hari ini saya ingin menunaikan hajat satu blogger ini yang telah memohon tutorial "ROUNDED CORNER" atau dalam bahasa melayu bucu melengkung. Tutorial pada kali ini senang sahaja. Dengan bucu yang melengkung, blog kita akan kelihatan lebih menarik.

Kalau anda semua masih tidak faham apa itu corner dan dimana letaknya, sila tengok gambar di bawah ye ^_^ !


SEBELUM

SELEPAS


Tanpa membuang masa ayuh kita tengok tutorial ini.

Step 1
Login Dashboard >> Design >> Edit HTML

Step 2
Cari kod #outer-wrapper {. Tekan CTRL + F untuk memudahkan pencarian. Kalau tak jumpa sebijik kod macam di bawah

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {

Cuba cari kod #content-wrapper {. Kalau anda jumpa kod dia lebih kurang macam ni

#content-wrapper {
margin: 0 2%;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 5px solid $borderColor;
border-top: 0;
-moz-border-radius: 50px 50px;
border-radius: 50px 50px;

Terus ikut setep ketiga.

Step 3

-moz-border-radius: 50px 50px;
border-radius: 50px 50px;

Copy kod diatas dengan menekan CTRL + C dan pastekan di BAWAH kod pada Step 2

Siap ! Tekan preview dulu then baru save, sebab takut berlaku kecacatan ^_^. Semoga Berjaya !