Membuat Sitemap Blog Untuk Blogger AMP HTML Dengan Custom Domain

Seperti yang kita ketahui bahwa ada beberapa komponen AMP HTML yang harus menggunakan HTTPS agar dapat berjalan dengan semestinya. Komponen tersebut di antaranya adalah amp-iframe. Dan kalian para blogger dapat membuat sitemap blog dengan menggunakan amp-iframe dengan menghosting kode-kodenya terlebih dahulu dengan URL hosting dengan HTTPS seperti halnya cdn.rawgit dari Github.

Namun hal ini tentu dapat menyebabkan masalah bagi para blogger yang menggunakan custom domain. Karena dengan custom domain maka para blogger tidak akan bisa menggunakan HTTPS, maka tentunya para blogger yang menggunakan custom domain tidak bisa menggunakan amp-iframe untuk menampilkan sitemap blogger.

Untuk itu terpaksa para blogger yang menggunakan custom domain harus membuat sitemap blog pada hosting dengan tanpa HTTPS. Tentunya kalian bisa menggunakan cdn.rawgit dari Github namun tanpa HTTPS untuk menghosting kode-kode sitemap. Karena para blogger yang menggunakan custom domain tidak bisa menampilkan sitemap di blog karena sitemap-nya tidak menggunakan HTTPS, maka kita menggunakan link tanpa HTTPS dari cdn.rawgit.

Untuk itu kalian harus memanipulasi tampilan sitemap yang kita hosting di Github dengan tampilan blog kita agar pengunjung tidak merasa asing dengan tampilan sitemap blog kalian. Kalian harus menggunakan template blog untuk halaman static untuk menampilkan sitemap blog. Jika blog AMP kalian menggunakan 2 buah tampilan untuk halaman static yaitu untuk tampilan desktop dan mobile, maka kalian harus membuat sitemap 2 buah juga untuk tampilan mobile dan desktop. Demo seperti pada tombol di bwah ini.

DEMO Via Desktop DEMO Via Mobile

Jika blog kalian hanya menggunakan 1 tampilan (tampilan yang sama) untuk mobile dan desktop, maka cukup membuat 1 halaman sitemap saja. Untuk cara membuatnya silahkan ikuti langkah-langlah di bawah ini.

Langkah Pertama

Silahkan copy source code halaman static blog kalian untuk tampilan desktop dengan cara klik kanan pada salah satu halaman static blog kalian lalu View page source kemudian copy seluruh kodenya dan paste di notepad atau dreamweaver.

Langkah Kedua

Kemudian silahkan kalian hapus beberapa kode yang tidak diperlukan yang berhubungan dengan blog kalian, seperti kode-kode meta untuk verifikasi search engine dan kode Google Analytics blog. Lalu kalian cari kode di bawah ini dan kalian rubahlah.

<title>Bla...bla...bla...</title>

Setelah kalian menemukannya lalu kalian rubah seperti ini.

<title>Sitemap Blog Anda</title>

Setelah itu kalian cari lagi kode di bawah ini dan rubahlah.

<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>

Setelah menemukannya kalian rubahlah menjadi seperti ini.

<h2 class='post-title entry-title' itemprop='headline'>
<a href='URL HOSTING SITEMAP DI GITHUB' itemprop='url mainEntityOfPage' title='Sitemap Blog Anda'>Sitemap Blog Anda</a>
</h2>

Untuk URL HOSTING SITEMAP DI GITHUB silahkan hapus hurus s pada URL cdn-nya menjadi HTTP. Karena kode-kodenya belum kita hosting, kira-kira URL HOSTING SITEMAP DI GITHUB seperti berikut.

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

Contoh untuk punya saya:

https://rawcdn.githack.com/ariesvenus/blogcozone/e31509a907601b9a4be7ca76497b291ee55f21a4/sitemap1.html

Langkah Ketiga

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

#table-outer{padding:7px 10px;margin:0 auto}
#table-outer table{width:auto;margin:0 auto}
#table-outer form{font:inherit}
#table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}
#table-outer select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-outer input,#table-outer select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family: Roboto,sans-serif;font-size:16px;font-weight:500;text-transform:capitalize;outline:0;color:#333;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#table-outer select option{min-height:1.4em;}
#table-outer input#feed-q{padding:5px 10px;}
#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}
#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 screen and (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}
}

Langkah Keempat

Kemudian silahkan kalian cari lagi kode yang mirip seperti di bawah ini.

<div class='post-body entry-content' id='post-body-xxxxxxxxxxxxxxxx' itemprop='articleBody'>

lalu ganti kode yang ada di antara kode di atas dengan kode <div class='clear'></div> dengan kode berikut ini.

<div id="table-outer">
<table><tbody>
<tr><td><label for="feed-order">Urutkan artikel berdasarkan:</label></td> <td><select id="feed-order"> <option selected="" value="published">Artikel terbaru</option> <option value="updated">Artikel yang terakhir di update</option> </select></td></tr>
<tr><td><label for="label-sorter">Filter artikel berdasarkan kategori:</label></td> <td><select disabled="" id="label-sorter"> <option selected="">Loading....</option> </select></td></tr>
<tr>                 <td><label for="feed-q">Cari artikel dengan kata kunci:</label></td> <td><form id="post-searcher">
<input id="feed-q" type="text" placeholder="Ketik dan tekan ENTER"/>
</form>
</td></tr>
</tbody></table>
</div>
<header id="result-desc"></header>
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script type='text/javaScript'>
document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={homePage:"http://www.blogcozone.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>",counting:"<div>Memuat artikel...</div>",searching:"<span>Mencari...</span>"},w=window,d=document,el=function(id){return d.getElementById(id);},o={a:el('feed-order'),b:el('label-sorter').parentNode,c:el('post-searcher'),d:el('feed-q'),e:el('result-desc'),f:el('feed-container'),g:el('feed-nav'),h:d.getElementsByTagName('head')[0],i:0,j:null,k:'published',l:0,m:""},fn={a:function(){old=el('temporer-script');old.parentNode.removeChild(old);},b:function(param){var script=d.createElement('script');script.type="text/javascript";script.id="temporer-script";script.src=param;if(el('temporer-script'))fn.a();o.h.appendChild(script);},c:function(mode,tag,order){o.i++;o.e.innerHTML=cfg.counting;o.g.innerHTML=cfg[mode==1?"searching":"loading"];if(mode===0){fn.b(tag!==null?cfg.homePage+'/feeds/posts/summary/-/'+ tag+'?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc':cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc');}else if(mode==1){fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&q='+ tag+'&orderby='+ order+'&callback=loadToc');}
o.j=(tag!==null)?tag:null;o.l=mode;o.a.disabled=true;o.b.children[0].disabled=true;},d:function(json){var _h;o.g.innerHTML="";o.e.innerHTML=o.l==1?'<span>Hasil penelusuran untuk kata kunci <b>&#8220;'+ o.m+'&#8221;</b> ('+ json.feed.openSearch$totalResults.$t+' Hasil)</span>':'<div>Total: '+ json.feed.openSearch$totalResults.$t+' Artikel</div>';if("entry"in json.feed){var a=json.feed.entry,b,c,_d,e="0 Komentar",f="",g;for(var i=0;i<cfg.maxResults;i++){if(i==a.length)break;b=a[i].title.$t;_d=("summary"in a[i])?a[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,cfg.numChars):"";g=("media$thumbnail"in a[i])?a[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+""):cfg.noImage.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+"");for(var j=0,jen=a[i].link.length;j<jen;j++){c=(a[i].link[j].rel=="alternate")?a[i].link[j].href:"#";}
for(var k=0,ken=a[i].link.length;k<ken;k++){if(a[i].link[k].rel=="replies"&&a[i].link[k].type=="text/html"){e=a[i].link[k].title;break;}}
_h=d.createElement('li');_h.innerHTML='<div class="inner"><img style="width:'+ cfg.thumbWidth+'px;height:'+ cfg.thumbHeight+'px;" src="'+ g+'" alt="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank" title="'+ b+'">'+ b+'</a><div class="news-text">'+ _d+'&hellip;<br style="clear:both;"></div></div>';o.f.appendChild(_h);}
_h=d.createElement('a');_h.href='#load-more';_h.innerHTML=cfg.navText;_h.onclick=function(){fn.c(o.l,o.j,o.k);return false;};}else{_h=d.createElement('a');_h.href='#reset-content';_h.innerHTML=cfg.resetToc;_h.onclick=function(){o.i=-1;o.e.innerHTML=cfg.counting;o.f.innerHTML="";fn.c(0,null,'published');o.a.innerHTML=o.a.innerHTML;o.b.children[0].innerHTML=o.b.children[0].innerHTML;return false;};}
o.g.appendChild(_h);o.a.disabled=false;o.b.children[0].disabled=false;},e:function(json){var a=json.feed.category,b='<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';for(var i=0,len=a.length;i<len;i++){b+='<option value="'+ encodeURIComponent(a[i].term)+'">'+ encodeURIComponent(a[i].term)+'</option>';}
b+='</select>';o.b.innerHTML=b;o.b.children[0].onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.loading;fn.c(0,this.value,o.k);};}};loadToc=fn.d;loadCategories=fn.e;fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+(o.i+ 1)+'&max-results='+ cfg.maxResults+'&orderby=published&callback=loadToc');fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');o.a.onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.counting;o.b.children[0].innerHTML=o.b.children[0].innerHTML;fn.c(0,null,this.value);o.k=this.value;};o.c.onsubmit=function(){o.i=-1;o.f.innerHTML="";o.m=o.d.value;fn.c(1,o.d.value,o.k);return false;};}};_toc.init();
</script>

Ganti kode http://www.blogcozone.com dengan URL blog Anda.

Langkah Kelima

Silahkan save as file yang kita rubah barusan dengan extensi *.html seperti contoh sitemap.html lalu silahkan hosting di Github lalu copy URL Rawgit dan hapus hurup s dari HTTPS://cdn.rawgit.com/.... menjadi HTTP://cdn.rawgit.com/....

Dan trik ini bisa digunakan juga untuk element blog lainnya yang tidak bisa ditampilkan di blog AMP dengan custom domain seperti untuk halaman hasil pencarian dengan Google Custom Search.