Begini Cara Membuat Recent Post by Label Untuk Blog AMP HTML

Ditulis oleh: Ifrod Maksum
Ditulis pada: 6/22/2017

Beginilah Cara Membuat Recent Post by Label Untuk Blog AMP HTML. Setelah banyak blog yang menggunakan responsive design template, kini google meluncurkan template Accelerated Mobile Page atau yang biasa dikenal dengan sebutan AMP; merupakan desain template yang mengutamakan kecepatan instan loading sehingga lebih mudah diakses dari perangkat mobile, jika pada akses mobile sebegitu cepat, bagaimana jika diakses dari perangkat dekstop? waw pastinya sangat cepat dibandingkan dengan responsive design template. Hanya ada beberapa kendala jika mau mengubah template blog dari responsive design ke AMP HTML; salah satunya tidak boleh ada javascript selain amp project, harus edit postingan dan lain-lain.

Karena itulah disini kita akan memberikan solusi untuk blog AMP HTML yang ingin tetap menggunakan recent post by label yang disimpan dihalaman static sebagai pengganti url label yang biasanya ada di menu blog. Dengan tetap menggunakan tampilan blog tapi menggunakan url yang berbeda yaitu github, gampangnya javacsript untuk recent pos ini kita simpan / hosting di github menggunakan trik blog kompiajaib tentang membuat sitemap blog AMP, dengan hanya mengganti kode-kode nya.

Untuk memasang langsung di blog amp tentu tidak bisa karena aturan amp html tidak boleh ada javascript kecuali javascript amp project, karena itulah kita bisa mengakalinya menggunakan github supaya aman dari error amp html.

Tutorial ini merupakan gabungan dari postingan mas adhy suryadi, yakni tentang cara membuat sitemap blog amp dan recent post by label dihalaman static. Jika anda tertarik, silahkan ikuti yang mau lewat ini:

Langkah pertama
Silahkan akses salah satu halaman static blog anda, kemudian page source / Ctrl+U lalu copas semua kodenya di notepad.

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

Lalu edit kode ini dengan judul halaman / sitemap blog anda

<title>Judul Halaman</title>

Rubah kode berikut:

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

menjadi

<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 hurus 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 seperti contoh label.html lalu silahkan hosting di Github lalu copy URL Rawgit dan hapus hurup 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.

Nah 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 / page scource. Dan untuk langkah selanjutnya sama dengan diatas. Lalu simpan URL nya pada menu untuk tampilan mobile. Biasanya menu untuk tampilan mobile akan ditampilkan dengan amp-sidebar.

Selesai semua untuk membuat recent post by label blog AMP untuk tampilan mobile dan dekstop, sebagai contoh recent post untuk mobile dan dekstop seperti berikut;

Dekstop: http://cdn.rawgit.com/NomIfrod/html/master/labelanak.html
Mobile: http://cdn.rawgit.com/NomIfrod/html/master/labelanak-hp.html

Cukup mudah bukan? sekian dari saya tentang tips solusi membuat recent post by label untuk halaman static blo AMP HTML. Selamat mencoba...

Referensi
http://www.kompiajaib.com/2016/11/membuat-sitemap-blog-untuk-blogger-amp.html
http://www.kompiajaib.com/2016/04/recent-post-by-label-untuk-mengganti.html