Blogger Related Post Lightweight AMP with Multi Label
Updated on 14 May
In related posts, most only use one label like the one owned by the
magic that uses FeedWind, I don't even know for the multi label. Now it
will discuss related posts with more than one label (multi labels) or
multiple labels.
In making this related post, I initially just tried because I thought that maybe it could be multi-label and it turned out to be a successful result. In this case it took a very long time because I also still learned to use javascript.
First, only 1 url with one label and 1 url again with two labels. Posts that have one label use file hosting with only 1 label support script and those that have two labels use file hosting with only 2 label support scripts. So the post that has one label and a post that has 2 url hosting labels is different. If you want to use it will be difficult to edit one by one, especially when explaining in the post.
Initially the item displayed can only display the page of the post that is being opened. This time the related post item will not display the currently opened page. The point is the choice of related post items outside the url that is being opened.
Amp-iframe script.
Here's the code.
Example: the size of the image will be changed to the size of width 120 and height 100, then add the following parameters si=w120-h100-c
Example:
https://cdn.staticaly.com/gh/ManKoin/Hosting/77105928/relatedpostsslmankoin.html?labels=AMP,Blogger,Widget,&num=3&si=w110-h80-c&pos=https://blog.krakentechno.com/2019/03/related-post-amp-multi-label.html, and automatically the image parameter s72-c will be changed to w120-h100-c. And of course don't forget to change the amp-iframe height.
Add parameters to url using code ? - example:
https://blog.krakentechno.com/?amp=1
Then to add two parameters, each parameter is separated by a code & - example: https://blog.krakentechno.com/?amp=1&m=1. Likewise, the third parameter and so on must be separated by code &.
Automatically the description is not displayed on the related post item, if the size of the frame width is 600px down, like on a smartphone. The goal is that the frame height is still so that it doesn't scroll.
That's the Tutorial for Making Related Post AMP Multi Label. If something is missing or there is something in question, please comment. And don't forget to share with your blogger friends. Thank you for visiting.
Addition: This related post is only for blogs that support https. Why?.
Because amp iframe only runs on https. And if the blog doesn't support https then the url feed uses http. Because the feed uses http it will fail to load, because the url amp iframe (cdn.rawgit.com) uses https.
Confused! if the related post accessed with http is possible. But because the iframe amp is only for https, so loading feed related post http will fail.
In making this related post, I initially just tried because I thought that maybe it could be multi-label and it turned out to be a successful result. In this case it took a very long time because I also still learned to use javascript.
First, only 1 url with one label and 1 url again with two labels. Posts that have one label use file hosting with only 1 label support script and those that have two labels use file hosting with only 2 label support scripts. So the post that has one label and a post that has 2 url hosting labels is different. If you want to use it will be difficult to edit one by one, especially when explaining in the post.
Initially the item displayed can only display the page of the post that is being opened. This time the related post item will not display the currently opened page. The point is the choice of related post items outside the url that is being opened.
How to make a Related Article valid AMP with Multi Label
Make sure there is an amp-iframe script in the <head> element, but if there is no add script.Amp-iframe script.
<script async='' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
Here's the code.
<div id='related-post'><h4>Also Read</h4><amp-iframe src='https://cdn.staticaly.com/gh/ManKoin/Hosting/accd1946/relatedpostssl.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&url=https://blog.krakentechno.com&pos=<data:post.url.canonical/>' frameborder='0' height='420' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-popups'></amp-iframe></div>
Note: Change the url https://blog.krakentechno.com with your blog url. Number 5
is the number of views that will appear, can be replaced as desired.
But if more than 5, there will be a scroll on the iframenya. To get rid
of the scroll, set the height 420 size and match the height.
Set Image/Thumbnail
By default the image automatically uses a width and height of 72, the parameter used is image URL s72-c. Now you can adjust the image size as you wish. You do this by adding the size image (si) parameter and its contents according to the image parameters.Example: the size of the image will be changed to the size of width 120 and height 100, then add the following parameters si=w120-h100-c
Example:
https://cdn.staticaly.com/gh/ManKoin/Hosting/77105928/relatedpostsslmankoin.html?labels=AMP,Blogger,Widget,&num=3&si=w110-h80-c&pos=https://blog.krakentechno.com/2019/03/related-post-amp-multi-label.html, and automatically the image parameter s72-c will be changed to w120-h100-c. And of course don't forget to change the amp-iframe height.
Add parameters to url using code ? - example:
https://blog.krakentechno.com/?amp=1
Then to add two parameters, each parameter is separated by a code & - example: https://blog.krakentechno.com/?amp=1&m=1. Likewise, the third parameter and so on must be separated by code &.
Automatically the description is not displayed on the related post item, if the size of the frame width is 600px down, like on a smartphone. The goal is that the frame height is still so that it doesn't scroll.
That's the Tutorial for Making Related Post AMP Multi Label. If something is missing or there is something in question, please comment. And don't forget to share with your blogger friends. Thank you for visiting.
Addition: This related post is only for blogs that support https. Why?.
Because amp iframe only runs on https. And if the blog doesn't support https then the url feed uses http. Because the feed uses http it will fail to load, because the url amp iframe (cdn.rawgit.com) uses https.
Confused! if the related post accessed with http is possible. But because the iframe amp is only for https, so loading feed related post http will fail.
relatedpostsslmankoi.html backup code:
<!--Artikel terkait blog mankoin — Cari dan ganti url https://www.mankoin.blog-->
<!DOCTYPE html><HTML dir='ltr' lang='id-ID'><head><meta charset='utf-8'/><title>Related Post</title><style>*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif}body li,body ul{margin:0;float:left}body li{list-style-type:none!important;display:inline;line-height:1em;width:100%;border-bottom:1px solid #d7d7d7;padding:10px 0}body ul{padding:0}span.news-text{font-size:14px;color:#666;line-height:1.2em}body ul li a{text-decoration:none;display:block;color:#000;transition:all .2s ease;font-weight:500;line-height:1.3em}body ul li:hover a.relinkjdulx{color:#2962ff}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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWj8gw3FEag4o-PHmGfowkGEYmidD3qy-5H4sfkkd1Rq1qdwGujzDZ1ji-2O7nds2QPQA_3zXzGc56_AMfo8p2iyCzXaAJxjY1Ij2StzrQ5pls2gGKiyWO7AFq9d3-p0A2t1S8vcRSRAAI/s72/No+Image.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'>",g+="<a href='"+relurls[p]+"' rel='nofollow' target='_blank' title='"+reljudul[p]+"'><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.mankoin.blog",res=labels.split(","),i=0,text="";res[i];)text+='<script src="'+url+"/feeds/posts/default/-/"+res[i]+'?alt=json&callback=relpostimgcuplik&max-results=50"><\/script>',i++;var relnojudul=0,numchars=120,reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;document.write(text+'<script>artikelterkait();<\/script>');</script></ul></body></HTML>
0 comments for Blogger Related Post Lightweight AMP with Multi Label