Customizable Recent Post Image Gallery for Blogger Blogs

| , , ,

We always see recent posts in blogs but usually it is in text forms, simple because many of the coded recent posts is another burden in page loading, in terms of design blogs that is conscious with their page load usually limit their scripts and Css design,

Today I am giving you a filterable recent posts image gallery that will never add to your page load, and has a great css coding for adding spice to your blogs, Most image galleries take forever to load because they load full size images and then shrink them using CSS. This gallery loads the correct image size the first time.

Customizable Recent Post Image Gallery for Blogger Blogs

Below are some the features of the gallery:

  • You can set your preferred image size, any size. Image will come out sharp, no pixelation.
  • Light -what you see is what actually loaded. Most image galleries take forever to load because they load full size images and then shrink them using CSS. This gallery loads the correct image size the first time.
  • Posts can be filtered using a label.
  • Support multiple galleries. The options (thumb size and post title overlay) can be set independently for each gallery.

Installation

1. First go to Template > Edit HTML and add this script before the </head> tag in your template.

<script>
// Blogger Recent Posts Gallery by https://blogs911.com
// Tutorial at https://blogs911.com/2013/09/customizable-recent-post-image-gallery.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function tb911rpGallery(root) {
var entries = root.feed.entry || [];
var html = [‘<div class=”tb911rp-gallery nopin” title=”Get this from blogs911.com”>’];
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 : ‘http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png’;
var newImgUrl = orgImgUrl.replace(‘s72-c’, ‘s’ + tb911rpg_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=”‘ + tb911rpg_thumbSize + ‘” height=”‘ + tb911rpg_thumbSize + ‘”/>’;
var pTitle = tb911rpg_showTitle ? ‘<span class=”ptitle”>’ + postTitle + ‘</span>’ : ”;
var item = ‘<a href=”‘ + postUrl + ‘” target=”_blank” title=”‘ + postTitle + ‘”>’ + imgTag + pTitle + ‘</a>’;
html.push(‘<div class=”tb911-item”>’, item, ‘</div>’);
}
html.push(‘</div>’);
document.write(html.join(“”));
}
//]]>
</script>

2. Then, add the following CSS code into the CSS section of your template (right before </b:skin> tag).

/* www.blogs911.com Recent Posts Image Gallery CSS Start */
.tb911rp-gallery {padding:10px; clear:both;}
.tb911rp-gallery:after {content: “”;display: table;clear: both;}
.tb911rp-gallery .tb911-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.tb911rp-gallery .tb911-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f9; 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;}
.tb911rp-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;}
.tb911rp-gallery a:hover img {background: #ee7e22;}
/* www.blogs911.com Recent Posts Image Gallery CSS End */

If you prefer to put the CSS together with the scripts (in a post or in a HTML/Javascript gadget), you must enclose it in a</style> tag.

3. Finally add this script wherever you want the gallery to appear. It can be added anywhere -in a post, a page or a HTML/Javascript widget.

<script>
var tb911rpg_thumbSize = 150;
var tb911rpg_showTitle = true;
</script>
<script src=”/feeds/posts/summary?max-results=8&alt=json-in-script&callback=tb911rpGallery”></script>
    • Set the image size (in pixel) in line 2.
    • Set line 3 to true to add post title overlay on each image. False will display image without overlay. However, in both cases, the post title will appear in the tooltip that pops up when you hover the image.
    • To display recent posts under a label (e.g. SEO), replace the base URL for the src attribute with the label feed URL, like so:

    /feeds/posts/summary/-/SEO
    Set the number of posts to be displayed by changing the value of max-results query parameter.

    LIVE DEMOS

    This is set to 100px / false title /with 10max results This is set to 140px/ title true /with 8max results This is set to 90px/ true title/ 10max results/ summary/-/widgets Please leave a comment 🙂

    More from my site

    Previous

    Design Your Label Widget with Matrix Effects

    Full Designed and Fast Loading Related Post for Blogs

    Next

    8 thoughts on “Customizable Recent Post Image Gallery for Blogger Blogs”

    1. Thanx for help 🙂
      when i am placing the 3rd script code just after then it is showing following error

      ""Error parsing XML, line 2556, column 52: The reference to entity "alt" must end with the ';' delimiter. ""

      please help to solve this.. thanx

    2. Hi jhai..the third script is place in the HTML how come it will show error parsing?
      if you want to place it inside your template escaped it first..
      use this Code Escaper
      after escaping you can place it inside your template…

    4. just do the last part of tutorial to make it show a specific label… then label all your post with that same label.. to make it show random post.
      you can add labels to all your post in your post dashboard.

    7. Richie Emeke: The images dont appear because they are not uploaded via blogger. Dont use external links for images, use blogger upload module.

    Comments are closed.