Blogger Perfect Photo Thumbnail Gallery Tutorial | Life and Linda -Blog Design, Decorating, Tablescapes, Gardening

Blogger Perfect Photo Thumbnail Gallery Tutorial

I am working on the image  navigation tutorial, but in the meantime, I have another photo thumbnail gallery tutorial for you  This one comes from Bloggersentral.  You can use this to create galleries on your pages for your recipes, projects, gardening, decor and more.  It uses your labels to pull up posts.

This does involve HTML editing.  For those of you that are uncomfortable editing your HTML, you can always  hire me. Here's an example of a Easter Page Gallery I created using this coding.
Remember you can have lots more links!

Easter Gallery - Thumbnail size - 160

  • You have the option to change the thumbnail image size.  Your images will be sharp and not fuzzy.
  • This image gallery is quick to load and loads the precise image.  No more slow loading time
  • Posts are found using your label.  So, when you create a gallery, you want to make sure all of your posts in that category name, are labeled as such. Example: You want to create a gallery using the name, Projects,.  Go through and find your all of your projects posts and make sure they all have the label Projects,.  Add a comma by the label and click Done.

1. Go to Template > Edit Template. Copy and paste the script below BEFORE </head> tag in your template.

TIP: To find the </head> tag, just hold down the CTRL and F key on your keyboard.  A search cox will pop up.  Type </head> in the  box.

// Blogger Recent Posts Gallery by
// Tutorial at
// Free to use or share, but please keep this notice intact.
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl =$thumbnail ?$thumbnail.url : '';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');

2.  Now, add the  code below into the CSS section of your  Template, just before <b:skin>

/* BloggerSentral Recent Posts Image Gallery CSS Start */
.bsrp-gallery {padding:10px; clear:both;}
.bsrp-gallery:after {content: "";display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.bsrp-gallery a:hover img {background: #ee7e22;}
/* BloggerSentral Recent Posts Image Gallery CSS End */

3.   Next step is to copy and paste the code below into a page you have created for the gallery.
Make sure you copy and paste it in the HTML, and not the compose.

var bsrpg_thumbSize = 150;
var bsrpg_showTitle = true;
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>

4.  Last step is to add the label of your choice to the code you just added to your page where the gallery will be. This means you are adding the post summary label.

Let's use my Projects page as an example.

Notice the /feeds/posts/summary/-/Projects?
After summary is where you will want to add your label.    /-/Projects

So if you create a page gallery for Recipes, you use /-/Recipes after summary.
Don't touch the rest of the code.  Just add your label to the page.

  1. You can change the thumbnail size by changing the pixel size from 150 to whatever number you choose. For the Easter Gallery, I used 160.
  2. If you choose to not have a title, then change true to false.
  3. To set the number of thumbnails showing, change the number where it says max-results=8 to whatever you want.

  var bsrpg_thumbSize = 150; 
  var bsrpg_showTitle = true; 
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>

Do this for any page gallery you may want to create. Whether it's Recipes, Projects, DIY, Decor.
Don't forget the labels on your posts! Here's the Projects example below: The thumbnail size is 180.

As I stated earlier, I design blogs and offer my services for Blogger Support.  If you find this too complicated and would like a gallery, you can contact me regarding my fees.

Share on Google Plus

About Linda @ Life and Linda

Hello, welcome to LifeandLinda. I am from Northern California. I enjoy blogging, Designing Blogs, Decorating, cooking, entertaining, gardening and clogging. I hope you enjoy your visit.
    Your comments are welcome!


  1. Does a gallery page take a long time to load...say if you have 40 or 50 thumbnail pics for a catagory. sheila

  2. Good Morning Linda!

    Please put me on your calendar! It is time for a blog update for Jemma:)

  3. I think I might need some help with my blog Linda! I have a lot to learn from you :-)

    1. I am available. I always try to write tutorials to help people with their blogs. If they cannot update, then they use my services. A BlogFairy

  4. Thanks for the tutorial, Linda, and you make it seem so easy but it's still above my thinking process. Thanks for designing my blog and giving me so much help!

    1. I try to make it easy Gail. You are so welcome. I am thrilled you love your new blog design. We all are talented in different ways.

  5. I think it would give me brain drain! Where are the galleries located? I love the idea. I need some updating too!

    1. Jackie, since you have so many, this would be perfect for you. A tablescape gallery would be on the tablescape page. Then a gallery for your crafts, cookies...endless possibilities.

  6. Hello dearest LInda! YOU are so good with this tech stuff. I am always a few steps behind the newest thing, but it sure is fun. You do a great job and I see Jemma is in line! Thank you so much for visiting my post! I am having fun with photography, that's for sure! Anita

  7. Thank God I have you to do these things!!! Do you think I could use this gallery thing? I am kinda confused; do you mean you create a gallery for each post?

  8. You create a gallery for categories. A gallery for your Tablescapes. Anything category you have. it uses your labels.

  9. I am going to have to go back to this and absorb it all and try it when I have the time to sit down. Thanks for the tutorial, Linda!....Christine

  10. nich ikutseo punya Tutorial Auto Link Dengan Smart Link Blogspot, semoga bermanfaat. jangan lupa berkunjung yaa ^_^


I so appreciate your visits and sharing your thoughts at Life and Linda.