Home > Blogger, Blogging, Internet Business, Wordpress > How to Put Pictures in one Row (Side By Side) Horizontally in Blogger

How to Put Pictures in one Row (Side By Side) Horizontally in Blogger

If you looking to this post, you will notice that i put several pictures in a row. Put pictures in one row is very easy if you use WordPress platform as your CMS. But it not that easy if you use Blogger. How to do this? By default, all pictures you uploaded into your Blogger blog are placed one after another. It will placed in one column, not side by side. What we can do is only align them into left, center or right. There is no option to arrange them horizontally. To make it possible, you must use table. For you who doesn’t know how to do it, i will give you step by step guide how to put pictures in one row both in Blogger. Just read below.

how to put pictures in one row side by side How to Put Pictures in one Row (Side By Side) Horizontally in Blogger

1. First thing to do is check the width of your post area. Enter your Blogger Dashboard and go to Layout > Edit HTML. click Proceed and find the following code :

#main-wrapper {
width: 600px;

Based on the code above, it means that my post area is 600px. Even it written 600px, you can’t use all of it. Because margins are included. Just reduce 10-30px from the width to get your post area width.

2. Next thing to do is measure how many picture will fit in one row. After that, you can upload the pictures.

3. After that you begin to make the table. For example, i will create 1 row, 3 columns table. Choose Edit HTML mode.

Place the code below on your post editor

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="0">
<tr>
<td><a href="http://yoururl.com/picture-01.jpg" target="_blank" title="pic title 01">
<img height=200 width=120 src="http://yoururl.com/picture-01.jpg" alt="pic name" style="border:none;"/></a></td>
<td><a href="http://yoururl.com/picture-02.jpg" target="_blank" title="pic title 02">
<img height=200 width=120 src="http://yoururl.com/picture-02.jpg" alt="pic name" style="border:none;"/></a></td>
<td><a href="http://yoururl.com/picture-03.jpg" target="_blank" title="pic title 03">
<img height=200 width=120 src="http://yoururl.com/picture-03.jpg" alt="pic name" style="border:none;"/></a></td>
</tr>
</table>
</div>

Replace the blue text with your picture URL. Replace purple text with the height and width of pictures you want to set. Replace the red and green with the pictures title.

 

If you want to learn more about HTML Code for table, you can learn it through W3 Schools.

 

pixel How to Put Pictures in one Row (Side By Side) Horizontally in Blogger

Incoming search terms:

  • wordpress put images in rows
  • adding a row of images at the top of your blog blogspot
  • how to put pictures in a row
  • how to put pictures side by side in blogger
  • put photo horizontal in blogger
Be Sociable, Share!
  • more How to Put Pictures in one Row (Side By Side) Horizontally in Blogger
  1. Reena
    April 1st, 2013 at 08:55 | #1

    This is great! Thank you! Is this applicable to different number of photos? I am assuming this can be used as long as the width fits

  2. May 19th, 2013 at 01:49 | #2

    Thank you so much for posting this!! It has been most helpful to me! Could you explain how to center the images in the post? Mine are off to the left side. Thanks! :)

  3. The Rayman
    February 11th, 2014 at 04:51 | #3

    There is a much easier way to do this which is also responsive. Just copy and paste the code below into your page or post and add your images.

    <!– Add your images here –>

  4. March 27th, 2014 at 10:47 | #4

    Bless your heart! I have tried several code fixes for this and yours is the only one that has been successful. Thank you!!

  1. No trackbacks yet.