Cara letak border disekeliling posting

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

letak border sekeling post
* diatas adalah kod yang telah ditambah pada template saya.

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.

Catat Ulasan

32 Comments:

anggasona berkata...
Teknik Buat Blog

mantap kawan, bagus bgt nih buat blogger yg suka mempercantik blognya :) keep share ...

ngape nye...? berkata...
Teknik Buat Blog

Terima kasih diatas info anda......hanya Allah yang akan membalas diatas jasa-jasa anda....

suzzsuzie berkata...
Teknik Buat Blog

bgus gak belajar kt sini...akak main buat je.....asal jadi

DieyNa berkata...
Teknik Buat Blog

ADER CONTOH GAMBAR LAGI MENARIK NI.. SAPA YANG DAH TEST.. BG LINK LER.. NAK TENGOK HASILNYA... LEH BLOGWALKING SKALI...

benz razia berkata...
Teknik Buat Blog

cmne nak cri kod post {
tu?

yahaya berkata...
Teknik Buat Blog

@benz razia
saya telah edit semula posting diatas dengan memasukkan imej.diharap dapat membantu.

::cikjuju::◕‿◕ berkata...
Teknik Buat Blog

huhu..nape i x leh nak wat ek..huhu

yahaya berkata...
Teknik Buat Blog

@::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.

DgurLinReD berkata...
Teknik Buat Blog

dah cuba.. x dapat!! hu hu.. napa ya~!

yahaya berkata...
Teknik Buat Blog

@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;
}

DgurLinReD berkata...
Teknik Buat Blog

terima kasih atas balsan! sudah cuba masih gagal!! hu hu..

yahaya berkata...
Teknik Buat Blog

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.

DgurLinReD berkata...
Teknik Buat Blog

TEIMA KASIH!! saya dah cuba!! cuba tukar coding calour!! apapun trima kasih!!

syira qahira berkata...
Teknik Buat Blog

/* 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..

Malwanaz berkata...
Teknik Buat Blog

Salam, minta izin guna ilmu ni ye..

yahaya berkata...
Teknik Buat Blog

@Malwanaz w/salam boleh silakan..

yahaya berkata...
Teknik Buat Blog

@syira qahirapada border masukan seperti diatas,

Ahmadsyah berkata...
Teknik Buat Blog

salam kenal..

tsaicoutic tranmorphersys berkata...
Teknik Buat Blog

yessssssssss...berjaya..thnk 4 de info

Syaidahtul Badriyah Aziz berkata...
Teknik Buat Blog

kalau nak buat kat comment macam mana pla?tq

noraim berkata...
Teknik Buat Blog

terima kasih :)

ShUhaDaH berkata...
Teknik Buat Blog

tq ! anti nk aply jgk kat blog sendri =)

MakeOver By Eyla Mukthar berkata...
Teknik Buat Blog

x reti gak.. x jadik pon...

yahaya berkata...
Teknik Buat Blog

@MakeOver By Eyla Mukthar
untuk template cik letak kat sini:

.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
border:3px solid;
}

Mia Honeyfull berkata...
Teknik Buat Blog

kalau yg background npe xjadi ye ?

Tanpa Nama berkata...
Teknik Buat Blog

saya x ada kod 2.. mcm mana nak buat..??

kod nie x ada.. .post {

yahaya berkata...
Teknik Buat Blog

@Anonymousgunakan Ctrl+f untuk mencari..

mUiN YuKiO berkata...
Teknik Buat Blog

code 2 memg x de k,,, dh cri Expand Widget Templates dhtick find pon dh tp x jumpe pon,, sedih...

yahaya berkata...
Teknik Buat Blog

@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

}

Jue berkata...
Teknik Buat Blog

info sgt bagus bg budak br blaja mcm sy..he2...tqvm

NAIN berkata...
Teknik Buat Blog

tima kasih saya dah cuba hampir semua

ne hasil nye

http://myredarowana.blogspot.com/

Yuyu Suwit berkata...
Teknik Buat Blog

time kasih!! hehe..byk info bergune neh..
http://noridayumohamad.blogspot.com/..i'm follow u.. ^^