Cara Tukar dan Jenis Border Pada Sidebar dan Post

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

Sharing is caring

ciktom

Cik tom seorang part time blogger yang sangat sukakan dunia blogging dan buah tomato. Mula menulis blog 15 Julai 2010. Menaip segala ilham dari akal fikiran dan hati ke dunia alam cyber. Sebarang persoalan atau pengiklanan/advertorial/review sila hubungi ciktom; tomatogurl86[at]gmail.com...gantikan [at] dengan @

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

  • March 12, 2011 at 6:21 pm
    Permalink

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

    Reply
  • March 13, 2011 at 3:14 am
    Permalink

    terima kasih sudi share
    tapi blog momoy x sesuai buat
    jadi lagi semak blog yg dah sedia semak tu.
    huhu
    nanti cik tom buat tutorial macam mana nak buat macam page turorial cik tom tu yer
    Dia kata saya cantik TAPI saya…"
    Pembunuh anak kucing wanita mohon maaf kepada rakyat Malaysia"
    ORI-KESHI | Kawaii Eraser Maker"

    Reply
  • March 13, 2011 at 4:43 am
    Permalink

    tq cik tom..sy berjaya tukar dr solid ke dotted ! hee 🙂

    Reply
  • March 13, 2011 at 10:23 am
    Permalink

    eh nak tanya lagi..kalau kita nak tukar bentuk atau design kotak tu pulak mcm mana eh..he he

    Reply
  • March 14, 2011 at 10:23 am
    Permalink

    hai cik tom..
    salam kenal..
    lwt2 la blog sy yea..

    Reply
  • March 14, 2011 at 6:15 pm
    Permalink

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

    Reply
  • March 15, 2011 at 5:38 am
    Permalink

    tak leh masuk la ciktom..nak ngis je rsa .ermmmm

    Reply
  • March 15, 2011 at 10:12 am
    Permalink

    hye. folo kamu. btw, suke tutorial tuh,

    Reply
  • March 15, 2011 at 1:45 pm
    Permalink

    suka guna ridge.. 🙂

    Reply
  • March 16, 2011 at 6:51 am
    Permalink

    terima kaseh dengan information..hehe

    Reply
  • March 17, 2011 at 1:52 pm
    Permalink

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

    Reply
  • March 19, 2011 at 11:53 am
    Permalink

    nanti miss yaty nak cuba jugak lah 😉

    Reply
  • March 21, 2011 at 9:17 am
    Permalink

    @diana: ada caranya akak..kalau berkesempatan boleh cik tom ajarkan…

    Reply
  • March 21, 2011 at 9:21 am
    Permalink

    @Woofer Storm: sabar ye…maybe kena cari tutorial lain yang bersesuaian dgn coding blog achie..

    Reply
  • March 26, 2011 at 4:40 am
    Permalink

    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…

    Reply
  • April 4, 2011 at 7:58 pm
    Permalink

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

    Reply
  • April 8, 2011 at 9:20 pm
    Permalink

    hurm ini utk wordpress ker blogspot??

    Reply
    • April 9, 2011 at 1:16 am
      Permalink

      ini tutorial untuk blogsport suri…untuk wordpress memang diakui cik tom tak reti..kena belajar…

      Reply
  • January 8, 2012 at 10:27 am
    Permalink

    salam..akk kalau takde kod .post{ ni mcm mane??
    saya da cari tak jumpa la..

    Reply
  • February 2, 2012 at 8:04 pm
    Permalink

    cik tom…:(
    npe sye x jumpe pon “.sidebar .widget{” di template sye.
    sedih la.

    Reply
    • February 22, 2012 at 10:22 am
      Permalink

      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…

      Reply
  • March 14, 2012 at 11:06 pm
    Permalink

    kak,,nk tnye,,
    line border mcm akak citer kt atas ni akan muncul time kte lalukan kursor je [email protected] akan muncul stay mcm gitu je time mse kte bkak blog kte?saya budak baru lg dlm blog ni..

    Reply
    • May 4, 2012 at 12:54 pm
      Permalink

      memang akak stay terus..xperlu lalukan kursor..

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Optimization WordPress Plugins & Solutions by W3 EDGE