JezK
Edit File: recentpost-amp.html
<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400&display=swap" rel="stylesheet"> <title>Recent Post</title> <style> body{background-color:transparent;margin:0;padding:0;font-family: 'Noto Sans Devanagari', sans-serif;} a,img{transition:all .4s ease-in-out} #recentpostnav{border:1px solid #585858;width:100%;margin:0 auto} #recentpost{margin:0;background-color:transparent;} .recentpostel{background-color:transparent;display:block;margin:0 0 10px;padding:0 0 10px;height:62px} .recentpostel:last-child{margin:0;border-bottom:none;} .recentpostel img{background-color:transparent;padding:0;float:left;height:52px;margin-right:8px;width:82px;display:block;} .recentpostel h6,.recentpostel h6 a{font-family: 'Noto Sans Devanagari', sans-serif;text-decoration:none;color: #48525c!important;font-weight:600;font-size: 16px;line-height:1.2;margin:0;-webkit-transition: all .1s ease;transition-1: all .1s ease;-webkit-line-clamp: 3;} .recentpostel h6 a:hover{opacity:.7;transition:opacity .15s;-webkit-transition:opacity .15s} .recentpostel img:hover{opacity:.6} #recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #fff;background:url(https://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd} #recentpostnavfeed{background:#eee;text-align:center;margin:0} #recentpostnavfeed a{text-decoration:none;display:block;padding:5px} #recentpostnavfeed span{padding:5px} #recentpostnavfeed .next{float:right} #recentpostnavfeed .previous{float:left} #recentpostnavfeed .home{text-align:center;display:inline-block;} #recentpostnavfeed svg{vertical-align:middle;} </style> </head> <body> <div class="box" id="box"> <div id="recentpost"></div> <div id="recentpostnavfeed"></div> </div> <script> function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return pair[1];} } return(false); } function generateCss(q) { var css = document.createElement('style'), sp2 = document.getElementById('box'), parentDiv = sp2.parentNode; css.type = 'text/css'; if (css.styleSheet) css.styleSheet.cssText = q; else css.appendChild(document.createTextNode(q)); parentDiv.insertBefore(css, sp2); } (function() { var q = '.recentpostel h6 a {font-size:' + getQueryVariable('fontSize') + ';color:#' + getQueryVariable('color') + '}'; generateCss(q); })(); </script> <script> var urlblog = getQueryVariable("url"); function bloggerfeed(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 showrecentpost(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<5&&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://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s72/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank' title='"+n+"'><img alt='"+n+"' width='72' src='"+a+"' height='72' title='"+n+"'/></a>",s+="<h6><a href='"+r+"' target='_blank' title='"+n+"'>"+n+"</a></h6>",s+="</div>"}document.getElementById("recentpost").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous' title='Previous'><svg width='24' height='24' viewBox='0 0 24 24'><path fill='#333333' d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' /></svg></a>":"<span class='noactived previous'><svg width='24' height='24' viewBox='0 0 24 24'><path fill='#777777' d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' /></svg></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next' title='Next'><svg width='24' height='24' viewBox='0 0 24 24'><path fill='#333333' d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z' /></svg></a>":"<span class='noactived next'><svg width='24' height='24' viewBox='0 0 24 24'><path fill='#777777' d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z' /></svg></span>",s+="<a href='javascript:navigasifeed(0);' class='home' title='Home'><svg width='24' height='24' viewBox='0 0 24 24'><path fill='#141414' d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' /></svg></a>",document.getElementById("recentpostnavfeed").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=7&orderby=published&alt=json-in-script",n+="&callback=showrecentpost",incluirscript(n)}function incluirscript(e){1==0&&removerscript(),document.getElementById("recentpost").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","postlabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("postlabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)}; </script> </body> </html>