Bila melihat kembali Blog kita pada ruangan post tanpa sebarang border, rasa sayup je hati kerana ia kelihatan kosong dan kurang ceria. Jadi, langkah penyelesaiannya ialah dengan menambahkan border. Lihat juga bagaimana cara menambahkan border pada Sidebar Gadget, Post Body dan Main Blog.
Langkah-langkah untuk menceriakannya:
2. Pilih "Template" kemudian klik butang "Customise"
"Copy" kod di bawah:
.post {
margin:0 0 45px 0;
padding-top:5px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border: 2px dashed #cccccc;
}
margin:0 0 45px 0;
padding-top:5px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border: 2px dashed #cccccc;
}
.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;
}
margin:0 0 45px 0;
padding-top:5px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border: 2px dashed #cccccc;
border-radius:15px;
}
.post {
margin:0 0 45px 0;
padding-top:5px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border: 2px dashed #cccccc;
border-top-right-radius:15px;
border-top-left-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:15px;
}
margin:0 0 45px 0;
padding-top:5px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border: 2px dashed #cccccc;
border-top-right-radius:15px;
border-top-left-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:15px;
}
.post {
margin:0 0 45px 0;
padding-top:5px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border: 2px dashed #cccccc;
background:#999999;
}
margin:0 0 45px 0;
padding-top:5px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border: 2px dashed #cccccc;
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 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"
Selesai!
*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
Terima kasih atas perkongsian yg bermanfaat ini.
ReplyDeleteYa, sama-sama. Have fun :)
Deletesinggah pagi
ReplyDeleteSinggah je tau, CK tak sediakan bekpes :D
Deletewah..best tutorial ni..next time sy akan cuba plak la..tq.. sy dah follow blog yg best ni..jom ke blog sy lak >> http://firohar.blogspot.com/
ReplyDeleteBoleh dicuba, takde masalah...CK pun dah terjah blog Firo ;)
Deletedah lama cari cara ni.. terima kasih CK.. sebelum ni selalu tengok tutorial orang lain kena edit kat html..
ReplyDeletemenjadi.. nak buat lengkung macam mana ya?
DeleteYa, sama-sama Mizz Aiza.
DeleteOk, utk lengkung (CK cadang nak bgtau nanti, tp takpe CK pun dah buat gak, hehe), tambah jer kod yg bold tu. Tukar nilai border-radius ikut kemahuan MA.
*Jika kod ini dah takde dlm CSS box tu, jgn panik, pastekan semula kod ini di dalamnya dan jangan lupa tekan enter...
.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;
}
alhamdulillah dah menjadi.. terima kasih sangat2.. :D
DeleteAlhamdulillah. njoy ;)
Deletejadi lah . tapi nak buat border untuk main blog dia macam mana ye ?
ReplyDeleteCK akan tunjukan dalam tutorial yang akan datang. Sentiasa bersama CK ;)
DeleteIrda boleh rujuk di sini...
Deletebagus info ni...
ReplyDeleteTerima kasih kak Noor ;)
Deletebagus tutorialnya sangat membantu..
ReplyDeleteTerima kasih Andes :)
Deletehello interesting your site, come visit my site kisss Ita
ReplyDeletehttp://www.amoleroserosse.altervista.org
Okay...thanks came across. do visit me often. njoy ;)
DeleteThanks friend :)
ReplyDeleteterima kasih
ReplyDelete