Recent Posts Video Style Blogger Widget
Recent Posts Video Style Blogger Widget

Hello friends today in this brand new article I am going to tell you how you can create recent posts video style blogger widget and add it into your blogger blog.

That's easy you can simply do that by simply copying and pasting the code and following the steps which are provided below.

Friends as I have already told you in my previous articles that I create recent posts blogger widgets if you want blogger widget of any other style for example if you want related post blogger widget with the same style, random post blogger widget or any other you can simply comment your style in the comment section I will create blogger widget for you.

So now if you want to add this widget into your blogger blog follow the steps which are provided below don't miss any step do as it is said.

  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add New Widget
  4. Select the right place where you want to show this widget in your blogger blog.
  5. Make New HTML/Javascript Widget
  6. Give you widget a name
  7. Copy the code provided below and paste it as widget content.
  8. I Have created this widget in two styles you can choose and style that you like
  9. Copy any 1 code provided below and paste it as widget content.
  10. Style 1:

    Preview:
    Recent Posts Video Style Blogger Widget
    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="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}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:
    Recent Posts Video Style Blogger Widget
    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="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}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>
  11. 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.

Conclusion:
In the end I want to say that if you want more widgets for blogger blog subscribe to the newsletters of this blog and stay updated and share this post with your friends on social media.
Recent Posts Video Style Blogger Widget

Recent Posts Video Style Blogger Widget

Recent Posts Video Style Blogger Widget

Hello friends today in this brand new article I am going to tell you how you can create recent posts video style blogger widget and add it into your blogger blog.

That's easy you can simply do that by simply copying and pasting the code and following the steps which are provided below.

Friends as I have already told you in my previous articles that I create recent posts blogger widgets if you want blogger widget of any other style for example if you want related post blogger widget with the same style, random post blogger widget or any other you can simply comment your style in the comment section I will create blogger widget for you.

So now if you want to add this widget into your blogger blog follow the steps which are provided below don't miss any step do as it is said.

  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add New Widget
  4. Select the right place where you want to show this widget in your blogger blog.
  5. Make New HTML/Javascript Widget
  6. Give you widget a name
  7. Copy the code provided below and paste it as widget content.
  8. I Have created this widget in two styles you can choose and style that you like
  9. Copy any 1 code provided below and paste it as widget content.
  10. Style 1:

    Preview:
    Recent Posts Video Style Blogger Widget
    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="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}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:
    Recent Posts Video Style Blogger Widget
    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="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}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>
  11. 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.

Conclusion:
In the end I want to say that if you want more widgets for blogger blog subscribe to the newsletters of this blog and stay updated and share this post with your friends on social media.

Related Posts

Disqus Codes

No comments

Subscribe Our Newsletter

Notifications

Disqus Logo