LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Widgets » Recent Latest Posts With Thumbnail And Title From Label For Blogger

Recent Latest Posts With Thumbnail And Title From Label For Blogger

Recent-Latest-Posts-With-Thumbnail-And-Title-From-Label--For-Blogger
Displaying small thumbnail images behind post titles in the recent post widget on blogs not only looks nice, but also entice visitors to click on your posts. So how to do it in Blogger? we have put together a beautiful working script. This is how to implement it on your blog.

Recent Posts for Blogger with Thumbnails good way to show your recent posts in side bar with animation effect to your readers. This is very fantastic way to get more clicks on your recent posts and present your new post in headlines update for your readers. Recent Posts gadget shows your most recent posts with effect to move smoothly through the posts. We are giving you full tutorial about Recent Posts for Blogger with Thumbnails. We also give you different types of recent post widget for your blog. You can simply add our code on your sidebar and it will show recent posts on your blog. We give you also demo of recent posts widget to show how to look this on your blog.

Features:

1.) JavaScript Added.
2.) No JQuery File Added.
3.) Stylish CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.
6.) Work With Any Blogger Domain.
7.) Can See The Post Title and Post Thumbnails.
8.) Plain In Design.
9.) Fully Customizable With Your Design.
10.) Can Control Everything.

Recommended For You:
SEO In 2014: What You Think About It? Its Changed?

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Layout”.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now “Copy” The Below Code And “Paste” It To There.
8.) Leave The “Title” Empty.
9.) Click “Save”, Now You Are Done.

CSS:

<style>
.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;}
</style>

JavaScript:

<script>
//<![CDATA[
function bsrpGallery(root) {
    var entries = root.feed.entry || [];
    var html = ['<div class="bsrp-gallery nopin">'];
    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' + 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>
<script>
  var bsrpg_thumbSize = 150; 
  var bsrpg_showTitle = true; 
</script>
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>
<script src="/feeds/posts/summary/-/LABEL?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>

Customization:

You can change thumbnail size, can active post title and can use it for all posts or only fora label also. Edit your CSS if you are a pro and want more customization.

Recommended For You:
Awesome EXE-Style POP-UP V1 Widget For Blog And Website.

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…

You Like It, Please Share This Recipe With Your Friends Using...

16 Responses to “Recent Latest Posts With Thumbnail And Title From Label For Blogger”

  1. Communiqua says:

    Awesome blog. Very useful information, it clarified a lot of things to us. Thanks for sharing your view.

  2. Good post.. its very useful to all of us. Thanks for posting such a nice article.

  3. apdm says:

    thats great innovation. never seen before this label with thumbnail

  4. This is a wonderful post! I hope to read more of your post which is very informative and useful to all the readers.

  5. Kawsar Ahmad says:

    this is amazing blog.,Very useful information, it clarified a lot of things to us.thanks for it.

  6. AArti says:

    Good job, Thank you very much! But please help me How to change the Thumbnails size???

  7. Hi can you help me with the label ? it is loading just 3 pictures, rest are just the icons. And the label are not working – showing just the resent posts

  8. zezo says:

    thanks for the widget,
    it is working but with no thump just the default pic..
    any idea how to fix?
    is that because i made feed short from blogger setting not full feed to limit posts steal!

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your view. Yes. Try to make full-feed in the setting.

Leave a Reply to Kawsar Ahmad Cancel reply

Your email address will not be published. Required fields are marked *