Membuat Galeri Foto Di Blog Dengan HTML

Postingan artikel dengan tambahan galeri photo atau pun gambar tentunya akan membuat tampilan blog para sobat jadi lebih simple dan terlihat rapih. Jika kalian menginginkan suatu album photo yang ingin di tampilkan dalam satu postingan namun bingung cara membuatnya, Yuk bareng-bareng belajar membuat galeri album foto dengan HTML. Memang rada mudah-mudah rumit cara membuatnya, apa lagi yang hanya bermodalkan ponsel seperti saya. Untungnya di blogspot tidak terlalu sulit dalam memposting dengan html, oia agar lebih mudah gunakan Opera Mini 4.2 saya gunakan versi itu karena tidak terlalu berat dalam ponsel jenis apapun minamal ada javanya. yang pertama persiapkan gambar atau foto yang ingin para sobat tampilkan, lalu di upload bisa lewat photobucket, picasa atau tempat lain untuk penguploadan yang para sobat suka. Oia jangan di facebook ya, karena alamat link foto para sobat di fb tidak bisa ditampilkan untuk umum. Karena yang di butuhkan adalah alamat linknya untuk menampilkan gambar, kalau saya biasa mengunduh langsung lewat blogspot. Untuk yang pertama copy paste atau salin script HTML berikut :
<div align="center"> <table width="400" border="0" cellpadding="2" cellspacing="2"><tr><td><a href=""><img src="" width="128" height="150" border="0"></a></td><td><a href=""><img src="" width="128" height="150" border="0"></a></td><td><a href=""><img src="" width="128" height="150" border="0"></a></td></tr><tr><td><a href=""><img src="" width="128" height="150" border="0"></a></td><td><a href=""><img src="" width="128" height="150" border="0"></a></td><td><a href=""><img src="" width="128" height="150" border="0"></a></td></tr><tr><td><a href=""><img src="" width="128" height="150" border="0"></a></td><td><a href=""><img src="" width="128" height="150" border="0"></a></td><td><a href=""><img src="" width="128" height="150" border="0"></a></td></tr></table></div>
script di atas adalah pola dari penyusunan letak gambar 9 foto dengan tiap foto tinggi 150 lebar 128, bisa di ubah sesuai keinginan. Asal tidak melebihi kapasitas lebar halaman posting. Biasanya minimal 400 untuk lebarnya, jadi jika lebar tiap gambar 128 maka hanya cukup untuk 3 gambar yang di tampilkan. 128 x 3 = 384 maka cukup segitu, jika ingin lebih maka di haruskan menambah lebar polanya yang dari 400 menjadi yang ingin para sobat inginkan. Rata2 entri blog tidak terlalu lebar.
Untuk meletakan link gambar disisipkan diantara kode "" contohnya sebagai berikut : <div align="center"> <table width="400" border="0" cellpadding="2" cellspacing="2"><tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMwBuhj-5cYJ1kiKgxHDtS_yPhfIZpbq35hIU0Y3MDHa5kGsXkZWKPI5bD5JG7nxprBmVFvwq-Vmcbshc48i7713XSARnzglDGPAKIYMnC_Wu_WsRbrHEIXwm7QTU2rYYsjBMX7HOw4uc/s1600/blogger-indonesia.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMwBuhj-5cYJ1kiKgxHDtS_yPhfIZpbq35hIU0Y3MDHa5kGsXkZWKPI5bD5JG7nxprBmVFvwq-Vmcbshc48i7713XSARnzglDGPAKIYMnC_Wu_WsRbrHEIXwm7QTU2rYYsjBMX7HOw4uc/s1600/blogger-indonesia.png" width="128" height="150" border="0"></a></td><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXjYtCRm0YxWVukyJxAi0lLYymbFhG7HNmYnW3uR7CjKhn4T4N6VcqwU3lDBAxeyWR9ezrs3-q6YPeHiA1rt02o93hOGNDP1w93k8_7LYUScuSE-pEiAOy990Eh2gLXcrquPD7TooGRr8/s1600/helpbot.gif"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXjYtCRm0YxWVukyJxAi0lLYymbFhG7HNmYnW3uR7CjKhn4T4N6VcqwU3lDBAxeyWR9ezrs3-q6YPeHiA1rt02o93hOGNDP1w93k8_7LYUScuSE-pEiAOy990Eh2gLXcrquPD7TooGRr8/s1600/helpbot.gif" width="128" height="150" border="0"></a></td><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpCIbuZlGYItP7QHJdZs3e8Z4qsi4gQQGm84JuPSNBXoGz0KGpvxZwYj2lOYvyS8MDiE81MtxgVSQFVX_ZGsoZcRi0_Sfi6Mk0wA8r_ynKT6yCrVVWdeTwdlrjBcz_a2Cc1IThyphenhyphenUGods8/s1600/indonesia.www.aisenodni.blogspot.com.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpCIbuZlGYItP7QHJdZs3e8Z4qsi4gQQGm84JuPSNBXoGz0KGpvxZwYj2lOYvyS8MDiE81MtxgVSQFVX_ZGsoZcRi0_Sfi6Mk0wA8r_ynKT6yCrVVWdeTwdlrjBcz_a2Cc1IThyphenhyphenUGods8/s1600/indonesia.www.aisenodni.blogspot.com.jpg" width="128" height="150" border="0"></a></td></tr><tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZoFRWFowRujLHiVqt_LSP0vAfgzOhx2k_r2nvkAlmpe1zVw-XywDjaCeGpMXFC22mBhufliwWnON5l3WDtwP7noVAqaeeFTl2rZcMQBhAjNr2GQRqimxaALwKW8i5ONCR_OgVAwBYcpk/s400/indonesia_www.aisenodni.blogspot.com.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZoFRWFowRujLHiVqt_LSP0vAfgzOhx2k_r2nvkAlmpe1zVw-XywDjaCeGpMXFC22mBhufliwWnON5l3WDtwP7noVAqaeeFTl2rZcMQBhAjNr2GQRqimxaALwKW8i5ONCR_OgVAwBYcpk/s400/indonesia_www.aisenodni.blogspot.com.jpg" width="128" height="150" border="0"></a></td><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO5K48Pk2NtE1o2A3ioi-54ibtTXUzVVPAZGxPgsD0TE4jy5RIKS-Xm6jJDAC3sBRYIoo_yl9sqe4j_9XCVX8nnKPqFhWLkz4g4jIHaY8NfNPFp8z7ojMvfDZF3KijeOBlOya0BBk_LH4/s1600/tempo-doeloe.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO5K48Pk2NtE1o2A3ioi-54ibtTXUzVVPAZGxPgsD0TE4jy5RIKS-Xm6jJDAC3sBRYIoo_yl9sqe4j_9XCVX8nnKPqFhWLkz4g4jIHaY8NfNPFp8z7ojMvfDZF3KijeOBlOya0BBk_LH4/s1600/tempo-doeloe.jpg" width="128" height="150" border="0"></a></td><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjuX53-T3NBOXIYVTauo_hF0IVgoIKxDbS58gkFin0ifqEIbtJ2eQT6iogtebh8IR7HnVJpII7BYhIqpahYRAStjw1mIrGx4N8MS3XdZXh2YEW2Mkn4TRQODKNsTYv46zbGsN8CuzsVIg/s1600/GREEN-INDONESIA.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjuX53-T3NBOXIYVTauo_hF0IVgoIKxDbS58gkFin0ifqEIbtJ2eQT6iogtebh8IR7HnVJpII7BYhIqpahYRAStjw1mIrGx4N8MS3XdZXh2YEW2Mkn4TRQODKNsTYv46zbGsN8CuzsVIg/s1600/GREEN-INDONESIA.jpg" width="128" height="150" border="0"></a></td></tr><tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigc3AzWKGFP0Cp0GSlazwlq8lq7kxirRhhXE-uk_IiZrbl15RklyG0vVW6-hpnVGvxcmJrT1AcwOdbv3vo6SWZJ9IwM0GuXN59yXofXhV7YDTv1iCx-U0dgNiRfd_bEnwEiKrFkhxKbb8/s1600/unyil.www.aisenodni.blogspot.com.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigc3AzWKGFP0Cp0GSlazwlq8lq7kxirRhhXE-uk_IiZrbl15RklyG0vVW6-hpnVGvxcmJrT1AcwOdbv3vo6SWZJ9IwM0GuXN59yXofXhV7YDTv1iCx-U0dgNiRfd_bEnwEiKrFkhxKbb8/s1600/unyil.www.aisenodni.blogspot.com.jpg" width="128" height="150" border="0"></a></td><td><a href="http://aisenodni.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjliejnpIZuduHknT-i5xfQ2cHuZh_xuS-1ZZDMLrkpCk9zvHaPATXgTIQetkULwWv0xECUIAmwB1GI5BCz5h6Xj0VNzKf4CqSoda4Y16eGuFzbNx4HJGs8Fc6dM6vN9kmBkx2wXb9CjyI/s1600/garuda-indonesia.jpg" width="128" height="150" border="0"></a></td><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGwLn34LDy0lD5ztz9KFSo_HsOp9th91tcOW0Jv8YFXuq-FaE3p0TBSAyGHDQMhHyUVbQyNm1mLWCiDFsX1P2YAYjly4la-nXsbyajJBOC4rfwdae8DfZvqwpCI_yVXxE-YpCXZKG5HBY/s1600/greenindonesia.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGwLn34LDy0lD5ztz9KFSo_HsOp9th91tcOW0Jv8YFXuq-FaE3p0TBSAyGHDQMhHyUVbQyNm1mLWCiDFsX1P2YAYjly4la-nXsbyajJBOC4rfwdae8DfZvqwpCI_yVXxE-YpCXZKG5HBY/s1600/greenindonesia.jpg" width="128" height="150" border="0"></a></td></tr></table></div>
Dan hasil jadinya seperti gambar dibawah ini. Untuk menganti gambar dengan link yang diinginkan seperti dialihkan ubahlah di kode "" a hrefnya seperti gambar ke 8, berbeda saat di perbesar atau di klik.

Mudah bukan? Jika masih sulit coba lagi ya.
Semoga Berguna.