Tips posting gambar berjejer ke samping,cocok untuk toko online
Sekarang sambil tetap blogwalking untuk menaikkan trafik alexa,saya juga mau posting sedikit tips pasang gambar berjejer kesamping.
Mungkin untuk beberapa blog,memasang terlalu banyar gambar tidak disukai.Tetapi bagi yang mau mencoba membuat blog yg juga di manfaatkan sebagai toko online,memasang gambar adalah keharusan.
Toko online kini memang lagi populer.Dengan gambar2 yang menarik dan dan tersusun rapi akan menunjang kesuksesan sebuah toko online.
Dan dengan gambar yang tersusun dgn rapi bisa membuat pengunjung menjadi betah.
Nah di sini saya akan share sedikit tips sederhana untuk blogger pemula cara pasang gambar berjajar ke samping
Tips yang saya gunakan adalah kode html untuk buat TABLE yang sudah saya modifikasi untuk pasang gambar.
Kodenya adalah sebagai berikut.
<table border="0" cellspacing="5" height="347" style="width: "584px;"><tbody>
<tr> <td valign="top" width="180">
<a href="URL GAMBAR 1a " target="new"><img alt="" border="0" height="150" src="URL GAMBAR 1a " width="180" />
</a>
judul gambar 1a
<a href="URL GAMBAR 1b " target="new"><img alt="" border="0" height="150" src="URL GAMBAR 1b" width="180" />
</a>
judul gambar 1b
</td> <td valign="top" width="180">
<a href="URL GAMBAR 2a " target="new"><img alt="" border="0" height="150" src="URL GAMBAR 2a" width="180" />
</a>
judul gambar 2a
<a href="URL GAMBAR 2b" target="new"><img alt="" border="0" height="150" src="URL GAMBAR 2b" width="180" />
</a>
judul gambar 2b
</td> <td valign="top" width="180">
<a href="URL GAMBAR 3a " target="new"><img alt="" border="0" height="150" src="URL GAMBAR 3a " width="180" />
</a>
judul gambar 3a
<a href="URL GAMBAR 3b " target="new"><img alt="" border="0" height="150" src="URL GAMBAR 3b" width="180" /></a>
judul gambar 3b
</td></tr>
</tbody></table>
Kode HTML diatas akan menampilkan gambar 3 baris kesamping dan 2 baris ke bawaq.
yang harus diperhatikan adalah kode merah diatas.Kode merah itu adalah lebar kolom postingan yang tiap2 blog berbeda2.
Kode biru adalah kode lebar gambar yang bisa di buat,.
Kenapa? Karena gambar yg akan dijajarkan adalah 3,maka lebar gambar dikali 3 jangan sampai melebihi lebar postingan.
Contoh lebar kolom postingan saya 584.
Gambar yg mau dijajar 3 .
Jadi 584:3 = 194. . .
Nah agar gambar lebih rapi ,saya buat lebar gambar jadi 180px saja.
Untuk kode html diatas juga saya buat agar cukup di klick untuk memperbesar gambar
Untuk melìhat berapa lebar kolom postingan anda silahkan buka kode html template anda.
Contoh gambar yg jajar kesamping bisa diliat di gambar di bawah ini.
klick gambar untuk memperbesar atau mendownloadnya
contoh postingan saya yg ada banyak poto ini ada di
journey to the nusa dua beach with NBC team
Kopdar bersama team nimbuzzerbali
mudah2han tips sederhana saya ini bisa berguna,terutama buat yang baru belajar kode HTML seperti saya.
Pertanyaan dan kritik silahkan pasang di post komentar.
Terimakasih. .
Mungkin untuk beberapa blog,memasang terlalu banyar gambar tidak disukai.Tetapi bagi yang mau mencoba membuat blog yg juga di manfaatkan sebagai toko online,memasang gambar adalah keharusan.
Toko online kini memang lagi populer.Dengan gambar2 yang menarik dan dan tersusun rapi akan menunjang kesuksesan sebuah toko online.
Dan dengan gambar yang tersusun dgn rapi bisa membuat pengunjung menjadi betah.
Nah di sini saya akan share sedikit tips sederhana untuk blogger pemula cara pasang gambar berjajar ke samping
Tips yang saya gunakan adalah kode html untuk buat TABLE yang sudah saya modifikasi untuk pasang gambar.
Kodenya adalah sebagai berikut.
<table border="0" cellspacing="5" height="347" style="width: "584px;"><tbody>
<tr> <td valign="top" width="180">
<a href="URL GAMBAR 1a " target="new"><img alt="" border="0" height="150" src="URL GAMBAR 1a " width="180" />
</a>
judul gambar 1a
<a href="URL GAMBAR 1b " target="new"><img alt="" border="0" height="150" src="URL GAMBAR 1b" width="180" />
</a>
judul gambar 1b
</td> <td valign="top" width="180">
<a href="URL GAMBAR 2a " target="new"><img alt="" border="0" height="150" src="URL GAMBAR 2a" width="180" />
</a>
judul gambar 2a
<a href="URL GAMBAR 2b" target="new"><img alt="" border="0" height="150" src="URL GAMBAR 2b" width="180" />
</a>
judul gambar 2b
</td> <td valign="top" width="180">
<a href="URL GAMBAR 3a " target="new"><img alt="" border="0" height="150" src="URL GAMBAR 3a " width="180" />
</a>
judul gambar 3a
<a href="URL GAMBAR 3b " target="new"><img alt="" border="0" height="150" src="URL GAMBAR 3b" width="180" /></a>
judul gambar 3b
</td></tr>
</tbody></table>
Kode HTML diatas akan menampilkan gambar 3 baris kesamping dan 2 baris ke bawaq.
yang harus diperhatikan adalah kode merah diatas.Kode merah itu adalah lebar kolom postingan yang tiap2 blog berbeda2.
Kode biru adalah kode lebar gambar yang bisa di buat,.
Kenapa? Karena gambar yg akan dijajarkan adalah 3,maka lebar gambar dikali 3 jangan sampai melebihi lebar postingan.
Contoh lebar kolom postingan saya 584.
Gambar yg mau dijajar 3 .
Jadi 584:3 = 194. . .
Nah agar gambar lebih rapi ,saya buat lebar gambar jadi 180px saja.
Untuk kode html diatas juga saya buat agar cukup di klick untuk memperbesar gambar
Untuk melìhat berapa lebar kolom postingan anda silahkan buka kode html template anda.
Contoh gambar yg jajar kesamping bisa diliat di gambar di bawah ini.
klick gambar untuk memperbesar atau mendownloadnya
contoh postingan saya yg ada banyak poto ini ada di
journey to the nusa dua beach with NBC team
Kopdar bersama team nimbuzzerbali
mudah2han tips sederhana saya ini bisa berguna,terutama buat yang baru belajar kode HTML seperti saya.
Pertanyaan dan kritik silahkan pasang di post komentar.
Terimakasih. .
Mantap man, ini yang q cari hehe...
BalasHapusMau bikin toko online ya? Modifikasi aja kode2 di atas.
BalasHapusijin nyoba2 dulu Bos
BalasHapusmas, kode htlm tersebut dimana ditaruh pada html template kita? Tx
BalasHapusok, thanks bos..
BalasHapusMakasih inponya...seharian nyariin ini...
BalasHapusWah makasih banget kang...
BalasHapuswow! nice.. ini yg echa cari2..^^
BalasHapusmantap infonya..makasih
BalasHapus