Tuesday 24 May 2016

How to add a simple image gallery to Blogger

This tutorial is going to be a little bit different. Rather than a craft project, I'd like to share how I'm creating the new galleries here on my blog (check them out in the tabs above!). This will also be my first video tutorial! Don't worry, I'll spare you my ugly mug and stick to narration only! Please comment below with any comments, constructive feedback, questions or suggestions. I apologise in advance for the sound quality, the built-in microphone on my laptop isn't the best!



Here are the written instructions in case there's any issues with the video.  They also contain the HTML coding mentioned in the video.

The link to the original video that I got the idea from is here.

Let's get started!

I'm going to assume that you're looking at this post because you already have a Blogger blog and have started posting, but you'd like to add a picture gallery to your posts or to a separate page. I'm going to give you some extremely simple html coding to help with creating a basic picture gallery. Firstly, I suggest that you prepare your images and try to use square ones if you can. Three small images fit neatly across a blogger page. Don't worry if you have large images, we're going to use blogger to display smaller ones on the page, and then when your visitors click on them, they'll come up larger in a light box effect. Log into your blogger account and start a new page or post in your blog. Change from the Compose mode to the HTML mode using the buttons on the top left.  Copy and paste the following HTML code into your post:

<table style="width:100%">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

It should look like this:


This sets up a table with just one row of 3 images.  For each additional row of images you would like to add, insert just this html between the </tr> and </table> tags:

<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>

The coding for a table with 2 rows of 3 columns would then look like this:



All good so far? Great!  Let's get some images in here!

Still in the HTML composer, make sure your cursor is between the first pair of <td> </td> tags.  Click on the 'Insert image' icon to bring up the picture uploader. Upload or import your pictures from where ever you have them saved. Select just one image and click "add selected."  Another dialogue box will pop up.  Choose "None" for alignment and "Small" for image size and click ok.  The HTML coding for this image will be inserted in its place in the table.  Put the cursor between the next <td> </td> tags and repeat the process to insert the next picture. All the pictures you uploaded should be in the "From this blog" tab in the add image dialogue box.  The HTML will look something like this when you're done:


 
Now preview your post so you can see how it will look.  Here's mine:


Now, the only problem with the preview mode of Blogger is that it doesn't let you click on anything, so you won't be able to see the lightbox effect until you publish.  Go ahead and do that, you can always revert it back to draft as soon as you're sure it's working if you need to edit further.

Now when you view your page or post you'll be able to click on the images in your gallery and you'll get something like this:



Neat! Now you have a gallery that you can keep adding more rows of images to. You could easily use this to make the images all links to somewhere else either on your blog or to other sites. If you'd like to know how, let me know in the comments and I can make another tutorial to show you! I hope this was useful. Once again, please leave any constructive feedback, suggestions or questions in the comments and I'll get back to you as quick as I can.

Cheers, Emma.

71 comments:

  1. Very helpful. Thank you from a new blogger. You can check my work here
    khoete.blogspot.com.tr

    ReplyDelete
  2. Hi Emma. Your post is wonderful. I really didn't think that it's possible to make good looking gallery on my blog. With little bit adjustments of your code I made it. You are great.
    Thank you again.

    ReplyDelete
  3. THANK YOU SOOOO MUCH! Been looking for this for over a day! Now that you showed me I'm like, duh! But your instructions were perfect as well.

    ReplyDelete
  4. Thank you for this easy blogger gallery . I will use this on my blogg ,but wondered if its possible to add some text to each image in the gallery and how to do it ?

    ReplyDelete
  5. I was wondering how to add text in between rows of pictures? So add 3 pics then add text, then add 3 rows of pics.

    ReplyDelete
  6. Thanks a lot for your helpful tutorial

    ReplyDelete
  7. https://appstalk1.blogspot.com/

    ReplyDelete
  8. I've put a link to it on the bottom of my blog post. Amazing! Thank you! - http://howtobehippy.blogspot.co.uk/2017/12/have-5-family-christmas-and-etsy-gifts.html

    ReplyDelete
  9. Thank you! That's exactly what I was looking for! Thank you for your time and dedication.

    ReplyDelete
  10. Excellent illustration and tutorial. Thank you!

    ReplyDelete
  11. I was wondering how to add text in between rows of pictures? So add 3 pics then add text, then add 3 rows of pics. www.raambaanilaj.com/

    ReplyDelete
  12. Thank You.This is exactly what I am looking for

    ReplyDelete
  13. Thanks for this post, I really appriciate. I have read posts, all are in working condition. and I really like your writing style. Keep it up like. solar garage outdoor lights waterproof warm white led

    ReplyDelete
  14. I am new in blogging. During search related to gallery creating in blogger I came to your blog post and video tutorial on YouTube. Your blog post and tutorial both are amazing. For Indian tourist places please visit my blog TouristBug.blogspot.com . Here you will find some good places for visiting in India.

    ReplyDelete
  15. This helped a LOT. I have only just been birthed into the blogger world, very easily and clear. Thank you

    ReplyDelete
  16. Thanks so much Emma for this video tutorial. The instructions are very clear and I can see everybody in this comments section confirming that. But I wonder why it is not working for me. I have followed your instructions to the letter but have still found it difficult for the images to load, even as I made them square. Is there something I'm missing? I would have loved to put a snapshot of what I did on the html but the publish button rejected the html code.

    If it is possible, please respond to me through my email: samchidiebere@yahoo.com
    Thank you

    ReplyDelete
  17. Thanks for this valuable information, www.chinpack.com

    ReplyDelete
  18. Thank you so much. Easy and simple pictures album posting. Really appreciate.

    ReplyDelete
  19. Stechitegist.com
    Wish to add external comments box to the site

    ReplyDelete
  20. Thank you for this tutorial - I used it in combination with another set of guidelines and came up with the perfect solution for my blog.

    ReplyDelete
  21. I like your post. It is good to see you verbalize from the heart and clarity on this important subject can be easily observed... JPEG Optimizer

    ReplyDelete
  22. Thanks a lot, my blog has a beautiful galery, but if i want to see the pictures in a phone, the images are distorted. Do you know how i could correct this issue?

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. Finally I found this article ! Carry on- I have a secret formula for you.
    CHECK NOW

    ReplyDelete
  25. Best tutorial on this I have seen - very helpful, thank you!

    ReplyDelete
  26. Hi, Emma,
    I would like to say thank you to your tutorial, very useful, clear, nice and workable,
    million thanks again. :D

    ReplyDelete
  27. Get Thanksgiving day images, best website visit here.

    ReplyDelete
  28. This was so helpful. It saved me a lot of time and made my work much easier. Thank you so much. You are amazing.
    Keep up the good work. Much love <3

    ReplyDelete
  29. THANK YOU. THANK YOU SO MUCH .YOU HAVE HELPED ME SO MUCH WITH THE TUTORIAL AND EVERYTHING

    ReplyDelete
  30. ในปัจจุบันมีเว็บคาสิโนออนไลน์ที่เกิดใหม่ขึ้นมาเพื่อบริการนักพนันออนไลน์อย่างมากมาย ผู้ให้บริการนำเกมการพนันที่ได้รับความนิยมอย่างแพร่หลายไว้คอยบริการผู้ชื่นชอบที่มีความชอบแตกต่างกันออกไป ซึ่งเกมคาสิโนที่เหล่านักพนันนิยมชมชอบ เช่น เกมสล็อต , บาคาร่าออนไลน์ , การพนันไก่ชน รวมถึงเว็บไซต์ การพนันออนไลน์ เหล่านี้ยังให้บริการเดิมพันกีฬาทุกประเภท ซึ่งการพนันกีฬาที่เป็นที่นิยมสูงสุด คือการ เล่นบอลออนไลน์ ซึ่งเป็นเกมพนันที่จะทำเงินได้อย่างเป็นกอบเป็นกำ

    ReplyDelete
  31. Log on to a trusted game like scr99sg3.com and choose from the widest varieties of games at affordable prices into this online casino in Singapore.

    ReplyDelete
  32. Today, online slot games in Singapore and Malaysia are becoming very popular among casino lovers and gambling enthusiasts. It is offering them a huge chance to win mega Jackpots, almost every hour and day.

    ReplyDelete
  33. I really like it!
    Thanks so much for sharing this article 20 Photo Clips LED Fairy Lights White

    ReplyDelete
  34. Thank you,

    We found this information helpful too.

    ReplyDelete
  35. Rocks Player Ultra HD Video Player is Simple and Fast video player with which you can play HD & ultra HD videos of all formats. Rocks Player offers unique set of features like Gesture control for Volume, Brightness, Playback speed and Forward, Assistance of subtitles of videos, Auto sensor etc. Rocks Player give you enjoy smoother, better quality videos & movies.
    For more details download this app now: Rocks Player

    ReplyDelete
  36. Very helpful code for side by side image in blogger

    ReplyDelete
  37. This the best urine thc test will test your urine for Marijuana (cannabis).
    Read more :order urine drug test kit

    ReplyDelete
  38. Thanks Emma,
    Worked a treat. I think blogger should employ you to fix their woefully neglected product

    ReplyDelete
  39. This post is very good I am very happy to see this post. Thanks for sharing such a great article. Keep up the work... your site is great, and it's helping us a lot.
    Video Player App
    Ad-Free Video Player

    ReplyDelete
  40. Brilliant. Many thanks for sharing.

    ReplyDelete
  41. Thank you for this tutorial. This Is Ad Free Video Player.
    HD Video Player

    ReplyDelete
  42. ממש טוב תודה, כמה פשוט ככה טוב תודה

    ReplyDelete
  43. I really enjoyed the post. https://namasteindore.blogspot.com/2023/08/indore-weather-temperature-best-time-to.html

    ReplyDelete
  44. Thanks for the blogpost, I have followed this and implemented a bit of improved version. Here is link: How to imeplement Bolgger Galleries

    ReplyDelete
  45. Thank you very much! The tutorial really helped me to create gallery on my blog. <3

    ReplyDelete
  46. I hope I’ll suggest someone to see this tutorial who love to make crochet. Professional Color Correction Service

    ReplyDelete