Cara Membuat Gambar Berjajar Agar Posting Lebih Unik
Cara membuat gambar berjajar saya pilih untuk posingan kali ini karena ternyata dalam menulis postingan di blog secara default gambar-gambar yang diupload hasilnya akan menurun bukan mendatar. Awalnya pasti ada yang bingung karena ingin gambar-gambar yang diupload bisa berjajar, mudah-mudahan tutorial sederhana ini bisa menjawab kesulitan dari blogger pemula seperti saya.
Biar kita sebagai pemula, kita juga harus bisa membuat postingan seperti para master, agar postingan kita tak tampak terlalu lugu maka kita sudah selayaknya mencoba posting yang sedikit unik, jadi gambar-gambar yang tampil di artikel bisa menjadi warna lain yang positif. Walaupun tutorial seperti ini tergolong sederhana karena sudah banyak yang share, tapi setidaknya mungkin bisa sedikit membantu kepada yang masih belum mengerti sekali tentang kode-kode html.
Agar gambar bisa mendatar seperti gambar di bawah ini ternyata dibutuhkan kode-kode html untuk menyusunnya.
 | |  |
Untuk menyingkat waktu yuk kita langsung mulai saja mencoba agar gambar yang kita upload bisa berjajar, saya asumsikan anda sudah tahu caranya upload gambar di blogger, jadi kita langsung menyusun kode-kode html-nya saja.
Inilah kode-kodenya agar gambar bisa berjajar seperti gambar di atas:
<table><tbody>
<tr><td>Url gambar</td>
<td>Url gambar</td>
<td>Url gambar</td>
</tr>
</tbody></table>
Ganti tulisan Url gambar warna merah di atas dengan Url gambar anda, url gambar akan anda dapat saat anda meng-uploadnya, seperti ini contohnya:
<table><tbody>
<tr><td>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDgUFCnquxtJx_BjKUqt_03YDYT5Q3OvS23aWi1uy52DFlHl_1ldM8rElSp812qOApMI_MVidun0RyoLOQDVcouEhZ0mCztMR1Ln6-NiY_sCK9idL-RpZB0spc1F9M0qQ15hYyjysx-cXW/s1600/nama-gambar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="nama gambar" border="" height="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDgUFCnquxtJx_BjKUqt_03YDYT5Q3OvS23aWi1uy52DFlHl_1ldM8rElSp812qOApMI_MVidun0RyoLOQDVcouEhZ0mCztMR1Ln6-NiY_sCK9idL-RpZB0spc1F9M0qQ15hYyjysx-cXW/s200/nama-gambar.jpg" title="nama gambar" width="0" /></a>
</td><td>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDgUFCnquxtJx_BjKUqt_03YDYT5Q3OvS23aWi1uy52DFlHl_1ldM8rElSp812qOApMI_MVidun0RyoLOQDVcouEhZ0mCztMR1Ln6-NiY_sCK9idL-RpZB0spc1F9M0qQ15hYyjysx-cXW/s1600/nama-gambar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="nama gambar" border="0" height="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDgUFCnquxtJx_BjKUqt_03YDYT5Q3OvS23aWi1uy52DFlHl_1ldM8rElSp812qOApMI_MVidun0RyoLOQDVcouEhZ0mCztMR1Ln6-NiY_sCK9idL-RpZB0spc1F9M0qQ15hYyjysx-cXW/s200/nama-gambar" title="nama gambar" width="0" /></a>
</td><td>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv01nLf5l1CnNHHl1L_7ZBbtO80opcGrUDiF2QW1VeGfMHDMcdmqIU-AM_6GpEs4ruxLo0nacPlT4NteNyoHmx64KWoIw3OX2jjzdgSXuc1W8_-UFctrHmVXP3xIMH-ClOaLEW363cwbf3/s1600/nama-gambar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="nama gambar" border="0" height="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv01nLf5l1CnNHHl1L_7ZBbtO80opcGrUDiF2QW1VeGfMHDMcdmqIU-AM_6GpEs4ruxLo0nacPlT4NteNyoHmx64KWoIw3OX2jjzdgSXuc1W8_-UFctrHmVXP3xIMH-ClOaLEW363cwbf3/s200/nama gambarr.jpg" title="nama gambar" width="0" /></a>
</td></tr>
</tbody></table>
Semua yang saya kasih warna merah itu adalah url gambarnya, ganti semuanya dengan url gambar anda.
Susunan kode html diatas itu untuk tiga gambar yang ingin disejajarkan seperti contoh gambar di atas, anda bisa menambahkan gambar berapapun yang anda inginkan, anda tinggal menambahkan kode-kodenya saja.
Ternyata mudah sekali kan membuat gambar berjajar dalam postingan di blog? Hanya sedikit menambah kode-kodenya saja gambar yang kita upload sudah berjajar, mudah-mudahan postinganku kali ini bisa bermanfaat bagi yang masih bingung untuk membuat gambar berjajar di blog. Untuk yang ingin tahu kode-kode warna silahkan baca artikelnya.
loading...
Tapi tidak responsive
ReplyDelete