Memasang Recent Post by Label di Halaman Statis Blog valid AMP Template

Memasang Recent Post by Label di Halaman Statis Blog valid AMP Template

Memasang Recent Post by Label di Halaman Statis Blog valid AMP Template


Bloggerntt.com - 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 membuat recent post by label on blogger, namun pada kesempatan ini saya akan membagikan cara membuat atau memasang recent post berdasarkan 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-iframe  di bawah ini lalu taruh di atas kode </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 kode di bawah ini lalu 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 &#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>

  • Buka aplikasi 'Notepad' lalu paste kode di atas kedalam notepad tersebut.
  • Anda ubah value yang saya mark kuning di atas dengan nama label blog Anda, contohnya : blogger, Blogger, amp, AMP (perhatikan huruf besar kecil jika label menggunakan huruf besar ataupun sebaliknya). Ubah dengan URL blog Anda, contohnya : 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 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.
  • Berikutnya, buatlah sebuah halaman baru di dashboard blogger, pada bagian HTML, Anda copy paste kode di bawah ini lalu taruh di dalamnya.

<amp-iframe title="Recent-Posts-AMP"
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://2.bp.blogspot.com/-rRo__E6FsPs/Ws7U-IT8KNI/AAAAAAAAw_Q/qCwa6vKHgTIB-ytesdA4FlKrXMRYt5NMACLcBGAs/s1600/placeholder.png"
layout="fixed-height"
height="360"
width="auto"
placeholder>
</amp-img>
</amp-iframe>
  • Anda perhatikan gambar di bawah ini :



Catatan : Anda rubah kode yang saya mark "URL-Hosting-Anda" dengan link URL yang Anda upload di github dan sudah di rawgit.

Untuk demonya, Anda bisa buka tautan ini, Kumpulan Tutorial AMP Blogger Template 2018.

Bagaimana sob? Mudah bukan? Semoga artikel Memasang Recent Post by Label di Halaman Statis Blog valid AMP Template dapat bermamfaat untuk Anda.
Blogger
Disqus
Pilih Sistem Komentar

No comments

۝ Peraturan dalam berkomentar :

☛ UpsS,. Budayakan berkomentar sesudah membaca artikel sob.
☛ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
☛ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
☛ Saya PASTI akan berkunjung balik ke blog Sobat yang sudah mau berkomentar di sini.

Copyright © 2018 - Blogger NTT® Bloggerntt.com✓

Advertiser