How To Add A Responsive Image Gallery To Blogger Blogs (Most Simple Code)

Image Gallery For Blogger Blogs - Live Demo

Here's an easy way to add a highly customizable image gallery to your Blogger/Blogspot blog. The gallery is based on jQuery and created by fotorama team. The features and customization possibilities with this gallery are limitless. Just to give you an idea, some of the functionalities that can be controlled in this gallery are:

1. Lightbox based full screen view option
2. An option to switch on/off auto play
3. You can play the photos in a loop or shuffled manner
4. Use default widths and also max-width
5. Show or hide thumbnails
6. You can use videos in this gallery

Read the complete list of customization options here: fotorama customization

Steps to add this gallery to your blog:

Step #1:
Log into Blogger, go to Template section and click on Edit HTML.

Step #2:
Find this code in your template

</head>

And paste this code just above it

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<link href='http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css' rel='stylesheet'/>
<script src='http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js'/>

Remove the code in RED, if you already have the jQuery library in your template.

Step #3:
Now head over to your posts, and paste a code similar to this:

<div class="fotorama" data-allowfullscreen="true" data-autoplay="true" data-loop="true" data-maxwidth="400" data-nav="thumbs" data-width="100%">
<img src="DIRECT_LINK_TO_IMAGE#1" />
<img src="DIRECT_LINK_TO_IMAGE#2" />
<img src="DIRECT_LINK_TO_IMAGE#3" />
<img src="DIRECT_LINK_TO_IMAGE#4" />
</div>

Replace the code in BLUE with actual links to your images.

That's it folks - you can now showcase your images through this beautiful image gallery.