Create a Responsive Image Gallery for Blogger – The Easier Way

Many readers have shared how this post, with its free code to create a responsive Blogger gallery, has helped them with their site.

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.

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

1. 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.
2. 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.
3. You will see all your images added to the page in a long line down the page.
4. Now, switch to HTML mode by clicking on the gray HTML button in the top toolbar.
5. You will see the code for all of your images in a long line of gibberish on the page.
6. 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.

1. Go to the Blog Gallery Helper page: http://pedroluisf.com/demos/bloggergallery/
2. Copy the code from Step 1 above and paste it into the top content box on the Helper page.
3. Click the Convert button.
4. Your new, converted code will appear in the bottom box.
5. 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.

1. On your Blogger site, open the page or post where you want the gallery to appear.
2. Change to HTML mode by clicking the button at the top of your editor.
3. We will now add the CSS code. Copy and paste the code from below at the TOP of your post or page.
4. 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).
5. Click the Update or Publish button on your page or post.
6. That’s it, you’re good.

the code is like this:

<!-- Blogger Responsive Image Gallery by Georgia Lou Studios, http://georgialoustudios.com -->
<!-- Replace the YOUR-LINK-HERE placeholders with the link of the page or post you want to link your image to -->
<!-- Replace the YOUR-IMAGE-HERE placeholders with the link to your image -->

<!-- Start Gallery Code -->
<style>

/* Make page full width on Georgia Lou Studios templates */
#sidebar-wrapper {display: none;}
.content-blog {padding-right: 0;}
.content-main {margin: 0 auto;}
#content {padding-right: 0 !important;}
/* End full width code */

.blogger-gallery {
 width: 100%;
 max-width: 100%;
 overflow: hidden;
}
.gallery-row {
 width: 100%;
 max-width: 100%;
 overflow: hidden;
 list-style: none;
 padding: 0 !important;
}
.post-body ul {
 padding: 0 !important;
}
ul.gallery-row li {
 display: inline-block;
 float: left;
 width: 32%;
 height: auto;
 padding: 0 1.5% 0 0;
}
.widget .post-body li {
 margin-bottom: 15px !important;
}
ul.gallery-row li:nth-child(3n) {
 padding-right: 0;
}
.gallery-row img:hover {
 opacity: 0.7;
}
.blogger-gallery h3 {
font-size: 18px;
text-align: center;
}

/* Media Queries for Responsiveness */
@media only screen and (max-width: 800px) {
ul.gallery-row li {
 width: 48.5%;
 padding: 0 1.5% 0 0;
}
ul.gallery-row li:nth-child(3n) {
 padding-right: 1.5%;
}
ul.gallery-row li:nth-child(2n) {
 padding-right: 1.5%;
}
}

@media only screen and (max-width: 400px) {
ul.gallery-row li {
 width: 100%;
 padding: 0;
}
ul.gallery-row li:nth-child(3n) {
 padding-right: 0;
}
ul.gallery-row li:nth-child(2n) {
 padding-right: 0;
}
}
</style> 

---------------------
source: georgialoustudios.com