Post navigation

Cara Tukar dan Jenis Border Pada Sidebar dan Post

Posted on by
Tutorial kali ini request dari nadiah izhar, macam mana cara nak tukar line border macam yang cik tom? Yang cik tom faham maksudnya jenis line border yang cik tom gunakan pada sidebar dan post entry. Cik tom gunakan border jenis double border atau garisan berganda (ada 2 lapisan garisan). Setahu cik tom terdapat sembilan jenis border yang boleh kita ubah pada kod di dalam edit html blog.

9 jenis code border yang boleh digunakan;
  1. solid
  2. double
  3. groove
  4. dotted
  5. dashed
  6. inset
  7. outset
  8. ridge
  9. hidden

Contoh hasil jenis border;
 

INI JENIS BORDER SOLID

INI JENIS BORDER DOUBLE

INI JENIS BORDER GROOVE

INI JENIS BORDER DOTTED

INI JENIS BORDER DASHED

INI JENIS BORDER INSET

INI JENIS BORDER OUTSET

INI JENIS BORDER RIDGE

INI JENIS BORDER HIDDEN

STEP 1


First step ialah backup dahulu template korang sebagai langkah berjaga-jaga;
 

DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>DOWNLOAD FULL TEMPLATE



STEP 2

Klik “CTRL+F” ataupun “F3″ untuk cari code ni;

 

.sidebar .widget{

**setiap blog maybe berlainan coding. Bagi yang berlainan code, cuba cari perkataan sidebar. Try and error.

 

 

 


STEP 3

Sila copy dan paste code di bawah ke dalam code step 2:

border:4px double #D41A1F;


Contoh code blog cik tom:

.sidebar .widget{
background:#fff;
border:4px double #D41A1F;
margin:0 -5px 1.5em -5px;
padding:0px 7px 10px 7px
}
**bagi border pada post entry sila copy code selepas .post{
**jenis border ni juga boleh dimasukkan bagi tarikh post/post comment/blockquote. Ikut kreativiti korang. Tapi jangan melampau sampai nampak serabut pula ye.

Penerangan code border:

border: 4px solid #893BFF;

Hasil code:

INI JENIS BORDER SOLID +WARNA UNGU


1) code nombor 4px tue korang boleh ubah kepada sebarang nombor bagi ketebalan border.
2) code solid mewakili jenis border. Korang boleh ubah kepada jenis border lain seperti dashed, dotted, double, groove, ridge, outset, inset dan hidden.
3) Code #893BFF mewakili warna border. Korang boleh ubah warna border dengan rujuk HTML Color | Code Warna HTML


STEP 4

Preview dan save kalau tiada error pada coding. Selamat mencuba. Kalau ada masalah or pembaharuan, cik tom akan update dalam entry ni ye.

 

 

 


Sumber rujukan: Border Style Types

********************************************************
klik sini


26 thoughts on “Cara Tukar dan Jenis Border Pada Sidebar dan Post

  1. blog akak tak sesuai letak border kat post tu..
    jadi tak cantik..
    akak nak buat macam cik tom ni
    tajuk dia kat tengah dan dalam line border..
    tapi tak jadi.dia duduk kat luar line jugak..

  2. blog cik tom ni byk betul tips,
    side list yang boleh scroll kat blog kami tu idea dari cik tom le,,thanks yer..:)

  3. thankz cik tom.
    finally dapat jugak buat hee :)
    thank you so much sbb sudi kongsi :)

  4. cik tom cam mana nak bagi saiz post tu besar sikit. sblm ni saya dah ada minta izin nak cedok cik tom punya kod. saya suka ngan kaler & border yg cik tom buat tu. jenguk sat my blog, antara post ngan sidebar tu jarak jauh sangat la…

  5. @syakira: yup syakira dah minta di komen entry tue…pasal post dan sidebar tue pun ciktom dah reply di n3 yg sama…

    • kalau xjumpa code tue..cik ai boleh cari code seakan2 code tue.. iaiatu keywordnya cari code sidebar n then ada tak code widget dekat mana2 code sidebar tue..cik tom nak tgk code blog cik ai tp xdpt sbb cik ai dah disable right click..tp cik tom tgk sidebar cik ai mmg dah ada border…

  6. kak,,nk tnye,,
    line border mcm akak citer kt atas ni akan muncul time kte lalukan kursor je ke@mmg akan muncul stay mcm gitu je time mse kte bkak blog kte?saya budak baru lg dlm blog ni..