Wednesday, 5 July 2017

kelvin Ehiozefe

How to Align side by side Photos on Blogger

Hello friends, got something new to share with you. If you are very familiar with Blogger πŸ˜‹πŸ˜Š or have a blog with blogspot.com you understand how complex it could be trying to align two or more photos side by side in a blog post. In order to make your post more navigation friendly for readers. Are you in that situation? πŸ˜‘ πŸ˜₯take deep breathe i got the solution.

The use of images on a blog post helps to makes our post more readable and explainable. The more photos you use in a blog post, the easier it is  for your blog readers to understand your message;

METHOD 1
Step 1
Before we begin you need images, upload all your photos on blogger and save, for every saved image Blogger will attach a unique URL--this will be require later on as we progress. To get the URL of your photo go to where you have stored the photos right-click on your mouse a light-box will appear scroll down to where you have "copy image link" and click.

Step 2
welcome to the finish stage for method 1 in aligning images side by side on Blogger. So easy right! Now, for the final step add the following html code;

<table>
<tbody>

<tr>

<td><img src=“ add image 1 url here” border="0" width="250"/>
</td>
<td><img src=“ add image 2 url hereborder="0" width="250"/></td>
</tr>
</tbody>

</table>

Step 3
You can Edit the image width to your choice <width="500 or more">

This should be your Result:

Note: you can also link your images to internal or external page by adding the following code;

<a href="page link"><img src="image url">


METHOD 2
This method may not be very simple as method 1 but it thus work excellently for the purpose of this tutorial.

 1 Add code to your post:

<img src="add image url here" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;">
2 Repeat the code for every new photo without skipping line or spaces

3 After your last photo add the following code to stop the flow: 


<p style="clear: both;">

you can also link your images to internal or external page add <a href="page link"> before <img src="image url">

4 To add more images with method 2 simply divide 100% by the number of images you want to add. This gives you the width of the image and its margin-right. You should now decide how much of that amount you want to be for the image, and how much you want to be the margin.
Like this:
Three images across: 30% + 1% times 3 = 99%.
Four images across: 23% + 1% times 4 = 96%.
Five images across: 19% + 0.5% times 5 = 97.5%

Voola!!! we are done you can go on now start aligning your post images to make your posts more navigation friendly for your readers. if your ran into trouble implementing this code leave me a comment in the comment area. i hope i did good with this. you should share this post with friends!!!



kelvin Ehiozefe

About kelvin Ehiozefe -

Hi, my name is Kelvin Ehiozefe am an ICT entrepreneur and a Content writer. I write about Business start-up, Blogging, Lifstyle and Technology

Subscribe to this Blog via Email :