Jana pendapatan yang lumayan dengan ipanelonline! Klik sini untuk mendaftar. Untuk info lebih lanjut klik sini.
Posted by : Aya chan Sunday, March 27, 2011

Assalamualaikum ! Ramai di antara blogger - blogger (terutama sekali blogger remaja) suka sangat letak gambar dalam blog diorang . Tapi yang tak bestnya , gambar tu diletak secara tak teratur betul tak ? So , saya nak tunjukkan tutorial kat korang camne nak buat foto galeri . Korang kena banyak berlatih untuk buat ni dan kalau ada apa - apa kemusykilan , boleh tanya saya . Mula - mula memang nampak susah sikit tapi bila dah terbiasa , ia akan jadi perkara mudah je . ;)

Cara 1 :
Korang download template kat bawah ni dan letakkan gambar korang . Pastu link-kan galeri tu di blog korang .


Cara 2 :
Buat page baru . Upload gambar kat mana - mana web seperti Photobucket atau Imageshack , ikut sukati korang la . Jangan upload di dalam blogger sebab nanti dia akan resize gambar . Kalau nak upload gak , terpulanglah pada korang . Pastu , dah buat new page , korang tekan Edit HTML .




1) Cara -cara

  • Kat bawah ni adalah kod gambar yang korang kena letak . Pilih dulu style mana yang korang nak pastu pastekan kod ni ikut instruction saya . 
<A HREF="URL OF IMAGE" target="_blank" title="Click to view" > <IMG HEIGHT=50 WIDTH=50 SRC="URL GAMBAR" alt="image name" /></A>


DEMO :

image name
~ Style 1 : 4 gambar dalam 1 row
<TABLE> <TR> <TD>   </TD> <TD>   </TD> <TD>   </TD> <TD>   </TD> </TR> </TABLE>

  • Letak-kan kod gambar di antara <TD> dan </TD>

Contoh : 
<TABLE> <TR> <TD> <a href="http://i538.photobucket.com/albums/ff350/Al-hud_2008/header.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="image name" border="0" height="50" src="http://i538.photobucket.com/albums/ff350/Al-hud_2008/header.png" width="50" /></a> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE>


DEMO :

image name image name image name image name
~Style 2 : 2 gambar setiap 2 row
<TABLE> <TR> <TD>   </TD> <TD>   </TD> </TR> <TR> <TD>   </TD> <TD>   </TD> </TR> </TABLE>

Letak-kan kod gambar di antara <TD> dan </TD>

DEMO :

image name image name
image name image name

2) Gayakan album galeri
  • Kalau korang nak buat foto galeri korang nampak lawa sikit , korang boleh ikut tutorial ni . Korang leh gantikan kod warna kuning tu dengan kod warna yang lain . Pastikan jangan buang # di depannya . Panduan kod ada di laman web ini --> Klik sini
Gantikan kod <TABLE> kepada :
<TABLE cellspacing=0 cellpadding=6 width="80%" border=1 bordercolor="#0000ff">

Contoh :
<TABLE cellspacing=0 cellpadding=6 width="80%" border=1 bordercolor="#74DF00"> <TR> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TR> </TABLE>

  • Kalau nak letak caption , lepas tag <TABLE> tadi , korang letak kod kat bawah ni . Boleh tukar perkataan warna kuning tu kepada apa - apa perkataan yang korang nak .
<caption>Picture Gallery</caption>


Contoh :
<TABLE cellspacing=0 cellpadding=6 width="80%" border=1 bordercolor="#74DF00"> <caption>Aliya busukkk</caption> <TR> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TR> </TABLE>
    DEMO :

    Aliya busukkk
    image name image name
    image name image name

    Siap !!! Untuk kelihatan lebih menarik lagi , korang boleh letak light box image viewer . Kalau korang nak , saya boleh ajar ! ^^

    Nak tengok foto galeri yang dah siap ? ( Gambar di-upload di blogger  ) --> Klik sini

    p / s : Kredit kepada abang Aideal Fitri !

    { 3 comments... read them below or Comment }

    - Copyright © Blog budak genius - Hatsune Miku - Powered by Blogger - Designed by Johanes Djogan -