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:
2. "Template" dan klik butang "Customise"
"Copy" kod di bawah:
.sidebar .widget {
border:2px dashed #cccccc;
padding:5px;
}
border:2px dashed #cccccc;
padding:5px;
}
.sidebar .widget {
border:2px dashed #cccccc;
padding:5px;
border-radius:15px;
}
border:2px dashed #cccccc;
padding:5px;
border-radius:15px;
}
.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;
}
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;
}
.sidebar .widget {
border:2px dashed #cccccc;
padding:5px;
background:#999999;
}
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
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
nak tanya soalan.. macam mana nak buat bagi background colour untuk post entry tu berada dalam border? aiza buat tak jadi.. huhu..
ReplyDeleteJika kod tu masih ada dlm kotak CSS, Aiza tambah kod ni: "background:#FF00FF;" di atas tanda "}".
DeleteIa 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...
terima kasih CK.. alhamdulillah, memang menjadi la.. :D
DeleteAlhamdulillah...cayok...cayok (hehe, pinjam ayat org)
Deletealahai, nak buat x reti la pulak.. maklum lah, kena banyak belajar dr senior ni.. hehe
ReplyDeleteKira 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 :)
DeleteCK , tasya guna yang nii . Nice :)
ReplyDeleteTerima kasih tasya ;)
DeleteCikgu, miya datang menuntut ilmu ni.. dihalalkan ye
ReplyDeleteSilakan Miya...ye, CK halalkan ;)
Deletesalam cikgu..
ReplyDeleteble bantu...
tuto dekat atas tu mana kod warna ungu tu?? lyana tengok macam tak ada je..
maksud lyana yg ne
Kod warna ungu:
Untuk menambah/mengurangkan jarak pada bahagian atas dan bawah border
sebab border lyana tu rapat sangat antara 1 sama lain dan dekat sangat kat header
macam mana tu??
huhuhu... :(
nak buat border sidebar mcm cikgu...
sori menyusahkan...
bile letak code ni,, terus hancur blog saya. sy delete balik sume code,.. tp xdapat kembali lke rupa asal.. apa nk buat ye?
ReplyDeletethankz cikgu!! sangat menjadi hilang stress saya... :D
ReplyDeletesetelah sekian lama nak buat akhirnye ni la paling senang
ReplyDeletejonm singgah hasilnye...
www.vitamindiha.blogspot.com
waahhhh tq cikgu, saya dh berjaya akhirnya yeehhhaaa :)
ReplyDeleteThanks cikgu...dah cuba buat & jadi.hihi...
ReplyDeletethanks cikgu utk ilmu ^^ mintak pakai ilmu ya
ReplyDeleteTQ so much for this tutorial! =)
ReplyDeleteterima kasih tutorial ni....best giler... !!
ReplyDeleteYes.. berjaya buat. TQVM Cikgu Kacamata.
ReplyDeleteTapi bagaimana nak buat macam cikgu, kat sidebar tu, ada garisan kat tajuk.
TQ
...& kalau taknak garisan titik putus tu.. nak buat macamana?
DeleteSelain itu, tajuk utk setiap side bar tu nak warna lain dari kotak isi dia.
TQ in advance
jadilah..terima kasih ya!
ReplyDeleteThis comment has been removed by the author.
ReplyDeletetak jadi lah
ReplyDeleteterima kasih. terbaik betul tutorial ni. Sekarang dah jadi
ReplyDelete