Recent Posts Video Style Blogger Widget

If you want to add this widget into your blogger blog follow the steps which are provided below don't miss any step.

Go to Blogger Dashboard
Go to Layout Section
Click Add New Widget

Select the right place where you want to show this widget in your blogger blog.

Make New HTML/Javascript Widget
Give you widget a name
Copy the code provided below and paste it as widget content.

I Have created this widget in two styles you can choose and style that you like

Copy any 1 code provided below and paste it as widget content.

Style 1:

Preview:

Code:

<style>.movie-card{position:relative;box-sizing:border-box;width:50%;max-width:800px;height:300px;background-position:center;background-size:cover;margin:4vh auto;border-radius:4px;box-shadow:2px 3px 12px rgba(0,0,0,.4);color:#fff;padding:2vh 3%}*{font-family:Raleway,sans-serif}.movie-card:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;background:linear-gradient(to right,rgba(40,40,40,1) 0,rgba(40,0,60,0) 90%);background-blend-mode:multiply;will-change:transform;z-index:0}i{font-size:1em;color:#ff5b84}h1{font-size:160%;position:relative;z-index:10;font-weight:thin;background:rgba(255,255,255,.5);color:#000;padding:5px 10px;border-radius:5px}a{text-decoration:none;color:inherit}span{display:inline-block;position:relative;z-index:10;margin-right:80px;color:#000;background:rgba(255,255,255,.5);border-radius:5px;padding:5px}.watch{display:block;border:1px solid #fff;border-radius:4px;position:relative;z-index:10;color:#fff;padding:10px;text-align:center;background:rgba(0,0,0,.3);margin:20px 0;outline:0;box-shadow:0 0 10px rgba(0,0,0,.5);transition:all .2s}button:hover{background:rgba(255,255,255,.8);color:#000;box-shadow:0 0 10px rgba(255,255,255,.5);mix-blend-mode:screen}button:active{transform:translateY(2px)}p{position:relative;z-index:10;font-size:.8em;width:60%;height:auto;color:#000;background:rgba(255,255,255,.5);border-radius:5px;padding:5px}@media (max-width:768px){.movie-card{width:75%;height:200px}h1{font-size:120%}p{display:none}.watch{margin:5% auto}}@media (max-width:500px){.movie-card{width:100%}}.credit{position:absolute;z-index:999999;margin:10px 10px;background:tomato;padding:4px 6px;color:#fff;border-radius:50%;text-align:center;opacity:.2;text-decoration:none;transition:.3s opacity;top:0;right:0}.credit:hover{opacity:1}.credit .tooltiptext{visibility:hidden;width:120px;font-size:10px;background-color:tomato;color:#fff;text-align:center;border-radius:6px;padding:5px 0;position:absolute;z-index:99999999;top:150%;left:50%;margin-left:-60px}.credit .tooltiptext strong{color:inherit;font-weight:200;border-bottom:1px dotted #000}.credit .tooltiptext::after{content:" ";position:absolute;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent tomato transparent}.credit:hover .tooltiptext{visibility:visible}</style><div id='recent-posts'><script type='text/javaScript'>var rcp_website="https://www.softwebtuts.com",rcp_numposts=2,rcp_snippet_length=150,rcp_info="yes",rcp_comment='<i class="fa fa-comment"></i>',rcp_snippetv="yes",rcp_thumbs_wid=300,rcp_thumbs_hei=190,rcp_ytthumbsize=0,rcp_title="yes",rcp_btntext="Show Full Post";function recent_posts(t){var e="";a=location.href,y=a.indexOf("?m=0");for(var s=0;s<rcp_numposts;s++){var r=t.feed.entry[s],n=r.title.$t;if("content"in r)var p=r.content.$t;else if("summary"in r)p=r.summary.$t;else p="";if((p=p.replace(/<[^>]*>/g,"")).length<rcp_snippet_length)var i=p;else{var c=(p=p.substring(0,rcp_snippet_length)).lastIndexOf(" ");i=p.substring(0,c)+"…"}for(var l=0;l<r.link.length;l++){if("thr$total"in r)var o=r.thr$total.$t+" "+rcp_comment;else o=rcp_disable;if("alternate"==r.link[l].rel){var _=r.link[l].href;-1!=y&&(_+="?m=0");var m=r.published.$t;if("media$thumbnail"in r)var h=r.media$thumbnail.url;else h="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnSRU6q83KwFDKNPvtMhBjsFcHK7TMZUyuKPm21uYUZUhjNBYwgmPJkLlngxAvKUZnNAK4vqhxeR24NVHddATcRuoP8tAUV1jDztjvchqiEYMb1PVLFTAqQn4pGlsqBFzlea9xxBe6n7rl/"}}e+='<div class="movie-card" style="background-image: url('+h.replace("/s72-c/","/w"+rcp_thumbs_wid+"-h"+rcp_thumbs_hei+"-c/").replace("/default.jpg","/"+rcp_ytthumbsize+".jpg")+');">',"yes"==rcp_title&&(e+='<h1><a href="'+_+'" rel="nofollow" title="'+n+'">'+n+"</a></h1>"),"yes"==rcp_info&&(e+="<span>"+m.substring(8,10)+" - "+m.substring(5,7)+" - "+m.substring(0,4)+"</span><span>"+o+"</span>"),"yes"==rcp_snippetv&&(e+="<p>"+i+"</p>"),e+='<button class="watch"><a href="'+_+'" rel="nofollow" title="'+n+'">'+rcp_btntext+"</a></button>",e+="<a href=\"https://www.softwebtuts.com\" rel=\"dofollow\" class=\"credit\">ⓘ<span class=\"tooltiptext\">This widget is made by <strong>M.Muzammil</strong></span></a></div>"}document.getElementById("recent-posts").innerHTML=e}document.write('<script type="text/javascript" src="'+rcp_website+"/feeds/posts/default?alt=json-in-script&max-results="+rcp_numposts+'&callback=recent_posts"><\/script>');</script></div>

Style 2:

Preview:

Code:

<style>.movie-card{position:relative;box-sizing:border-box;width:50%;max-width:800px;height:300px;background-position:center;background-size:cover;margin:4vh auto;border-radius:4px;box-shadow:2px 3px 12px rgba(0,0,0,.4);color:#fff;padding:2vh 3%}*{font-family:Raleway,sans-serif}.movie-card:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;background:linear-gradient(to right,rgba(40,40,40,1) 0,rgba(40,0,60,0) 90%);background-blend-mode:multiply;will-change:transform;z-index:0}i{font-size:1em;color:#ff5b84}h1{font-size:160%;position:relative;z-index:10;font-weight:thin}a{text-decoration:none;color:inherit}span{display:inline-block;position:relative;z-index:10;margin-right:80px;color:#d2d2d2}.watch{display:block;border:1px solid #fff;border-radius:4px;position:relative;z-index:10;color:#fff;padding:10px;text-align:center;background:rgba(0,0,0,.3);margin:-20px 0 -30px;outline:0;box-shadow:0 0 10px rgba(0,0,0,.5);transition:all .2s}button:hover{background:rgba(255,255,255,.8);color:#000;box-shadow:0 0 10px rgba(255,255,255,.5);mix-blend-mode:screen}button:active{transform:translateY(2px)}p{position:relative;z-index:10;font-size:.8em;width:60%;height:35%}@media (max-width:768px){.movie-card{width:75%;height:200px}h1{font-size:120%}p{display:none}.watch{margin:5% auto}}@media (max-width:500px){.movie-card{width:100%}}.credit{position:absolute;z-index:999999;margin:10px 10px;background:tomato;padding:4px 6px;color:#fff;border-radius:50%;text-align:center;opacity:.2;text-decoration:none;transition:.3s opacity;top:0;right:0}.credit:hover{opacity:1}.credit .tooltiptext{visibility:hidden;width:120px;font-size:10px;background-color:tomato;color:#fff;text-align:center;border-radius:6px;padding:5px 0;position:absolute;z-index:99999999;top:150%;left:50%;margin-left:-60px}.credit .tooltiptext strong{color:inherit;font-weight:200;border-bottom:1px dotted #000}.credit .tooltiptext::after{content:" ";position:absolute;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent tomato transparent}.credit:hover .tooltiptext{visibility:visible}</style><div id='recent-posts'><script type='text/javaScript'>var rcp_website="https://www.softwebtuts.com",rcp_numposts=2,rcp_snippet_length=150,rcp_info="yes",rcp_comment='<i class="fa fa-comment"></i>',rcp_snippetv="yes",rcp_thumbs_wid=300,rcp_thumbs_hei=190,rcp_ytthumbsize=0,rcp_title="yes",rcp_btntext="Show Full Post";function recent_posts(t){var e="";a=location.href,y=a.indexOf("?m=0");for(var s=0;s<rcp_numposts;s++){var r=t.feed.entry[s],n=r.title.$t;if("content"in r)var p=r.content.$t;else if("summary"in r)p=r.summary.$t;else p="";if((p=p.replace(/<[^>]*>/g,"")).length<rcp_snippet_length)var i=p;else{var c=(p=p.substring(0,rcp_snippet_length)).lastIndexOf(" ");i=p.substring(0,c)+"…"}for(var l=0;l<r.link.length;l++){if("thr$total"in r)var o=r.thr$total.$t+" "+rcp_comment;else o=rcp_disable;if("alternate"==r.link[l].rel){var _=r.link[l].href;-1!=y&&(_+="?m=0");var m=r.published.$t;if("media$thumbnail"in r)var h=r.media$thumbnail.url;else h="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnSRU6q83KwFDKNPvtMhBjsFcHK7TMZUyuKPm21uYUZUhjNBYwgmPJkLlngxAvKUZnNAK4vqhxeR24NVHddATcRuoP8tAUV1jDztjvchqiEYMb1PVLFTAqQn4pGlsqBFzlea9xxBe6n7rl/"}}e+='<div class="movie-card" style="background-image: url('+h.replace("/s72-c/","/w"+rcp_thumbs_wid+"-h"+rcp_thumbs_hei+"-c/").replace("/default.jpg","/"+rcp_ytthumbsize+".jpg")+');">',"yes"==rcp_title&&(e+='<h1><a href="'+_+'" rel="nofollow" title="'+n+'">'+n+"</a></h1>"),"yes"==rcp_info&&(e+="<span>"+m.substring(8,10)+" - "+m.substring(5,7)+" - "+m.substring(0,4)+"</span><span>"+o+"</span>"),"yes"==rcp_snippetv&&(e+="<p>"+i+"</p>"),e+='<button class="watch"><a href="'+_+'" rel="nofollow" title="'+n+'">'+rcp_btntext+"</a></button>",e+="<a href=\"https://www.softwebtuts.com\" rel=\"dofollow\" class=\"credit\">ⓘ<span class=\"tooltiptext\">This widget is made by <strong>M.Muzammil</strong></span></a></div>"}document.getElementById("recent-posts").innerHTML=e}document.write('<script type="text/javascript" src="'+rcp_website+"/feeds/posts/default?alt=json-in-script&max-results="+rcp_numposts+'&callback=recent_posts"><\/script>');</script></div>

Save Widget

You are all done you have successfully created and added this widget in to your blogger blog now you can have a preview on your blog simply go to your blog and have a look.

In the above code provided which you have copied you have to do some customisation you have to customise the things that are highlighted.

Replace my website URL with your own website URL and replace 2 in rcp_numposts=2 with the number of posts you want to show.

You can play with the settings customise widget as you like.

source:softwebtuts.com

A4F

Recent Posts Video Style Blogger Widget