How to Add Multiple Photos as a Horizontal Scrolling Filmstrip in Blogger

When you upload a massive batch of photos into a Blogger post, the platform automatically stacks them vertically and loads them at full resolution. This makes the page difficult to scroll through and slow to load for anyone on a weak internet connection. I wanted to share complete visual logs without limiting my posts to just ten highlight photos. This guide outlines the exact method to bypass Blogger's default behavior and pack dozens of images into a fast loading horizontal filmstrip.

Step 1: Fixing the Theme and Layout with Global CSS

Custom themes like SoraEdge apply semi transparent hover overlays to images. Blogger also wraps every uploaded image in nested container tags. When fifty photos stack up, those hover effects break and bleed across the entire page layout.

Why this step: We need a global CSS rule to force the images into a compact three row grid, dissolve Blogger's forced formatting, and disable the theme's default hover styling.

How to do it: Navigate to Theme > Customize > Advanced > Add CSS in your Blogger dashboard. Paste the code below and click the save icon.

Global CSS Rules

/* Multi row horizontal filmstrip */ .multi-row-filmstrip { display: grid !important; grid-template-rows: repeat(3, 110px) !important; grid-auto-flow: column !important; grid-auto-columns: 110px !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; height: 355px !important; padding: 10px 0 !important; margin: 15px 0 25px 0 !important; scrollbar-width: thin !important; -webkit-overflow-scrolling: touch !important; } /* Dissolve nested Blogger wrappers */ .multi-row-filmstrip div, .multi-row-filmstrip p, .multi-row-filmstrip .separator { display: contents !important; } /* Remove blank line breaks */ .multi-row-filmstrip br { display: none !important; } /* Square container for links */ .multi-row-filmstrip a { display: block !important; position: relative !important; width: 110px !important; height: 110px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; } .multi-row-filmstrip a:hover { background: transparent !important; } /* Disable hover overlay bleed */ .multi-row-filmstrip *::before, .multi-row-filmstrip *::after { display: none !important; content: none !important; } /* Square thumbnail styling */ .multi-row-filmstrip img { width: 110px !important; height: 110px !important; max-width: 110px !important; max-height: 110px !important; object-fit: cover !important; border-radius: 6px !important; display: block !important; margin: 0 !important; transition: opacity 0.2s ease !important; } .multi-row-filmstrip a:hover img { opacity: 0.85 !important; }

Step 2: Automating the Image Compression Script

CSS only changes how an image looks on the screen. If the browser downloads fifty full resolution files just to display tiny thumbnails, the page will throttle user devices and consume massive amounts of data.

Why this step: We need the page to load lightweight, low resolution thumbnails initially to save speed and bandwidth. Anyone viewing can still view the full picture by clicking on it. This script automatically rewrites the image URLs in the background to request small thumbnails from Google servers so that the page loads instantly without bottlenecks. This code only targets images inside your filmstrip, so the rest of your photo posts will function normally.

How to do it: Navigate to Layout in your Blogger dashboard. Click + Add a Gadget in any widget slot, such as your Sidebar, Footer, or bottom Section areas. Select HTML/JavaScript. Leave the title blank, paste the script below into the content box, and click save.

Automated Thumbnail Script

<script> document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.multi-row-filmstrip img').forEach(img => { if (img.src.includes('/s1600/')) { img.src = img.src.replace('/s1600/', '/s320/'); } else if (!img.src.includes('=s320')) { img.src = img.src.split('=')[0] + '=s320'; } }); }); </script>

Step 3: The Reusable Post Workflow

You can write your post normally, insert your writing, and place your highlight photos freely. Whenever you want to insert the filmstrip, you drop this self contained module into place.

How to create a filmstrip in your posts:

1. Write your regular post and upload your highlight photos directly in Compose view.
2. Switch to HTML view, scroll to where you want the gallery to sit, and paste the template code below.
3. Switch back to Compose view. You will see a clear green box and a clear red box with blank working space between them.
4. Click in the empty space between the green and red boxes, then upload your bulk photos. Every photo will land safely inside the container.
5. Click the green box and hit Backspace to delete it. Click the red box and hit Backspace to delete it.
6. Publish your post. Your images stay wrapped in the filmstrip without needing to touch HTML view again.

Blogger Master Filmstrip Module

<!-- BUFFER SPACE ABOVE: TYPE OR ADD PHOTOS FREELY ABOVE THIS LINE --> <p><br></p> <!-- ========================================== --> <!-- START OF FILMSTRIP BLOCK (DO NOT DELETE) --> <!-- ========================================== --> <div class="multi-row-filmstrip"> <div style="background: #dcfce7; color: #166534; padding: 14px; font-family: sans-serif; font-size: 14px; font-weight: bold; border: 2px solid #16a34a; border-radius: 6px; text-align: center; margin: 10px 0;"> ▼ [GREEN START] UPLOAD ALL FILM STRIP PHOTOS BELOW THIS BOX ▼ <br> <span style="font-size: 12px; font-weight: normal; color: #15803d;">(Do not place regular post text or highlight photos below here)</span> </div> <p><br></p> <div style="background: #fee2e2; color: #991b1b; padding: 14px; font-family: sans-serif; font-size: 14px; font-weight: bold; border: 2px solid #dc2626; border-radius: 6px; text-align: center; margin: 10px 0;"> ▲ [RED STOP] END OF FILM STRIP: KEEP PHOTOS ABOVE THIS BOX ▲ <br> <span style="font-size: 12px; font-weight: normal; color: #b91c1c;">(Everything below this line returns to normal post layout)</span> </div> </div> <!-- ========================================== --> <!-- END OF FILMSTRIP BLOCK --> <!-- ========================================== --> <!-- BUFFER SPACE BELOW: RESUME REGULAR POST WRITING HERE --> <p><br></p>

Once you complete these steps, you will have a responsive, multi row filmstrip that handles large photo batches without overloading readers' devices or hurting mobile browsing speeds. The final result will look like this:

Please check out this page to see it working in action.