How To Set Your Blogs Default Image On Blogger

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

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. ChooseEdit 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.

Related Posts Plugin for WordPress, Blogger...