2016 July 29 Archive - EXEIdeas – Let's Your Mind Rock

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.CLICK HERE TO SEE DEMOFeatures: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.How To Add In Blogspot?1.) Go To Your www.blogger.com2.) 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: .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;} JavaScript: // ']; 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 '; var pTitle = bsrpg_showTitle ? ' ' + postTitle + ' ' : ''; var item = ' ' + imgTag + pTitle + ' '; html.push(' ', item, ' '); } html.push(' '); document.write(html.join(""));}//]]> var bsrpg_thumbSize = 150; var bsrpg_showTitle = true; 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.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…