Lalu bagaimana cara membuat related post di blog amp ini? Tentu ada cara cepat dan cara asik.. cara cepatnya masbrur tinggal paste saja kode ini dibawah Data:post.body terakhir jika mau related postnya ada dibawah artikel, atau di widged terserah masbrur aja.
<div id='related-post'><h4><span>My Be You Also Like</span></h4><amp-iframe src='https://cdn.rawgit.com/Sukaraja/related-post/9e162a4a/relatedpost.html?labels=<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop>&num=5&pos=<data:post.url/>' frameborder='0' height='420' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-popups'>
</amp-iframe></div> Simpan dan jadi deh related postnya, tapi kalau yang tampil artikel Risna artinya masbrur harus upload sendiri cdnrawgitnya. Mana kode yang akan diupload? Ni kopi kode dibawah ini
<!DOCTYPE html><HTML dir='ltr' lang='id-ID'><head><meta charset='utf-8'/><title>Related Post</title><style type='text/css'>@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}body{margin:0;font-family: Roboto,Arial,sans-serif}body ul{padding:0;margin:0;float:left}body li{list-style-type:none!important;padding:5px 0 5px;height:auto;float:left;display:inline;line-height:1em;margin:0;width:100%}span.news-text{font-size:14px;color:#666;line-height:1.2em}body ul li a{text-decoration: none;display:block;color:#15c;transition:all .2s ease;font-weight:500;line-height:1em}body ul li a:hover{text-decoration:underline}body ul li:hover a.relinkjdulx{color:#EA4335}body ul li img{float:left;margin-right:10px;padding:0;border-radius: 3px}.relinkjdulx{font-size:17px;margin-bottom:5px}@media only screen and (max-width:600px){span.news-text{display:none}}</style></head><body><ul><script>function getQueryVariable(r){for(var l=window.location.search.substring(1).split("&"),e=0;e<l.length;e++){var t=l[e].split("=");if(t[0]==r)return t[1]}return!1}function saringtags(r,l){for(var e=r.split("<"),t=0;t<e.length;t++)-1!=e[t].indexOf(">")&&(e[t]=e[t].substring(e[t].indexOf(">")+1,e[t].length));return e=e.join(""),e=e.substring(0,l-1)}var simg=getQueryVariable("si"),rsimg=(simg==false)?"/s72-c/":"/"+simg+"/";function relpostimgcuplik(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnojudul]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnojudul]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+(\-c)?\//,rsimg):"https://1.bp.blogspot.com/-LGEolwXn4BM/WS9-g9OMA_I/AAAAAAAAAU4/LWkMJrn8RI8m56N1U-10ZuLdAuFFJqTxQCLcB/s72/No%2BImage.png",relgambar[relnojudul]=postimg;for(var t=0;t<e.link.length;t++)if("alternate"==e.link[t].rel){relurls[relnojudul]=e.link[t].href;break}relnojudul++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function artikelterkait(){for(var r=new Array(0),l=new Array(0),e=new Array(0),t=new Array(0),a=0;a<relurls.length;a++)contains(r,relurls[a])||(r.length+=1,r[r.length-1]=relurls[a],l.length+=1,l[l.length-1]=reljudul[a],e.length+=1,e[e.length-1]=relcuplikan[a],t.length+=1,t[t.length-1]=relgambar[a]);for(reljudul=l,relurls=r,relcuplikan=e,relgambar=t,a=0;a<reljudul.length;a++){var n=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[a],i=relurls[a],s=relcuplikan[a],o=relgambar[a];reljudul[a]=reljudul[n],relurls[a]=relurls[n],relcuplikan[a]=relcuplikan[n],relgambar[a]=relgambar[n],reljudul[n]=u,relurls[n]=i,relcuplikan[n]=s,relgambar[n]=o}for(var g,c=0,p=Math.floor((reljudul.length-1)*Math.random()),m=p,d=getQueryVariable("pos");c<relmaxtampil&&(relurls[p]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[p]+"' rel='nofollow' target='_blank' title='"+reljudul[p]+"'><div class='overlayb'></div><img src='"+relgambar[p]+"' /></a>",g+="<a class='relinkjdulx' href='"+relurls[p]+"' target='_blank'>"+reljudul[p]+"</a>",g+="<span class='news-text'>"+relcuplikan[p]+" ... </span>",g+="</li>",document.write(g),++c!=relmaxtampil))&&(p<reljudul.length-1?p++:p=0,p!=m););}for(var labels=getQueryVariable("labels"),relmaxtampil=getQueryVariable("num"),url="https://www.sukaraja.com",res=labels.split(","),i=0,text="";res[i];)text+='<script src="'+url+"/feeds/posts/default/-/"+res[i]+'?alt=json&callback=relpostimgcuplik&max-results=50" type="text/javascript"><\/script>',i++;var relnojudul=0,numchars=120,reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;document.write(text+'<script type="text/javascript">artikelterkait();<\/script>');</script></ul></body></HTML> Jangan lupa untuk mengganti https://www.sukaraja.com dengan url blog masbrur. Setelah itu upload di GitHub sampai dapet cdnrawgitnya? Cara upoadnya bagaimana ris? Oke Caranya baca di postingan Cara Upload File Html di Github.
Setelah dapat cdnrawgit punya masbrur sendiri jangan lupa buat replace cdnrawgit punya saya ditas ya... baru masbrur pasang dibawah data:post.body, juga pastiin kode ini sudah ada di atas /head, karna kalau belum ada biasanya tidak muncul. kalau sudah ada biarin aja gak usah ditambah lagi.
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/> Simpan template dan Taraaa related post punya masbrur sendiri sudah tampil, untuk mempercantik judul related post masbrur bisa memasang kode ini diatas <b>/style</b>
/* CSS Related sukaraja.com */ #related-post {text-align:left;line-height: 1.3em;} #related-post h4 {border-bottom: 2px solid #4285F4;background: #00a1f1;padding: 8px 15px;position: relative;text-align: left;text-transform: uppercase;font-size: 18px;color: #fff;margin: 0 0 5px;overflow: hidden;} #related-post h4::after{background-color: #4285F4;top: 0;right: 0;padding: 7px 16px;position: absolute;content: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:white' d='M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-repeat: no-repeat;background-size: 52px 33px;} Yup sudah selesai semoga bermanfaat ya masbrur.
Liat kucing mainin tali
Lompat Lompat kesana kemari
Di morning yang cerah ini
Izinkan Risna pamit undur diri 😊
