Wednesday, January 30, 2013

How to Align Photos in Blogger

Let's face it, Blogger is not always the easiest thing to make look how you want it, so I've put together some instructions as to how to make the photos line up all nice and not be randomly strewn across your blog :)

 First I upload the pictures I want into blogger. And then you will need to click the HTML button and view your blog that way.

Once there, it should look something like this, minus the highlighting.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5BCsdB1jRw2GK2T8sNKwtxMl0UYO5xFgEu7Ggt1RyJz8o6rKeUtbcG2FeQrDUFXm1qglRxQjwGoFH71e_LHpfsNwqU0LwLqDIwJui4UNL3uS6f-iAc-ZcGpPOZ2ZYsSjdoDs8Bzh-9A4/s1600/Harry Potter Premier.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5BCsdB1jRw2GK2T8sNKwtxMl0UYO5xFgEu7Ggt1RyJz8o6rKeUtbcG2FeQrDUFXm1qglRxQjwGoFH71e_LHpfsNwqU0LwLqDIwJui4UNL3uS6f-iAc-ZcGpPOZ2ZYsSjdoDs8Bzh-9A4/s320/Harry Potter Premier.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQSCyWfBwmI5FFJtaW6IehmNPvIbFT2bhOaIAFfggoQtnNCtMe4FGsDsBzadcvdbcpWOxFVfPfIYj1wodNCzApD0J1pVxo6C_axBcSuMMP7M0oXiUsQlgiDhSlXkQx6oz0EoYyPikKqE/s1600/Circle Skirt.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQSCyWfBwmI5FFJtaW6IehmNPvIbFT2bhOaIAFfggoQtnNCtMe4FGsDsBzadcvdbcpWOxFVfPfIYj1wodNCzApD0J1pVxo6C_axBcSuMMP7M0oXiUsQlgiDhSlXkQx6oz0EoYyPikKqE/s320/Circle Skirt.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>

 Next you will want to go to the bottom of the text and enter this code. You can simply copy and paste it from here.

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


Once you've done that you will copy the blue highlighted part from the first section and paste it over the yellow highlighted part. The blue highlighted part is the URL for your photo. It will start with http:// and end with .jpg. 

When you are done, the bottom part will look like this:


<table>
<tr>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5BCsdB1jRw2GK2T8sNKwtxMl0UYO5xFgEu7Ggt1RyJz8o6rKeUtbcG2FeQrDUFXm1qglRxQjwGoFH71e_LHpfsNwqU0LwLqDIwJui4UNL3uS6f-iAc-ZcGpPOZ2ZYsSjdoDs8Bzh-9A4/s1600/Harry Potter Premier.jpg" width="350" /></td>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQSCyWfBwmI5FFJtaW6IehmNPvIbFT2bhOaIAFfggoQtnNCtMe4FGsDsBzadcvdbcpWOxFVfPfIYj1wodNCzApD0J1pVxo6C_axBcSuMMP7M0oXiUsQlgiDhSlXkQx6oz0EoYyPikKqE/s1600/Circle Skirt.jpg" width="350" /></td>
</tr>
</table>
Once you've copied and pasted, you can delete the original html from the uploaded photos, otherwise you'll have double photos. 

The size of these photos is specific to my blog, so if the photos are either too big or small you can adjust them in the HTML where it says width="350". Just change it until you get it how you want. I go back and forth between preview and the post.

Also, if you want more than two photos next to each other, you need to copy the purple part and paste it right below it. The original code only had two spots for photos, and this one is for three. You can do as many as you'd like, you'll just need to change the width, so they all fit.
<table>
<tr>
<td><img src="URL" width="350" /></td>
<td><img src="URL" width="350" /></td>
<td><img src="URL" width="350" /></td>

</tr>
</table>

Also, I keep a word document of all of the helpful HTML codes, so that next time I don't have to go find the post, I can just copy from the word document and go from there. If you have any questions let me know, and I hope this works for you!!

29 comments:

  1. Thanks, this is exactly what I need!

    ReplyDelete
  2. please tell me how display as text below image eg cup of tea below image of tea glass

    ReplyDelete
    Replies
    1. Once you get the photos lined up, if you click on the photo you want to add text under, the little toolbar pops up and then I click "add caption". From there you can type what you need and this keeps it directly under the photo. Hope this helps.

      Delete
  3. This helped me so much! Thanks! Here are your instructions in action!

    http://alittleofthis---alittleofthat.blogspot.com/p/favorite-posts-and-tutorials.html

    ReplyDelete
  4. Hi! I try your code, & it's working.. Thanks! I just make 3 x 3 tables.. Thanks again. But one thing, i want to zoom the image once the user click on it. Mind you share with me..

    ReplyDelete
  5. Hi!! Thanks so much for writing this post! The HTML code worked! I'm really slow with these things. I'm so glad there're people out there ready to take out time to help other bloggers!
    Thanks again!
    Cheers!

    ReplyDelete
  6. Hi love your photos of the coffees! I'm a coffee addict and I found your old site first before being taken here. Lovely colours on the blog!

    Thanks for the tip

    Mon

    www.confessionsofachopinholic.com

    ReplyDelete
  7. This helped sooooo much! Thanks!

    Tiffany Ima
    Style Honestly

    ReplyDelete
  8. Glad i stumbled across this; it really helped! Thanks!

    ReplyDelete
  9. Ahh thank you so much for your help! Made my life so much easier :)

    ReplyDelete
  10. Thanks! This really did the trick!

    ReplyDelete
  11. Thank you for this. It helped me a lot!

    leapyearlola.blogspot.com

    ReplyDelete
  12. Thankyou! you really helped me a lot!

    ReplyDelete
  13. thank you for this great tutorial!

    ReplyDelete
  14. Thank you so much. I just did this. I guess the trick is to make sure the pictures are of similar size to start with. Do you recommend a particular size for images if they are 3 across? Is it just the same thing again for another row of images?
    I have just started a blog so blogger like you are a massive help... Thanks so much
    http://frou-frou-designs.blogspot.com

    ReplyDelete
  15. Thank you so much for this post! I've been driving myself nuts trying to do this!

    ReplyDelete
  16. Thank you! this was really helpful :)

    ReplyDelete
  17. Hi. I have lined up the photos using your method and it looks really good, thanks. However, now when I click on the photos, they do not go to a slide show, as they did before. Have I missed something or is this functionality missing now? Thanks

    ReplyDelete
  18. Can you clarify a bit more on how to get more than 2 pictures beside each other? I'd ideally like three but where do I copy and paste the purple part too?

    ReplyDelete
  19. I figured it out! I do have another question, I have pictures that are different sizes, how do I get them all to be one size so it looks nice and flows together? I tried adjusting the width, but how do I adjust height?

    ReplyDelete
  20. Thanks For The Insight no more posting the < br/ > symbol every time I want to align my text

    ReplyDelete
  21. Brilliant. 4 pics lined up in a row ! But, like Steve Harding, I have lost the possibility to have captions and a slide show. Any ideas ?

    ReplyDelete

Feel free to leave a comment

Related Posts Plugin for WordPress, Blogger...