Tutorial : Create border for sidebar widget

Salam. Ahha, tahun baru ni saya akan upgrade blog saya sedikit demi sedikit. Based on hasil review rakan-rakan blogger sebelum ni. Yang latest saya dah create border pada widget sidebar saya dan ternyata lebih kemas dan terletak elok dalam box memasing. TQ to Cikgu Kacamata yang memberi panduan untuk buat border ni. Memang bagus blog Cikgu Kacamata ni. Macam-macam tutorial ada!=)

Nak tahu macam mana saya buat? Jom follow step-step berikut :

1. Seperti biasa pergi ke dashboard dan select 'Template'

2. Klik Customize. Bukan klik Edit HTML tau.  

3. Akan keluar Blogger Template Designer macam kat bawah ni. Klik Advance > Add CSS > Akan keluar kotak putih then nanti kita akan copy paste code di situ.

4. Copy dan paste code berikut dalam kotak putih tersebut :

.sidebar .widget {
border:2px dashed #cccccc;
padding:5px;
}

5. Anda boleh kreatifkan border anda dengan meng'adjust' code tersebut seperti berikut :

Untuk melengkungkan semua penjuru border :

.sidebar .widget {
border:2px dashed #cccccc;
padding:5px;
border-radius:15px;
}

Untuk melengkungkan beberapa border :

.sidebar .widget {
border:2px dashed #cccccc;
padding:5px;
border-top-right-radius:15px;
border-top-left-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:15px;
}

Untuk tambah background pada border : 

.sidebar .widget {

border:2px dashed #cccccc;

padding:5px;

background:#999999;

}

Rujukan:

Kod warna merah: Untuk menambahkan/mengurangkan ketebalan border

Kod warna biru: Untuk menukar jenis garisan border *klik untuk mendapatkan jenis-jenis garisan border

Kod warna hijau: Untuk menukar warna garisan border *klik untuk mendapatkan kod-kod warna lain

Kod warna ungu: Untuk menambah/mengurangkan jarak pada bahagian atas dan bawah border

Kod warna pink: Untuk menambahkan/mengurangkan panjang lengkung pada semua penjuru border

Kod warna aqua/cyan: Untuk menambahkan/mengurangkan lengkung dan panjang lengkung bagi beberapa penjuru border. Set pada nilai "0" untuk tidak mempunyai lengkung

Kod warna maroon: Untuk menukar warna background dalam border *klik untuk mendapatkan kod-kod warna lain

6. Dah setel copy paste dan adjusting? Tekan ENTER dan APPLY TO BLOG. Siap!

Selamat mencuba ya!=)

Nota : Cara copy ayat dari blog saya adalah dengan menekan Ctrl+C. Sebab right click pada blog saya disable. Harap maklum. 

Misya : Tak suka serabut.