Tutorial Buang Line Border/Frame Image

Cik tom nak kongsikan tutorial buang border/frame/line/kotak di sekeliling gambar di dalam entry. Masalah ni pernah sudais tanyakan dengan cik tom tapi masa tue, cik tom lupa apa code yang cik tom ubah untuk buangkan line border pada gambar. Cik tom godek2 dari code blog adik cik tom, miss yaty dan dah jumpa apa code nak buang line border disekeliling gambar. Sebab masa upload tue takde border pun pada gambar tue kan. Tapi selepas upload baru muncul kotak frame sekeliling gambar tue. Contohnya macam dalam gambar dibawah yang ada line kelabu sekeliling gambar.

STEP 1

Sila backup template sebelum mula untuk mengedit sebarang code.

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

STEP 2

Tekan keyboard “CTRL+F” atau “F3” dan search code dibawah;

.post img {

***kalau tak jumpa code ni, boleh cuba cari code;

.post a img { atau code .post-body img {


***kalau tak jumpa juga mana2 3 code di atas, HINT cuba cari code yang ada “post” dan juga “img” ye.
STEP 3
Kat bawah ialah contoh 3 code yang berbeza di 3 jenis blog;
Contoh code 1;
.post img {
padding: 4px;
border: 1px solid #000000;
}
Contoh code 2 (blog miss yaty);
.post img, table.tr-caption-container {
padding:4px;
border:1px solid #cccccc;
}
Contoh code 3 (code blog sudais);
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 2px;
background: #ffffff;
border: 1px solid #e9e9e9;
}
Sila ubah no angka yang di bold/hitamkan pada code border daripada 1 kepada 0.

STEP 4

Preview dan save jika tiada sebarang error pada coding.

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 @

27 thoughts on “Tutorial Buang Line Border/Frame Image

  • March 6, 2011 at 4:34 am
    Permalink

    dalam code bahagian post , saya takde langsung perkataan img . huhu

    Reply
  • March 6, 2011 at 4:55 am
    Permalink

    wah.ciktom.kembali dgn tutorialnyaaaa….HEHHEHE

    Reply
  • March 6, 2011 at 5:29 am
    Permalink

    wahh…tp blog mish bukan ade border mcm ni. bordernya lain mcm sikit. ishh.xpe,nanti mish cuba wt dulu eh.

    Reply
  • March 6, 2011 at 6:24 am
    Permalink

    cik tom otai tutorial:P hehe

    Reply
  • March 6, 2011 at 6:40 am
    Permalink

    dah lame x syg cik tom..sbb cik tom x on9.hehe…
    rsenya dah lme gak x wat tutorial yg cik tom wat.jgn mrh ya.hihi
    thanx singgah blog sye td πŸ™‚

    Reply
  • March 6, 2011 at 6:50 am
    Permalink

    Pergh~ Sanggup geledah coding Yaty tu nak setelkan tutorial tu. Dasat lah Cik Tom neh. Meh sayam ketat ketat ;D

    Tapi kan, Shag rasa lagi coolio ada border. haha. Pandangan Shag je.

    Reply
  • March 6, 2011 at 7:47 am
    Permalink

    wah cik tom….tQ ye bt tutorial cmni..sesuai tuk sy bdk y bar bljr nii…heheh…

    Reply
  • March 6, 2011 at 10:08 am
    Permalink

    1st sekali, sy nmpak beger tu, huhu..
    perkongsian yg bgus cik Tom πŸ˜‰

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

    nice tuto cik tom..

    lama x dtg blog zati ..

    Reply
  • March 6, 2011 at 4:04 pm
    Permalink

    salam

    asalkan sanggup mencuba,semua benda jadi mudah,jangan semua benda nak tadah, belum buat dah cakap payah..huhu

    perkongsian yang bagus =)

    Reply
  • March 6, 2011 at 4:13 pm
    Permalink

    oh..
    akak tak de masalah dengan benda ni..'kalau ada akak cari cik tom..
    hahahah

    Reply
  • March 7, 2011 at 12:00 am
    Permalink

    Thanks for sharing ni ya Tom..sangat berguna bagi ellen ni…

    Reply
  • March 7, 2011 at 9:29 am
    Permalink

    trus trng ,toturial yang sy suka guna kat maribinablog.blogspot.com dan ciktom.com.. wlupun ada blog2 lain yang bnyk toturial,tapi geram la bila blog sy tak mesra coding..so malas dah nak guna toturial ni..sbr je laa..ermmm

    Reply
  • April 5, 2011 at 3:01 am
    Permalink

    well sayam..

    at first,mmg tak jadi..
    bila dah geram,
    scc ubah semua yg ade number kt pixel area coding tadi..
    pastu jadi pulak ^^
    alhamdulillah..

    tengs sayam for this tutor ! ^^

    Reply
    • April 6, 2011 at 1:27 am
      Permalink

      alhamdulillah baguslah..usaha tangga kejayaan πŸ˜‰

      Reply
  • June 25, 2011 at 7:53 pm
    Permalink

    Wah! Sangat banyak tutorial yg mencantikkkan blog.. Suka sesangat! Follow dengan hati saya yang tiada berbelah bahagi berserta bunga-bunga cinter~ πŸ™‚

    Reply
  • July 27, 2011 at 9:38 pm
    Permalink

    macamne nak buat border line kt picture ?sy tak brpa fhm dgn tutorial yang dtrangkan .

    Reply
  • July 27, 2011 at 11:53 pm
    Permalink

    nak letak border pada picture .tapi tak brapa fhm cara tutorial ini cz dah try tapi tak jadi πŸ™‚ pls help me .

    Reply
  • August 22, 2011 at 9:24 am
    Permalink

    kalau coding tu tak…korang create je..just copy bulat – bulat dari tutorai lcik tom tu…saya dah try lebih dari sekali…lagi senang…nasib baik takde error…he3…cik tom, saya pinjam ilmu blogging cik tom ni yek…TQ
    Jom baca entri terkini syuhaida …Dah selesai semua persiapan raya?My Profile

    Reply
  • October 24, 2011 at 2:56 pm
    Permalink

    Thank you so much ! Dah lama cari tuto ni .. thank you again ! πŸ˜€ #hepi hepi !
    Jom baca entri terkini Adleen Farhana …:BMy Profile

    Reply
    • November 26, 2011 at 5:03 pm
      Permalink

      sama2 dan tahniah sebab berjaya πŸ˜‰

      Reply
  • November 17, 2011 at 2:59 pm
    Permalink

    OMG. This tuto vewyyy awesome dude. I punya blog tu tak boleh nak buang image boarder then search tuto tak jumpa2. Lastly i jumpa blog u, and finally got it. Thanks so much.
    Jom baca entri terkini Yana …MemoryMy Profile

    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