Tutorial Guna Code Table Untuk Kemaskan Banner Exchange (UPDATED)

Assalamualaikum dan Salam Sejahtera pada semua……

Atas pertanyaan puteriizyan, kali ni cik tom nak ajar tutorial cara nak susun banner exchange supaya lagi kemas dan tersusun seperti gambar di atas atau pada link dalam page BANNER EXCHANGE. Cik tom dapat idea untuk kemaskan dan susun semua banner yang di exchange bersama kawan-kawan blogger di page banner exchange menggunakan code table. Gunakan cara ini lebih mudah dan banner lebih tersusun dan nampak cantik. Tutorial cara buat page banner exchange. Cik tom hanya menggunakan basic coding table seperti di bawah;


<table border="2" cellpadding="6" cellspacing="6"><tr><td>CODE BANNER 1</td><td>CODE BANNER 2</td></tr><tr><td>CODE BANNER 3</td><td>CODE BANNER 4</td></tr></table>

Contoh hasil coding di atas;


CODE BANNER 1 CODE BANNER 2
CODE BANNER 3 CODE BANNER 4

Maksud bagi coding di atas;

border=size bagi border untuk kotak table. Kalau tak nak bagi nampak (transparent) buat nombor “0”.

cellpading=size bagi jarak diantara ruang kandungan dengan kotak (cell) table.

cellspacing=size bagi jarak di antara kotak (cell) table.

<td></td>=table content bagi masukkan coding atau apa-apa ayat yang disukai.

<tr></tr>=table row untuk buat lajur melintang yang baru

*****************************

Untuk coding table yang lebih detail seperti nak masukkan warna background table atau sebagainye boleh belajar kat SINI. Kalau ada apa-apa tak faham. Jangan segan untuk bertanya. InsyaAllah akan cik tom usahakan setakat mana yang mampu. 😉
_________________________________________________________________

UPDATED 19/11/2010

SOALAN 1: Bagi adqayum dan azwan yang bertanyakan bagaimana nak tambah kotak/column(lajur menegak)?? Caranya korang just tambah coding ni;


<td>CODE/TEXT</td>

Untuk tambah row(lajur melintang) pulak korang tambah coding ni;


<tr></tr>

Contoh kalau korang nak buat 1 row+5 column;


<tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td></tr>

SOALAN 2: puteriizyan, decrewz dan sis bee bertanyakan bagaimana nak adjust size banner bagi semua sama saiz?

Contoh coding banner pertama cik tom;


<a href="http://tomatogurlslife.blogspot.com/" target="_blank"><img src="http://i43.photobucket.com/albums/e378/tihah/bannerciktom-1.gif" border="0" height="125" width="125" /></a>

Korang just adjust size pada code height dan width kepada size yang korang suka. Contoh semua size banner yang cik tom adjust ialah height=”100″ width=”100″.

Contoh coding banner kedua cik tom;


<a href="http://tomatogurlslife.blogspot.com"> <img src="http://i837.photobucket.com/albums/zz293/realwanda/ciktom.png" border="0" alt="tag2" /></a>

Pada coding ni takde pulak coding height dan width kan. So nak buat macam mana?? Caranya korang just tambah je sendiri coding height=”100″ width=”100″ di dalam coding. Contohnya;


<a href="http://tomatogurlslife.blogspot.com"> <img src="http://i837.photobucket.com/albums/zz293/realwanda/ciktom.png" border="0" alt="tag2" height="100" width="100" /></a>

Macam mana?? Korang faham tak?? huhu..

p/s: Mood blogging kini kembali. Yeay!!

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 @

62 thoughts on “Tutorial Guna Code Table Untuk Kemaskan Banner Exchange (UPDATED)

  • November 18, 2010 at 1:46 pm
    Permalink

    huhu thnx 4 sharing cik tom!

    Reply
  • November 18, 2010 at 1:47 pm
    Permalink

    hehe..cik tom, thank you so so so so much!!!
    really appreciate it..

    xoxo 😀

    Reply
  • November 18, 2010 at 1:48 pm
    Permalink

    byk ilmu blogging cik tom nie 🙂

    Reply
  • November 18, 2010 at 1:58 pm
    Permalink

    bagus2!!mood blogging kena ade hari2 kan..kan…!!:) lame tak singgah cni!:)

    Reply
  • November 18, 2010 at 2:09 pm
    Permalink

    this one really help~!!
    hohoho mekasih2 ;D

    Reply
  • November 18, 2010 at 2:18 pm
    Permalink

    kena try ni..

    Reply
  • November 18, 2010 at 2:33 pm
    Permalink

    huhu fyza banner pun x dak..;'(

    Reply
  • November 18, 2010 at 2:55 pm
    Permalink

    oo.. cm tu rupanya. patot la tgk kemas je.. entry td heheh

    Reply
  • November 18, 2010 at 3:19 pm
    Permalink

    yeay!!!cik tom dah kmbali..thnx untuk tutor ni yunk…ley la try t..hehe

    Reply
  • November 18, 2010 at 3:45 pm
    Permalink

    wee..thank you so much cik tom.
    syg sgt3 cik tom..

    xoxo

    iqa da terai.sume ok.mule2 je pening ngn code2 tuh..
    skang nk edit2 skit je 😛

    Reply
  • November 18, 2010 at 4:11 pm
    Permalink

    nak tanya mcm ner cik tom kecilkan badge akk tu?? akak dah ambil banner ciktom yg seksi tu…kotakan janji…

    Reply
  • November 18, 2010 at 4:59 pm
    Permalink

    cik tom,nk tny nih,kalau banner tu terlalu bsr, cner nk kecik kan size?

    kalau kat coding tuh ade size,boleh la.
    tp kalau yg tadek size tuh caner eyk?

    Reply
  • November 18, 2010 at 5:07 pm
    Permalink

    wahh totu pasai bannt exchge 🙂
    ramai yang suka ngan entry cik tom 🙂
    fatin salah satu nya ok 🙂

    dan dan

    reply:

    hehe makasih ciktom 🙂

    hehe headr 2 edit besa2 ja cik tom hehe 😀
    dah la xmo dok center hahaa

    Reply
  • November 18, 2010 at 5:29 pm
    Permalink

    bagus juga tutorial ni

    Reply
  • November 18, 2010 at 6:16 pm
    Permalink

    besh2!
    thanx sgt2!

    Reply
  • November 18, 2010 at 8:12 pm
    Permalink

    oooo mcm tu ke..ML men letak jek berterabur.huhu.thanx for sharing cik tom.minggu ni xdpt nk kemas page blog sebb kne tolong masak utk bday party kwn.isk2..

    Reply
  • November 18, 2010 at 11:19 pm
    Permalink

    salam cik tom,
    tutorial yg best tp nak tnya ni..klu nak letak kat sidebar buat table utk exchange banner tu..cmana nak buat yer? kecik ckit la..

    Reply
  • November 19, 2010 at 3:02 am
    Permalink

    gud job cik tom walaupun yaty xde banner2. hahaha

    mensebarkan ilmu amalan mulia 😀

    Reply
  • November 19, 2010 at 3:30 am
    Permalink

    sory x paham la….camna nak tambah banner kan untuk 4 ja….N camna nak bph url banner kod tu….

    Reply
  • November 19, 2010 at 4:13 am
    Permalink

    daH jadi la cik tom ….10Q sangat…but yang jadi soalan nya nak tambah kotak yang tu ja….

    Reply
  • November 19, 2010 at 4:43 am
    Permalink

    wow… nak try jugalah. dni dni nyer tu kadang2 meroyan. huhu

    Reply
  • November 19, 2010 at 4:50 am
    Permalink

    yeay2~ cik tom dh kmbali~~ ^_^

    Reply
  • November 19, 2010 at 5:20 am
    Permalink

    salam…

    Nice sharing cik tom , thanks ya

    Reply
  • November 19, 2010 at 5:21 am
    Permalink

    yuhuuu cik tom..tq 4 sharing, nice en3 dear 🙂

    Reply
  • November 19, 2010 at 6:02 am
    Permalink

    waaa.. bes ni. jz nak la buat camni pas curik banner cik tom n kawan2.. tq cik tom tapi.. huwaaa jz je tak de banner. tak reti nak buat. sob sob..

    Reply
  • November 19, 2010 at 7:38 am
    Permalink

    nice sharing cik tom 🙂

    Reply
  • November 19, 2010 at 7:40 am
    Permalink

    thanks for sharing cik tom:)

    Reply
  • November 19, 2010 at 7:45 am
    Permalink

    yatie xde banner. argh,, sedih2.. sob2.

    Reply
  • November 19, 2010 at 7:56 am
    Permalink

    T_T.. x fhm sepatah haram.. sy bute iT..

    Reply
  • November 19, 2010 at 8:56 am
    Permalink

    salam kenal n salam ziarah tq 4 the tutorial..kena try nih..

    Reply
  • November 19, 2010 at 8:57 am
    Permalink

    wah.bagus la cik tom ni.
    dah lama dah cari part ni.:)
    saya punya bersepah tol link tu.
    hehehe

    thanks for sharing.

    bintang kecik: selamat hari raya aidiladha:)

    Reply
  • November 19, 2010 at 12:02 pm
    Permalink

    tenkiu..dah buat jugak 🙂

    Reply
  • November 19, 2010 at 12:03 pm
    Permalink

    camna nak tambah kotak???

    Reply
  • November 19, 2010 at 1:09 pm
    Permalink

    akak pun belum ada banner lagi, xreti nak buat walaupun cik tom dh buat tutorial…hehe

    Reply
  • November 19, 2010 at 1:27 pm
    Permalink

    KEPADA PUTERI IZYAN, KAK BEE, AZWAN, DECREWZ DAN ADQAYUM..SEGALA PERSOALAN KORANG TELAH CIK TOM JAWAB DAN UPDATE DI ENTRY NI..SILA LIHAT YE…

    Reply
  • November 19, 2010 at 1:49 pm
    Permalink

    thank you kakak sayangggg….

    xoxo 😀

    Reply
  • November 19, 2010 at 1:59 pm
    Permalink

    weee..dah boleh buat. thanks again.

    cume tak bape nk kemas je lagi :p

    Reply
  • November 19, 2010 at 2:17 pm
    Permalink

    faham2 kena tunggu mood datang baru leh buat..TQ

    Reply
  • November 19, 2010 at 2:55 pm
    Permalink

    nice~da lame jgk cri tutorial ni..nt maybe bole buat..thnx cik tom:D

    Reply
  • November 19, 2010 at 5:21 pm
    Permalink

    wahh nice tutorial

    Reply
  • November 21, 2010 at 1:50 am
    Permalink

    salam cik tom
    thanks for sharing
    sangat bermanfaat untuk saya

    Reply
  • November 23, 2010 at 7:30 pm
    Permalink

    cik tom, nk tny leh, cuba tgk Exchange Banner afiq ni, cane nak rapatkan row( de tu? renggang sangat la plak.kalau mcm cik tom, rapat2 je. save space kat situ huhu

    thnks in advance 😀

    Reply
  • November 28, 2010 at 8:33 pm
    Permalink

    cik tom!ML da buat.hehehe..da jadi.Thanx cik tom!Ml letak banner cik tom jugak =)

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

    tutorial yg berguna..
    dah amik banner cik tom 🙂

    Reply
  • January 8, 2011 at 6:42 am
    Permalink

    yuhuu Ct.pnglah dh baca byk kali.kite nk susun award dan contest yg kite join.tapi tak tau nak edit kat mana utk kecilkan saiz.tu sbb kite ltk semua kat bwh dulu,teringin gak nk bg semua duduk diam dalam satu kotak mcm CT ajar kat atas ni,mcm mana ye?

    Reply
  • January 11, 2011 at 10:20 am
    Permalink

    @Aleasara: ada caranya dalam entry yang sama…cuba tengok betul2 ye…jawapannya ada di soalan no 2 ye…

    Reply
  • January 31, 2011 at 7:50 pm
    Permalink

    SAYA DAH BUAT TAPI MCMANA NK CENTREKAN BOX TUE EKH??

    Reply
  • February 6, 2011 at 3:14 am
    Permalink

    cik tom!!
    gue dah berjaya…
    thankz…

    Reply
  • February 7, 2011 at 8:39 am
    Permalink

    waaahhh! tq 4 dis tutorial ..finally bersua juga aku ngan tutorial nie ba..makaci cik tom ..sy da dpt buat =)

    Reply
  • February 17, 2011 at 6:56 pm
    Permalink

    thanks cik tom.. dah berjaya buat. tutorial yg mudah difahami. :).. skrg banner semua dah disusun kemas. hehe 🙂

    btw sy dah add banner cik tom dah kat bahagian personal blogger banner. so nnt cik tom add la banner sy okie. :)..

    thanks a lot. 🙂

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

    cik tom, nak tanye pasal kotak banner nie… if dalam page so kite nk masukkan code camner ehh?? confuseee -__-

    Reply
  • April 4, 2011 at 9:19 pm
    Permalink

    @.::cintabungablogspot::.;
    kalau dlm pages..just copy je code tue dan paste masukkan dalam pages…macam biasa jugak..xde bezanya..

    Reply
  • July 28, 2011 at 11:54 pm
    Permalink

    Cik Tom, yang ni>> column1column2column3column4column5

    letak kt mana?? selepas yg ni ke??..

    CODE BANNER 1CODE BANNER 2CODE BANNER 3CODE BANNER 4

    jadi,

    CODE BANNER 1CODE BANNER 2CODE BANNER 3CODE BANNER 4column1column2column3column4column5

    ke??.. 🙂
    Jom baca entri terkini Dea …Day 27 – Makanan dan Minuman kegemaran AndaMy Profile

    Reply
    • August 16, 2011 at 7:17 pm
      Permalink

      aah yang column tue adik boleh masukkan code banner adik ye…

      Reply
  • December 30, 2011 at 2:42 pm
    Permalink

    akak,x faham la.nape bile saya pastekan kod tu di Page baru saya,dia x menjadik pun..sebaliknya,dia keluar kod tu bukan banner

    Reply
    • December 30, 2011 at 8:27 pm
      Permalink

      ye ke?cuba adik buat 1 contoh..tunjukkan link tue kat ciktom..ciktom nak tgk apa yg silap..

      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