Responsive horizontal recent posts widget for blogger
<h3> Recent Post</h3><br />
<style scoped='' type='text/css'>
/* Recent Post Widget */
#recentpostnav{width:100%;border:1px solid #585858;margin:0 auto; }
#borpbox{margin:1px;height:350px; padding-left:10px; padding:right:10px;}
.recentposarea{background-color: white;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); padding: 0 6px;margin:2px;float: left;width:32.700%;height:170px;overflow:hidden;}@media only screen and (max-width: 1200px) {
.recentposarea{ width:32%;}}@media only screen and (max-width: 620px) {.recentposarea{ width: 48.550%;}}.recentposarea img{width: 100%; height:100px;}.recentposarea h6,.recentposarea h6 a{text-decoration:none;margin:0;color:#111;font-size:13px!important;font-weight:700!important;}.recentposarea:hover{background-color:#fefefe}.recentposarea p{text-align:left;font-size:12px;margin:5px 0;color:#555;line-height:normal}#loadrecentpost{font-family:Tahoma;color:#888;font-size:100px;letter-spacing:-10px;text-shadow:-5px 0 1px #444;text-align:center;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJmnbbRkmeVkXnGx9KK0tYvaYxQyFMWoElbJFa764oH6Yrmt-UBt1cgD9R8LKLn4cg_W7Nf4mwuHtepwQgVqi5zyFDW-YH4bIE9v7hgfp60vfa5Z8KnPszWzwWbP_4aYFJWzwzTBShXEV7/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 6;
var startfeed = 0;
var urlblog = "https://owshadham.blogspot.com/";
var charac = 0;
var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeeG6SDj4L_nw7M0mNemDI1DSMXr77vTHJTJERzERt5Nz76579z-L3P5XfI6NbW6ln2j9YoBHcODIEc3S1yIj1bwiN2Gd_QhEnUkgQjG57-_ulzub8KlRFDbiUxFn8COjAdOY9RqWP3tTO/s1600/no-image.png",s+="<div class='recentposarea'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"</p>",s+="</div>"}document.getElementById("borpbox").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'></a>":"<span class='noactived previous'></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'></a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'></a>",document.getElementById("rpnavigation").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("borpbox").innerHTML="<div id='loadrecentpost'></div>",document.getElementById("rpnavigation").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<div id="borpbox"></div>
<div id="rpnavigation"></div>
