Cikgu Kacamata: Buat Border Pada Sidebar Blogger

Dalam tutorial-tutorial yang lain, CK ada menerangkan cara-cara untuk Membuat Border Pada Ruangan Post, Membuat Border Pada Post Body dan Membuat Border Pada Main Blog. Tutorial kali ini CK hendak menunjukkan pula cara-cara hendak menambah border pada Sidebar Gadget.

Langkah-langkahnya:

1. Pilih "More options"

2. "Template" dan klik butang "Customise"

"Copy" kod di bawah:

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

Jika hendak lengkungkan keempat-empat penjuru border:

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

Jika hendak lengkungkan beberapa penjuru 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;
}

Tambah background color dalam border:

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

Nota:

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 merun:
Untuk menukar warna background dalam border

*klik untuk mendapatkan kod-kod warna lain

3. Pada "Blogger Template Designer", klik butang "Advanced"

4. Scroll bawah sikit dan pilih "Add CSS"

5. Pada bahagian "Add custom CSS", "Paste" kod tadi dalam kotak berwarna merah dan jangan lupa TEKAN ENTER

6. Kemudian "Apply to Blog"

Siap!

*sekiranya anda ingin kembali mengubah kod-kod ini dalam kotak Add custom CSS dan anda dapati kod-kod tersebut telah tiada, jangan panik...anda cuma perlu paste sahaja kod-kod ini dalam kotak Add custom CSS seperti biasa

Sila Share Post CK Ini Sekiranya Anda Suka

Dapatkan Widget Ini!

Unknown12 June 2013 at 13:07

Jika kod tu masih ada dlm kotak CSS, Aiza tambah kod ni: "background:#FF00FF;" di atas tanda "}".

Ia akan jadi seperti:

background:#FF00FF;
}

Keseluruhan kod utk buat border pada post (kod ni termasuk penjuru lengkung):

.post {
margin:0 0 45px 0;
padding-top:5px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border: 2px dashed #cccccc;
border-radius:15px;
background:#FF00FF;
}

*nota: Aiza boleh ubah warna background ikut citarasa sendiri dengan ubah ni: #FF00FF...

Mizz Aiza12 June 2013 at 15:53

terima kasih CK.. alhamdulillah, memang menjadi la.. :D

Unknown13 June 2013 at 02:24

Alhamdulillah...cayok...cayok (hehe, pinjam ayat org)

Unknown15 June 2013 at 05:11

Kira yg ni CK permudahkan sikit sbb takyah edit dlm Edit HTML tu. Takpe kalau ade apa2 pertanyaan sila ajukan, insyaAllah mana yg CK leh bantu, CK akan usahakan :)

Ruzana Ibs2 July 2015 at 15:44

...& kalau taknak garisan titik putus tu.. nak buat macamana?
Selain itu, tajuk utk setiap side bar tu nak warna lain dari kotak isi dia.
TQ in advance

36 Buat Border Pada Sidebar Blogger

36 comments: