Memasang Recent Post By Label Di Halaman Statis Blog Valid Amp Template
- Memasang Recent Post by Label di Halaman Statis Blog valid AMP Template, Widget ini berfungsi menampilkan satu label atau kategori blog pada sebuah laman statis. Sudah banyak tutorial mengenai cara menciptakan recent post by label on blogger, namun pada kesempatan ini aku akan membagikan cara menciptakan atau memasang recent post menurut label atau kategori di halaman statis blogger yang valid amp blog.
Memasang Recent Post by Label di Halaman Statis Blog valid AMP Template
Cara buat recent post by label on blogger valid amp template
- Langkah pertama, Anda copy paste komponen
amp-iframedi bawah ini kemudian taruh di atas instruksi</head>.
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>Perhatian : Jika komponen amp-iframe sudah terpasang di template blog, lewati langkah di atas.- Berikutnya, Anda copy paste instruksi di bawah ini kemudian Anda buat hosting tersendiri.
<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="AMP"; </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.bloggerntt.com",maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya ▼",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="Memasang Recent Post by Label di Halaman Statis Blog valid AMP Template Memasang Recent Post by Label di Halaman Statis Blog valid AMP Template"><a class="toc-title" href="'+s+'" target="_blank" title="Memasang Recent Post by Label di Halaman Statis Blog valid AMP Template">'+r+'</a><div class="news-text">'+o+'…<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>- Buka aplikasi 'Notepad' kemudian paste instruksi di atas kedalam notepad tersebut.
- Anda ubah value yang aku mark kuning di atas dengan nama label blog Anda, misalnya : blogger, Blogger, amp, AMP (perhatikan karakter besar kecil kalau label memakai karakter besar ataupun sebaliknya). Ubah dengan URL blog Anda, misalnya : https://bloggerntt.blogspot.com
- Kemudian simpan dengan eksistensi *.html dan pilih All Files pada Save as Type seperti gambar berikut:
- Selanjutnya Anda tinggal upload ke github.com kemudian 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.
- Berikutnya, buatlah sebuah halaman gres di dashboard blogger, pada bab HTML, Anda copy paste instruksi di bawah ini kemudian taruh di dalamnya.
<amp-iframe title="Memasang Recent Post by Label di Halaman Statis Blog valid AMP Template" src="URL-HOSTING-ANDA" 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/AVvXsEgreS_nc4cypvL0x7kA3hoN4ez0ILqPe8GBfUBBITLIHvcjH-VJljGH9Lh6FulTK189wd3LeyhtkIGtITo_PiPGjzRsG1Zkyfh-ZNtWPJ1yHb4dv0yGSsSAv0ll7LF9F3wfWXJLFTAW9kc/s1600/placeholder.png" layout="fixed-height" height="360" width="auto" placeholder> </amp-img> </amp-iframe> - Anda perhatikan gambar di bawah ini :
Catatan : Anda rubah instruksi yang aku mark "URL-Hosting-Anda" dengan link URL yang Anda upload di github dan sudah di rawgit.
Untuk demonya, Anda sanggup buka tautan ini, Kumpulan Tutorial AMP Blogger Template 2018.
Bagaimana sob? Praktis bukan? Semoga artikel Memasang Recent Post by Label di Halaman Statis Blog valid AMP Template sanggup bermamfaat untuk Anda.