Membuat border disekeliling posting ini selain dari menambahkan seri pada posting juga sebagai pemisah diantara posting.Pada kebanyakan template sekarang sudah ada border ini.Bagaimanapun template yang berwarna putih jarang jarang menggunakan border terpisah ini.Untuk contohnya boleh dilihat garisan biru disekeliling posting pada blog ini.
Cara membuatnya:
1.Log in ke blogger
2.pilih Design--->>Edit HTML
3.Cari kod ini:
.post {
Lebih mudah gunakan Ctrl + F untuk mencari kod
Kemudian letak kod berikut dibawahnya:
border: 1px solid #000000;
jika inginkan border yang berlainan gunakan kod ini:
border-top: 1px solid #000000; border-bottom: 2px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000;
Border boleh ditukar dari solid kepada dotted,dashed,outset,inset,groove,double dan ridge
Kod: #000000 adalah untuk warna hitam,boleh tukarkan dengan warna yang diinginkan.Begitu juga dengan ketebalan border .
Jika hendak letak warna latar belakang pada posting tambah kan kod berikut pada bahagian bawah kod tadi:
background: #000000;
atau nak letak imej sebagai background masukkan kod ini:
background:url (url image anda disini);
Cuma tukarkan kod warna yang sesuai supaya tampilan lebih menarik
Kemudian save template anda
Selamat mencuba.
Email This Post
Catat Ulasan
Letakkan komen anda disini.Segala komen adalah dihargai.Sila buat backup bila membuat perubahan pada template.Terima Kasih.
32 Comments:
mantap kawan, bagus bgt nih buat blogger yg suka mempercantik blognya :) keep share ...
Terima kasih diatas info anda......hanya Allah yang akan membalas diatas jasa-jasa anda....
bgus gak belajar kt sini...akak main buat je.....asal jadi
ADER CONTOH GAMBAR LAGI MENARIK NI.. SAPA YANG DAH TEST.. BG LINK LER.. NAK TENGOK HASILNYA... LEH BLOGWALKING SKALI...
cmne nak cri kod post {
tu?
@benz razia
saya telah edit semula posting diatas dengan memasukkan imej.diharap dapat membantu.
huhu..nape i x leh nak wat ek..huhu
@::cikjuju::◕‿◕
.post {
border: 3px inset #000000;
margin:.5em 0 1.5em;
border-bottom:1px dotted #17261c;
padding-bottom:1.5em;
cuba delete kode barisan 2 dan 4 yang bermula dengan border
sebab bahagian h2.date-header {
dan .post-footer {
dah dimasukkan kod untuk buat sudut lengkung dan akan membentuk garisan disekeliling juga.
dah cuba.. x dapat!! hu hu.. napa ya~!
@DgurLinReD
kod ni ada pada template cik sekarang
/* Posts
-----------------------------------------------
border-top: 1px solid #000000; border-bottom: 2px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000;
*/
h2.date-header {
margin:1.5em 0 .5em;
}
ubah jadi begini:
h2.date-header {
margin:1.5em 0 .5em;
border-top: 1px solid #000000; border-bottom: 2px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000;
}
terima kasih atas balsan! sudah cuba masih gagal!! hu hu..
tanda */ pada post dah hilang cuba letak semula jadi macam ni:
/* Posts
----------------------------------------------- */
kalau masih tak boleh letak kod mcm ni pula
.post {
margin:.5em 0 1.5em;
border-top: 1px solid #000000; border-bottom: 2px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000;
padding-bottom:1.5em;
}
harap dapat membantu.
TEIMA KASIH!! saya dah cuba!! cuba tukar coding calour!! apapun trima kasih!!
/* Posts
----------------------------------------------- */
body .main-inner .Blog {
padding: 0;
margin-bottom: 1em;
background-color: transparent;
border: none;
ni saya punya,
kenapa tak leh jugak nak buat..still bersambung jugak post itu.. tq..
Salam, minta izin guna ilmu ni ye..
@Malwanaz w/salam boleh silakan..
@syira qahirapada border masukan seperti diatas,
salam kenal..
yessssssssss...berjaya..thnk 4 de info
kalau nak buat kat comment macam mana pla?tq
terima kasih :)
tq ! anti nk aply jgk kat blog sendri =)
x reti gak.. x jadik pon...
@MakeOver By Eyla Mukthar
untuk template cik letak kat sini:
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
border:3px solid;
}
kalau yg background npe xjadi ye ?
saya x ada kod 2.. mcm mana nak buat..??
kod nie x ada.. .post {
@Anonymousgunakan Ctrl+f untuk mencari..
code 2 memg x de k,,, dh cri Expand Widget Templates dhtick find pon dh tp x jumpe pon,, sedih...
@mUiN YuKiO
kod sesetengah template memang berbeza dari apa yg saya tunjukkan disini.Cuba cari kod ini.
.post-body {
line-height: 1.4;
letakkan kod diatas disini
}
info sgt bagus bg budak br blaja mcm sy..he2...tqvm
tima kasih saya dah cuba hampir semua
ne hasil nye
http://myredarowana.blogspot.com/
time kasih!! hehe..byk info bergune neh..
http://noridayumohamad.blogspot.com/..i'm follow u.. ^^