How to install Gallery Style Recent Post Blogger Widget

This Gallery Style Recent Post Widget for blogger widget has some functionalities like you can enable show title functionality or you can also show number of comments on that post you can see this visit in work at right side of my website if you are on mobile device then scroll down and you will see real time demo of this blogger widget.
I have created in simple way to integrate this budget now you don't have to go to blogger HTML section and find any line of code.

It is so simple to integrate this blogger widget. To integrate this project you have to follow the steps which are shown below.

So now

Go to Blogger.com and then go to widget section where you can create widgets in blogger.

Then you have to create a new blogger widget and make it add HTML/Javascript widget.
Now copy the code provided below as it is and paste it as widget content which you have created.

<style>
.recent-galeri{padding:0;clear:both;}
.recent-galeri:after{content:"";display:table;clear:both}
.recent-galeri .gallerytem{display:block;float:left;position:relative;margin:0 auto 20px auto;overflow:hidden;padding:0;text-align:center;width:100%;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.recent-galeri .gallerytem:last-child{margin:0 auto}.recent-galeri .gallerytem a{position:relative;float:left;margin:0;overflow:hidden;text-decoration:none;width:100%}.recent-galeri .gallerytem .ptitle{background:rgba(255,255,255,.97);display:inline-block;clear:left;font-size:14px;line-height:1.3em;position:absolute;bottom:15px;left:15px;right:15px;color:#888;padding:15px;word-wrap:break-word;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 8px 10px -5px rgba(0,0,0,0.15);border-top:2px solid #a4b0be;transition:all .2s}.recent-galeri .gallerytem:hover .ptitle{background:rgba(255,255,255,.97);color:#222;border-top-color:#eccc68}.recent-galeri a img{background:#fdfdfd;float:left;margin:auto;text-align:center;width:100%;transition:all .3s}
</style>
 <div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=2;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='turn off comment';
var rcp_thumbs_wid = 300; 
var rcp_thumbs_hei = 190; 
var rcp_ytthumbsize = 0;
var rcp_title = 'yes'; 
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<div class="recent-galeri">';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnSRU6q83KwFDKNPvtMhBjsFcHK7TMZUyuKPm21uYUZUhjNBYwgmPJkLlngxAvKUZnNAK4vqhxeR24NVHddATcRuoP8tAUV1jDztjvchqiEYMb1PVLFTAqQn4pGlsqBFzlea9xxBe6n7rl/"};}};
var imagesize = rcp_thumb.replace("/s72-c/","/w"+rcp_thumbs_wid+"-h"+rcp_thumbs_hei+"-c/").replace("/default.jpg", "/"+rcp_ytthumbsize+".jpg");; 
dw+='<div class="gallerytem">';
dw+='<a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">';     dw+='<img alt="'+rcp_posttitle+'" src="'+imagesize+'"/>';
if(rcp_title=='yes'){dw+='<span class="ptitle">'+rcp_posttitle;
if(rcp_info=='yes'){dw+='<br/><small>'+rcp_postdate.substring(8,10)+
  '/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+
  ' - '+rcp_commentsNum+'</small>';}
dw+='</span>';}
dw+='</a></div>';}
dw+='</div>';
document.getElementById('recent-posts').innerHTML=dw;};
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>

After pasting the above code in blogger widget content section now save your widget and you will see that your visit will be working properly.

This blogger widget works properly but in some cases it can overflow for that you have to search for the code similar to .recent-galeri{padding:0;clear:both;width:auto;} in blogger widget code provided above and change the width to 100%.

I hope this blogger widget works properly for you and you will not face any error here are some settings that you can change in this widget code or you can customize the following things in this widget code.

Recent Post Widget Customization:

Var rcp_website = 'https://raufgraphics'; change this website name to your own website simply leave it blank.

Var rcp_numposts=2; change this 2 with the number of posts you want to show as the recent posts in this Gallery Style Recent Post Widget for blogger.

Var rcp_info='yes'; you can toggle between show info awesome please show the thumbnails if it is set to true then you will see a post title another text but if it is false or set to no or any other word you cannot see all this visit will not show you information about post.

Var rcp_thumbs_wid = 300; change this 300 to the size of your thumbnail higher the thumbnail size will give you HD quality thumbnail but it will make your website slow.

Var rcp_thumbs_hei = 190; changes 190 with the height of your image recent post thumbnail. I recommend you no to change the width and height of the thumbnails of this Gallery Style Recent Post Widget for blogger.

Var rcp_ytthumbsize = 0; this 0 is for YouTube thumbnails for example if you have published a video on your blog and but the force that thumbnails are blur for YouTube video by changing this value you can make that thumbnails in HD resolution. For this possible values are maxresdefault, hqdefault, sddefault, and default.

Var rcp_title = 'yes'; change this yes to no if you don't want to show the number of comments and published date.

Conclusion of Gallery Style Recent Post Widget for blogger:

That's it I hope you have successfully integrated this Gallery Style Recent Post Widget for blogger and it worked fine and if still you have any question or problem with that you can ask it in the comment section below.

source:raufgraphics.com