Search This Blog

12 Oct 2013

How to Put Pictures Horizontally in Blogger (Side by side)

Tutorial [教程] • 12 OCTOBER 2013
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.

For example, i will create 1 row, 3 columns table.
Choose  Add a  Gadget look for HTML/Javascript 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/" 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/" 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/" 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 Red Text with your page link URL.
Replace the Blue Text with your picture title. 
Replace the Pink Text with yout height and width of pictures you want to set. Replace the Orange Text with the pictures you want to display.

24 comments:

Template developed by Confluent Forms LLC; more resources at BlogXpertise