My blog post How to Create a Responsive Blogger Image Gallery has been very successful. I think my most successful post to date.
Many readers have shared how this post, with its free code to create a responsive Blogger gallery, has helped them with their site. They’ve even shared their designs, which I love to see!
One of my readers took it a bit further. Pedro, a developer, got tired of having to copy and paste the image links into the code. I can totally understand this! This is the most tedious part of the process.
How to use the gallery script
It works like this:
- Add your images to your post or page on your Blogger site.
- Copy and paste that block of code into Pedro’s tool.
- Click the Convert button.
- Copy and paste the images code into your Blogger page or post.
- Add the style code to your template, post or page.
So, I’ve revised the original process but adding the use of Pedro’s tool. You can still find the original directions at the original post: How to Create a Responsive Blogger Image Gallery.
Directions for the Responsive Gallery Using Pedro’s Script
Step 1: Upload Your Images
For the purposes of this tutorial, you will need to host your images on Blogger. That’s ok. It’s free and easy!
So, let’s upload our images
- In your Blogger Dashboard, create a new page or post. I usually like to use a page. You don’t need to name it or save it or anything.
- In Compose mode, using the Insert image button, add your images for your gallery to the page. You can do this one at a time or make it quicker by uploading and inserting a whole batch. TIP: Upload the images in the order you want them to appear in the Gallery.
- You will see all your images added to the page in a long line down the page.
- Now, switch to HTML mode by clicking on the gray HTML button in the top toolbar.
- You will see the code for all of your images in a long line of gibberish on the page.
- OK, now keep this page open in a tab on your browser. We will come back to grab these image links in a minute.
Step 2: Get your Images Code
Ok, now we’re going to use Pedro’s helper tool.
- Go to the Blog Gallery Helper page: http://pedroluisf.com/demos/bloggergallery/
- Copy the code from Step 1 above and paste it into the top content box on the Helper page.
- Click the Convert button.
- Your new, converted code will appear in the bottom box.
- Click the Copy to Clipboard button to easily copy the code.
Step 3: Insert the Code
Ok, now we’re going to insert this code into a page or post.
- On your Blogger site, open the page or post where you want the gallery to appear.
- Change to HTML mode by clicking the button at the top of your editor.
- We will now add the CSS code. Copy and paste the code from below at the TOP of your post or page.
- Now, below the CSS code, paste the image code into your post or page (the code from Pedro’s Helper page). Make sure you are placing it in the correct place where you want the gallery to appear on your page (i.e. above or below other content).
- Click the Update or Publish button on your page or post.
- That’s it, you’re good.
Huge thanks to Pedro for this awesome tool that makes the process a lot easier!