Image Gallery Widget for Blogger

Your posts may contain a gallery. Here is a cool widget were you can show recent gallery or posts from a particular label. This widget is more effective for show recent image gallery posts.

DEMO :

Now gets in to tutorial .

Step 1 : Login to your blogger

Click on Templates

Click on EDIT HTML Button

Step 2 : Find the code below (Ctrl+F for search)

</head>

Step 3 : Paste the below code above </head>

<script> // Free to use or share, but please keep this notice intact.
//<![CDATA[
function bsrpGallery(root) {
var entries = root.feed.entry || [];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url :
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhuH4eXbWOwGVChoV2uZ-Hpw1Q4Gi1xPhBAKjViLsavMuaNMQaEc7lxxk8GGxym8Qs7y3TOgRW_-YtruC7Qgdbh64yXNUOymYWXunri9vcXbR_wWGF3sQz9yfIlNdMOSdXEICdGKrZEBFg/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
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>'); }
html.push('</div>');
document.write(html.join("")); }
//]]>
</script>

Step 4 : Now we have to add CSS. Find the code below (Ctrl+F for search)

</b:skin>

Step 5 : Paste the below code above </b:skin>

/*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;}
/*Recent Posts Image Gallery CSS End */

Now Save Templates .

Step 6 : Click on Layout
Then click on Add a Gadget

Select HTML/JavaScript

Step 7 : Paste the below code in it .

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

Step 8 : Customization
Change the value 150 to your desired image Thumbnail width.
Change the true to false if you don't want to show post title inside Thumbnail.
Change your label to your label name that contains image gallery posts or other posts.

Hope you like this widget.
 .