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.

23 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. Although they may seem small and inconsequential, magnetic name badges Johannesburg are actually more important and useful than most people assume. Magnetic name badges act as a symbol for businesses and individuals that wear them.

    ReplyDelete
  15. 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
  16. This helped a LOT. I have only just been birthed into the blogger world, very easily and clear. Thank you

    ReplyDelete
  17. 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
  18. I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details.
    White Label Website Builder

    ReplyDelete