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
<!--Image gallery starts-->
<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'/>
<!--Image gallery stops BloggerStop.net help-->
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.

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon