Hot Deal Smartphone Hari Ini
|
|
|
Ternyata cara untuk membuat gambar sejajar di dalam posting blog cukup mudah. Caranya seperti berikut:
1. Pastikan sobat membuat post dalam mode HTML
2. ketikkan kode berikut di posisi gambar yang sobat inginkan:
<table><tr>
<td><img src="URL Gambar 1"/></td>
<td><img src="URL Gambar 2"/></td>
<td><img src="URL Gamabar 3"/></td>
</tr></table>
kesalahan para blogger newbie biasanya tidak mencantumkan img src=
3. sekarang kembali lagi ke mode biasa (mode compose), tinggalkan mode HTML.
Taraaa gambar udah jadi :D
Tapi kok ukurannya besar kecil dan gambarnya tidak seimbang yah? ini malah ada yang gede banget -_-
Tenang sobat, itu karena ukuran gambarnya berbeda-beda. sekarang tugas sobat adalah menyeimbangkannya. Sobat klik ke masing-masing gambar lalu pilih ukuran "small" atau "kecil"
biasanya masih belum seimbang, sekarang tugas sobat kembali ke mode HTML lalu cari tulisan ini:
"img height" dan "width" (tanpa tanda petik)
Itu adalah ukuran tinggi dan lebar gambar, silahkan sobat atur-atur sendiri tinggi dan lebarnya gambar yah, perhatikan juga proporsi dan skalanya biar hasilnya mantap.
4. Gambarnya silahkan diberi caption dan Alt seperti biasanya.
Jadi deh gambarnya.
Masih bingung?
Udah praktek dulu, kalau sobat masih kesulitan silahkan nanya lagi :)
Ini kode HTML 3 gambar di atas, silahkan sobat gunakan untuk latihan.
3. sekarang kembali lagi ke mode biasa (mode compose), tinggalkan mode HTML.
Taraaa gambar udah jadi :D
Tapi kok ukurannya besar kecil dan gambarnya tidak seimbang yah? ini malah ada yang gede banget -_-
Tenang sobat, itu karena ukuran gambarnya berbeda-beda. sekarang tugas sobat adalah menyeimbangkannya. Sobat klik ke masing-masing gambar lalu pilih ukuran "small" atau "kecil"
biasanya masih belum seimbang, sekarang tugas sobat kembali ke mode HTML lalu cari tulisan ini:
"img height" dan "width" (tanpa tanda petik)
Itu adalah ukuran tinggi dan lebar gambar, silahkan sobat atur-atur sendiri tinggi dan lebarnya gambar yah, perhatikan juga proporsi dan skalanya biar hasilnya mantap.
4. Gambarnya silahkan diberi caption dan Alt seperti biasanya.
Jadi deh gambarnya.
Masih bingung?
Udah praktek dulu, kalau sobat masih kesulitan silahkan nanya lagi :)
Ini kode HTML 3 gambar di atas, silahkan sobat gunakan untuk latihan.
<table><tbody>
<tr>
<td><img height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkjMzUgvx_2Tj2JDSOT3qb2rm1P5ewYon_762vQComg0Q-dggjR-HaTfVIcmn5PEiOqj-gA4JX4uBhyphenhyphenxVX8PhAQs8yDjp9NpKMx7LALrIA9RMG08_svL_ztdz52XsNqcHriG4YnE4xb6aM/s200/Nokia-Lumia-928-mockup.jpg" width="200" /></td>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQp0qYhuoBUZpqzFG1aVIYj-am2_ab53jAzZIcEyo_1Oyfy9gtippMbzI03byyAnkz29yfru00cgzhQlmSgc7UgDr25xwcjEeEnH29hWMgoNFNCgyGa8hp8fxPPEIPH5OWwQCumYL8y2Q/s200/sony+xperia+sp.jpg" /></td>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcWo0Yv5DlTwBTHvJptlRFQsRw8a3IhMQPMVgjM9QeHM-qGhHTY7fM0b9RMVemhBIABRXASZBt7Vud8_kRcTrj6oEf1gyxZX_2CUHsu0715fjHhA6drQmKMwgvqZaOAkALNKGcBHuoRzpu/s200/Samsung-Galaxy-S4.jpg" /></td>
</tr>
</tbody></table>
<tr>
<td><img height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkjMzUgvx_2Tj2JDSOT3qb2rm1P5ewYon_762vQComg0Q-dggjR-HaTfVIcmn5PEiOqj-gA4JX4uBhyphenhyphenxVX8PhAQs8yDjp9NpKMx7LALrIA9RMG08_svL_ztdz52XsNqcHriG4YnE4xb6aM/s200/Nokia-Lumia-928-mockup.jpg" width="200" /></td>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQp0qYhuoBUZpqzFG1aVIYj-am2_ab53jAzZIcEyo_1Oyfy9gtippMbzI03byyAnkz29yfru00cgzhQlmSgc7UgDr25xwcjEeEnH29hWMgoNFNCgyGa8hp8fxPPEIPH5OWwQCumYL8y2Q/s200/sony+xperia+sp.jpg" /></td>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcWo0Yv5DlTwBTHvJptlRFQsRw8a3IhMQPMVgjM9QeHM-qGhHTY7fM0b9RMVemhBIABRXASZBt7Vud8_kRcTrj6oEf1gyxZX_2CUHsu0715fjHhA6drQmKMwgvqZaOAkALNKGcBHuoRzpu/s200/Samsung-Galaxy-S4.jpg" /></td>
</tr>
</tbody></table>
0 comments:
Post a Comment