Cara Membuat Recent Posts by Label on Static Page Blogger AMP HTML

Ditulis oleh: Ifrod Maksum
Ditulis pada: 7/14/2018

Terinspirasi dari postingan mas adhy suryadi tentang cara membuat sitemap blogger AMP HTML langsung di halaman statis, saya mulai penasaran dan berpikir bagaimana untuk membuat recent posts per label di halaman statis juga untuk blog AMP yang merupakan kebutuhan blog saya juga untuk mengganti link menu menuju ke halaman statis (bukan halaman label).

Pada postingan sebelumnya tentang Cara Membuat Recent Post by Label Untuk Blog AMP HTML yang hanya menjadi solusi blog amp dengan menggunakan link ekternal ke rawgit. Namun dari mas adhy yang sudah bisa menampilkan sitemap langsung di halaman statis, kita juga bisa menampilkan recent posts by label di halaman statis juga untuk blog AMP.

Cara ini tentu masih menggunakan rawgit untuk menyimpan javascript dan lainnya (jika anda punya hosting sendiri, bisa dicoba), lalu kita akan menampilkannya di halaman statis menggunakan amp-iframe. Jika tertarik, silahkan simak yang berikut ini:

Pertama
Pastikan di blog anda sudah tersimpan scriptnya seperti ini:

<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

Jika sudah ada, lewati saja.

Kedua
Kemudian silahkan copy semua kode berikut di notepad:

<meta content='width=device-width, initial-scale=1' name='viewport'>

<style type='text/css'>

@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;src:local('Roboto Slab Light'),local('RobotoSlab-Light'),url(https://fonts.gstatic.com/s/robotoslab/v7/BngRUXZYTXPIvIBgJJSb6u9mxLCGwR0.woff2) format('woff2'),url(https://fonts.gstatic.com/s/robotoslab/v7/BngRUXZYTXPIvIBgJJSb6u9mxLCGwRs.woff) format('woff'),url(https://cdn.rawgit.com/KompiAjaib/font/master/RobotoSlab-Light.ttf) format('truetype')}

body{font-family:'Open Sans',sans-serif;background: #fff;}

*{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}

#feed-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}

#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}

#feed-container li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}

#feed-container li a{font-family:"Roboto Slab";text-decoration:none;color:#11589D;font-weight:300;font-size:20px;}

#feed-container li a:hover{text-decoration:none;color:#E94141}

#feed-container li .news-text{margin-top:5px;line-height:1.3em!important;font-size:14px;}

#feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;}

#result-desc{margin:0;padding:0;}

#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}

#result-desc div{color:inherit}

#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}

#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}

#feed-nav a,#feed-nav span:hover{color:#1B1B1B}

#feed-nav a:active,#feed-nav a:hover{color:#555}

#feed-nav span{cursor:wait}

@media (max-width:600px){

#table-outer table{margin:0 auto;width:100%}

#feed-container,#table-outer{margin:0 auto}

#feed-container li a{font-size:16px;}

#feed-container li .inner{margin:5px auto;height:auto}

#feedContainer li{float:none;display:block;width:auto;height:auto}

#feed-container li .news-text,#feedContainer:after,#feed-container li img{display:none!important}

}

</style>

<header id="result-desc"></header>

<ul id="feed-container"></ul>

<div id="feed-nav"></div>

<script type="text/javaScript">

var label="LABEL_BLOG_ANDA";

</script>

<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);

}

</script>

<script type='text/javascript'>

document.write;var loadToc,loadCategories,_toc={init:function(){var e={homePage:"https://www.domainanda.com",maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",loading:"<span>Memuat...</span>"},t=(window,document),n=function(e){return t.getElementById(e)},a={e:n("result-desc"),f:n("feed-container"),g:n("feed-nav"),h:t.getElementsByTagName("head")[0],i:0,j:null,k:"published",l:0,m:""},l={a:function(){old=n("temporer-script"),old.parentNode.removeChild(old)},b:function(e){var i=t.createElement("script");i.type="text/javascript",i.id="temporer-script",i.src=e,n("temporer-script")&&l.a(),a.h.appendChild(i)},c:function(t,n,i){a.i++,a.e.innerHTML=e.counting,a.g.innerHTML=e[1==t?"searching":"loading"],0===t?l.b(null!==n?e.homePage+"/feeds/posts/summary/-/"+n+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc":e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc"):1==t&&l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&q="+n+"&orderby="+i+"&callback=loadToc"),a.j=null!==n?n:null,a.l=t,a.a.disabled=!0,a.b.children[0].disabled=!0},d:function(n){var i;if(a.g.innerHTML="",a.e.innerHTML="<div>Total: "+n.feed.openSearch$totalResults.$t+" Posts</div>","entry"in n.feed){for(var r,s,o,d,c=n.feed.entry,u="0 Komentar",m=0;m<e.maxResults&&m!=c.length;m++){r=c[m].title.$t,o="summary"in c[m]?c[m].summary.$t.replace(/<br ?\/?>/gi," ").replace(/<(.*?)>/g,"").replace(/<iframe/gi,"").substring(0,e.numChars):"",d="media$thumbnail"in c[m]?c[m].media$thumbnail.url.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth):e.noImage.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth);for(var h=0,b=c[m].link.length;b>h;h++)s="alternate"==c[m].link[h].rel?c[m].link[h].href:"#";for(var p=0,g=c[m].link.length;g>p;p++)if("replies"==c[m].link[p].rel&&"text/html"==c[m].link[p].type){u=c[m].link[p].title;break}i=t.createElement("li"),i.innerHTML='<div class="inner"><img style="width:'+e.thumbWidth+"px;height:"+e.thumbHeight+'px;" src="'+d+'" alt="'+r+'"><a class="toc-title" href="'+s+'" target="_blank" title="'+r+'">'+r+'</a><div class="news-text">'+o+'&hellip;<br style="clear:both;"></div></div>',a.f.appendChild(i)}i=t.createElement("a"),i.href="#load-more",i.innerHTML=e.navText,i.onclick=function(){return l.c(a.l,a.j,a.k),!1}}else i=t.createElement("a"),i.href="#reset-content",i.innerHTML=e.resetToc,i.onclick=function(){return a.i=-1,a.e.innerHTML=e.counting,a.f.innerHTML="",l.c(0,null,"published"),a.a.innerHTML=a.a.innerHTML,a.b.children[0].innerHTML=a.b.children[0].innerHTML,!1};a.g.appendChild(i),a.a.disabled=!1,a.b.children[0].disabled=!1}};loadToc=l.d,loadCategories=l.e,l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i+1)+"&max-results="+e.maxResults+"&orderby=published&callback=loadToc"),l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories"),a.a.onchange=function(){a.i=-1,a.f.innerHTML="",a.g.innerHTML=e.counting,a.b.children[0].innerHTML=a.b.children[0].innerHTML,l.c(0,null,this.value),a.k=this.value},a.c.onsubmit=function(){return a.i=-1,a.f.innerHTML="",a.m=a.d.value,l.c(1,a.d.value,a.k),!1}}};_toc.init();

</script>

Sesuaikan yang ditandai dengan blog anda (label dan url blog). Lalu simpan dengan eksistensi *.html dan pilih All Files pada Save as Type seperti gambar berikut:

Ketiga
Selanjutnya tinggal upload ke github.com lalu copas linknya ke rawgit.com, kemudian copas hasil link yang terdapat pada Use this URL in production. Url inilah yang kita butuhkan pada langkah selanjutnya.

Keempat
Copas kode berikut di halaman statis pada mode HTML (bukan compose):

<amp-iframe title="Recent-Posts-AMP"

src="URL-HOSTING"

height="750"

layout="fixed-height"

frameborder="0"

sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">

<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMQ3GLryBHd7CEz2KgkKbvz2BtzsE6SGLtrul5Xd-Ed4J40QDIxGPjWohT0Uc9LNFeEE2lUKqPinG-4_vovRBcYO9Ocw9aPUzTSS4UVJUw1PoDN8AOeMn1uOt4CIRmykjlk3tpokBzf0k/s1600/placeholder.png"

layout="fixed-height"

height="360"

width="auto"

placeholder>

</amp-img>

</amp-iframe>

Ganti yang ditandai dengan URL Hosting yang didapat pada langkah ketiga.

Hasilnya bisa anda cek halaman statis blog utama saya ini Aplikasi Pendidikan.

Mudah bukan? selamat mencoba