Membuat Recent Post By Label Untuk Blog AMP HTML

Kamis, Februari 08, 2018

Sebelumnya Saya sudah posting artikel dengan judul Membuat Table Of Contents Untuk Blog AMP HTML. Dan pada kesempatan kali ini Saya akan mencoba membuatkan artikel dengan judul Membuat Recent Post By Label Untuk Blog AMP HTML.

Untuk membuat recent post by label pada blog AMP memang sedikit ribet, namun jika tidak dengan cara seperti ini maka blog kita akan error pada validasi AMP. Karena Blog yang sudah valid amp tidak boleh ada javasript selain javascript dari amp-project.

Nah, jadi bagi Anda yang ingin Membuat Recent Post By Label Untuk Blog AMP HTML bisa ikuti caranya seperti dibawah ini.

Langkah pertama

Silahkan buka salah satu halaman static blog Anda, kemudian lihat source / Ctrl+U pada keyboard, lalu copas semua kodenya dan simpan di notepad.

Langkah kedua

Hapus kode yang berhubungan dengan blogger, seperti kode meta verifikasi search engine dan kode Google Analytics blog dan lainnya.

Kemudian edit kode yang seperti dibawah ini dengan judul halaman / sitemap blog Anda.

<title>Judul Halaman</title>

Rubah juga kode berikut ini:

<h2 class='post-title entry-title' itemprop='headline'>
<a href='http://www.namablog.com/p/judul-laman.html' itemprop='url mainEntityOfPage' title='judul-laman/a>
</h2>

Menjadi seperti ini:

<h2 class='post-title entry-title' itemprop='headline'>
<a href='URL HOSTING DI GITHUB' itemprop='url mainEntityOfPage' title='Judul-Halaman'>Judul Halaman</a>
</h2>

Untuk URL HOSTING DI GITHUB silahkan hapus huruf s pada URL cdn-nya menjadi HTTP seperti ini;

http://cdn.rawgit.com/username/repository/master/sitemap.html

username: nama akun github Anda
repository: nama folder hosting

Langkah ketiga

Silahkan simpan CSS di bawah ini di atas kode </style>

#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{text-decoration:none;color:#2C2C2C;font-weight:500}
#feed-container li a:hover{text-decoration:none;color:#E94141}
#feed-container li .news-text{margin-top:5px;line-height:1.3em!important}
#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 .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}
}

Langkah Keempat

Silahkan cari kode yang mirip seperti di bawah ini

<div class='post-body entry-content' id='post-body-xxxxx' itemprop='articleBody'>
...................................
...................................
...................................
<div class='clear'>
</div>

Kemudian ganti titik-titik dengan kode berikut;

<header id="result-desc"></header>
<ul id="feed-container"></ul>
<div id="feed-nav"></div>
<script type="text/javaScript">
var label="LabelBlogAnda";
</script> 
<script type='text/javascript'> 
//<![CDATA[
document.write;var loadToc,loadCategories,_toc={init:function(){var e={homePage:"URL-BlogAnda",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>

Ganti yang ditAndai sesuka hati

Langkah Kelima

Silahkan simpan file yang sudah dirubah tadi dengan extensi *.html contohnya seperti ini label.html lalu silahkan hosting di Github lalu copy URL Rawgit dan hapus huruf s dari HTTPS://cdn.rawgit.com/.... menjadi HTTP://cdn.rawgit.com/....

Selesai untuk membuat halaman recent post blog AMP untuk tampilan desktop.

Silahkan simpan URL seperti di atas pada menu untuk tampilan desktop.

Apabila tampilan blog Anda tidak sama antara dektop dan mobile, maka harus membuat halaman untuk tampilan mobile juga dengan cara yang sama dengan langkah pertama diatas, yakni mengakses halaman static blog Anda dengan menambahkan ?m=1 pada akhir URL nya, kemudian Ctrl+U / lihat scource. Dan untuk langkah selanjutnya sama dengan diatas. Lalu simpan URL nya pada menu untuk tampilan mobile.

Demikian artikel tentag cara Membuat Recent Post By Label Untuk Blog AMP HTML. Semoga bermanfaat.

Diposkan oleh: Warim Pada: Kamis, Februari 08, 2018

Berlangganan Lewat Email

Kirim alamat email Anda untuk mendapatkan notifikasi artikel terbaru dari blog Website Mini secara GRATIS langsung di kotak masuk Anda.