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.

29 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
  19. Thanks for this valuable information, www.chinpack.com

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

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

    ReplyDelete

  22. parking permmits
    text message to tenants
    Cloud based parking management
    software for condominiums
    Online Parking Software for apartment owners Assosiation
    Due to the overwhelming needs for well-organized parking systems nowadays, smart parking solutions are being introduced in the marketplace. The best part here is that these excellent parking software are available online. Ideally, these smart tools are perfect options for apartment owner. If you are interested to get the real benefit of these tools, it is important that you are crystal clear with all its features and its implications.
    Online parking software for apartment owners are excellent facility management systems that are very flexible and reliable. Plus, another great thing about these tools is that they do not frequent upgrades in order to maintain their operational efficiency. More than that, these dependable online parking software are deemed as straightforward solutions to the increasing height of operational challenges.
    Monitoring and control
    With online parking management software, apartment owners can have an easy access with the different aspects of their facilities such as VMS signs, security alarms, lane traffic and equipment status. Also, they have the capability to close and open barrier gates as well as restart lane equipment. You can also count on their operational efficiency when it comes to sending a new fee to the pay station.
    Revenue management
    Online parking software serves as smart turn-key facility management solution for apartment owners which include real time transactions, occupancy counts, ticket tracking, parking rate programming, sign controls, validations and more. All of these excellent benefits can be achieved with the help of a smartphone. In addition, coupon management and validation become more cost effective and simpler with the presence of integrated module that comes with standard features.
    Validation solutions
    There are many reliable parking software designer offers wide array of intelligent validation solutions. Say for instance, there are parking management solutions where in merchant accounts as well as sub-accounts are made in the database. As such, there is an available option to come up with unlimited quantity of merchant accounts. Plus, if you are in tight budget, there’s nothing to fret because these types of validation are created in a single-hour fee which usually comes with discounts. Once the validations profiles are already made, they can now be used for wide range of applications such as barcode sticker, self-service units and chaser tickets.
    Access control
    At present, parking access needs wide array of controls as well as billing options that provide apartment owners flexible solutions in bringing in new business. As such, these online parking software for apartment owners are their enterprise parking access brilliant control solution. Every facility owner can now take advantage of multiple options of the latest technologies such as AVI, LPR, and chip card.
    Now that you are aware about the availability of excellent parking management software, you can now maximize the various operational aspects of your facility. With the help of the excellent functionalityof these software, every apartment owner can now have the real benefit of a well-streamlined parking systems. Check out these online parking management tools now and see what they can do for you. Visit their website at http://webparkingsoftware.com for more information about their Online Parking Software for apartment owners.
    .

    ReplyDelete
  23. 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