Monday, May 27, 2013

Putting your picture side-to-side in blogger

So I was looking at my previous posts and the pictures are scattered. It looks awful! Not to mention waste of energy scrolling down to see all the pictures. There must be a better way to post many pictures in a post.

I found this html code:

<table>
<tr>
<td><img src="URL" width="125"/></a></td>
<td><img src="URL" width="125"/></a></td>
<td><img src="URL" width="125"/></a></td>
<td><img src="URL" width="125"/></a></td>
</tr>
</table>



This is a very straightforward code.
  • put the url of the image in place of the URL
  • change the width to fit your blog
If you don't want to get another website to upload your picture, you can just upload your pictures here in blogger and just copy the URL from img src="URL".Then delete the picture in Compose Mode for easy editing.

If you want the image to be part of the slider (the one when you click on an image and a convenient image slider pops out to show all the images.)

<table>
<tr>
<td><a href="URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="URL" width="125"/></a></td>
<td><a href="URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="URL" width="125"/></a></td>
<td><a href="URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="URL" width="125"/></a></td>
<td><a href="URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="URL" width="125"/></a></td>
</tr>
</table>


The same with the previous code:
  • put the url of the image in place of the URL
  • change the width to fit your blog
  • sample image here




No comments:

Post a Comment