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.

Post a Comment

32 Comments:

anggasona said...
Teknik Buat Blog

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

Teknologi Baru said...
Teknik Buat Blog

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

suzzsuzie said...
Teknik Buat Blog

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

DieyNa said...
Teknik Buat Blog

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

Ara (아라I) said...
Teknik Buat Blog

cmne nak cri kod post {
tu?

sibersensasi said...
Teknik Buat Blog

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

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

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

sibersensasi said...
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 said...
Teknik Buat Blog

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

sibersensasi said...
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 said...
Teknik Buat Blog

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

sibersensasi said...
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 said...
Teknik Buat Blog

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

apdm said...
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 said...
Teknik Buat Blog

Salam, minta izin guna ilmu ni ye..

sibersensasi said...
Teknik Buat Blog

@Malwanaz w/salam boleh silakan..

sibersensasi said...
Teknik Buat Blog

@syira qahirapada border masukan seperti diatas,

Ahmadsyah said...
Teknik Buat Blog

salam kenal..

tsaicoutic tranmorphersys said...
Teknik Buat Blog

yessssssssss...berjaya..thnk 4 de info

ida said...
Teknik Buat Blog

kalau nak buat kat comment macam mana pla?tq

نورعيم said...
Teknik Buat Blog

terima kasih :)

♥ Cik Syu ♥ said...
Teknik Buat Blog

tq ! anti nk aply jgk kat blog sendri =)

MakeOver By Eyla Mukthar said...
Teknik Buat Blog

x reti gak.. x jadik pon...

sibersensasi said...
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 Zulfah said...
Teknik Buat Blog

kalau yg background npe xjadi ye ?

Anonymous said...
Teknik Buat Blog

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

kod nie x ada.. .post {

sibersensasi said...
Teknik Buat Blog

@Anonymousgunakan Ctrl+f untuk mencari..

mUiN YuKiO said...
Teknik Buat Blog

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

sibersensasi said...
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 said...
Teknik Buat Blog

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

NAIN said...
Teknik Buat Blog

tima kasih saya dah cuba hampir semua

ne hasil nye

http://myredarowana.blogspot.com/

Yuyu Suwit said...
Teknik Buat Blog

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