Solusi Membuat Recent Post by Label On Static Page For Blogger AMP HTML

Solusi Membuat Recent Post by Label On Static Page Untuk Blog valid AMP HTML. Berawal saat mencoba mengacak-acak template blog saya yang lain supaya bisa support AMP HTML sampe edit postingan satu persatu yang membuat puyeng isi kepala, dan merasa puas karena saat ini blog tersebut sudah valid AMP HTML mulai dari homepage postpage sampai staticpage. Saat saya membuat sitemap / daftar isi blog amp versi kompiajaib.com, saya mulai berpikir bagaimana cara membuat recent post by label yang biasa disimpan dihalaman static untuk blog valid amp?

Recent post by label yang dipasang dihalaman static ini sebagai pengganti url label yang biasanya ada di menu blog. 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...

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