Posted on

Cara set gambar lebar penuh di blog WordPress anda

Jika anda membaca blog baru kami Majalah9, anda tentu perasan setiap gambar yang kami gunakan mempunyai kelebaran penuh, cukup-cukup dengan ruang artikel. Kami tidak meresize setiap gambar tersebut supaya sama dengan lebar artikel, sebaliknya kami hanya menggunakan code html yang sangat ringkas. Dengan code ini kami tidak akan risau bila bertukar theme baru kerana lebar gambar tersebut juga akan turut berubah.

underwater-art

Gambar diatas menunjukkan contoh gambar lebar penuh. Ikuti tutorial ringkas ini.

Masukkan gambar ke dalam post anda. Jika anda menggunakan Windows Live Writer untuk menulis blog, klik pada Source di bahagian bawah. Gambar dibawah menunjukkan gambar yang belum diedit code html nya.

underwater-sculpture

Cari code gambar yang bermula dengan <img src dan mempunyai attribute width. Contoh:

<img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="underwater-sculpture" border="0" alt="underwater-sculpture" src="$underwater-sculpture_thumb.jpg" width="244" height="164" />

 

Gantikan width dan height kepada width=”100%” dan siap. Contoh:

<img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="underwater-sculpture" border="0" alt="underwater-sculpture" src="$underwater-sculpture_thumb.jpg" width="100%" />

Hasilnya

underwater-sculpture

Gambar yang digunakan dipetik dari artikel terbaru di Majalah9 iaitu Muzium Patung Bawah Laut di Mexico.


RELATED POSTS

BACA :  Tips dan plugin berguna untuk Windows Live Writer

23 thoughts on “Cara set gambar lebar penuh di blog WordPress anda

  1. lepas ni boleh la jomHTML plak.
    .-= Adlan Khalidi´s last blog ..Viewing GPS map on your computer with MapSource =-.

  2. […] This post was mentioned on Twitter by jomphp.com, cyberfly. cyberfly said: @azmanishak http://bit.ly/9UgB0x […]

  3. Owh macam ni rupanya,nice info bro
    .-= wazy´s last blog ..percubaan pertama =-.

  4. nice info.. nice sharing 🙂
    .-= suduxx´s last blog ..Despicable Me 3D memang terbaek =-.

  5. nice post! aku pon buat camni gak..
    .-= Anarm´s last blog ..Peraduan Copy dan Menang MP3 Player =-.

  6. owh tak sangka plak begitu senang ek nak buat.. ingtkan ada code yg panjang2 td.. nanti aku try la buat gak.. trimas bro.. 😆
    .-= broSKL´s last blog ..Besar punya =-.

  7. Blog baru memang sesuai guna kaedah ni.Terima kasih kepada jomPHP
    .-= Loq´s last blog ..Joachim Loew korek hidung dan bau ketiak- =-.

  8. oic, baru aku tahu. menarik ni, tapi kena rajin edit html la plak. hehe
    .-= mohdisa´s last blog ..Blogger Yang Berjaya =-.

  9. oh ubah2 macam tu je..
    great info..=)
    .-= syahrilhafiz´s last blog ..Apa kata korang- Aku pilih ini =-.

  10. Simple tapi sangat penting. Terima kasih atas perkongsian! 😀
    .-= Nasrul Hanis´s last blog ..Setapak ke Hadapan =-.

  11. oo camtu je..tapi gambar kena mantap..kalau tak pecah2.. :blush:
    .-= aizuddin´s last blog ..Sepanyol-Belanda Juara Piala Dunia 2010 =-.

  12. Oooo now we know..tq bro..sekarang boleh ler letal pica besar dlm wp kn..

  13. tips html yg simple tetapi berguna terutama kepada mereka yang rajin tukar theme..
    .-= Khidhir´s last blog ..Yahoo- Unable to Process Request At This Time – Error 999 =-.

  14. cuba dah cara nie. kalo buat width=”100%” /> gambar akan telebih penuh

    jadi buat width=”90%” />

    baru ok. :pinch:
    .-= zackpantai´s last blog ..Bola Sepak FIFA 2010 made in china =-.

  15. satu tips yang sangat menarik. sudah lama mencari utk penyelesaian seperti ini. terima kasih.
    .-= sankai´s last blog ..Julia Perez =-.

  16. thanx.. baru taw. 😛

  17. simple je tips kali ni.. hehe.. thanks for the info.. nnt nak try kat blog juga..
    .-= Paksu-IT´s last blog ..Kelajuan Pakej Streamyx Yang Anda Subscribe =-.

  18. Nice trick! I succesfully did the trick & applied into my new blog entry. thanks.
    .-= finalcross´s last blog ..5 Best Places to Learn Tricks of Photoshop =-.

  19. em setiap post kene set 1-1 camni ke???
    .-= Roslan´s last blog ..Snaptu Aplikasi Multitasking Internet Terbaik =-.

  20. kalau pakai imageshack.us

    camne plak?

  21. terimas bro tutorial yg bagus

  22. jadi setiap kali nk masukkan gmbar di post kena bt macam ni ek

Tinggalkan komen anda