Membuat Sitemap Blog Untuk Blogger AMP HTML Dengan Custom Domain

Ditulis oleh: Adhy Suryadi

Ditulis pada: 11/26/2016

Seperti kita ketahui bahwa ada beberapa komponen AMP HTML yang harus menggunakan HTTPS agar dapat berjalan. Komponen tersebut di antaranya adalah amp-iframe. Dan 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 menyebabkan masalah bagi blogger yang menggunakan custom domain. Karena dengan custom domain maka blogger tidak bisa menggunakan HTTPS. Karena blogger yang menggunakan custom domain tidak bisa menggunakan HTTPS, maka blogger yang menggunakan custom domain tidak bisa menggunakan amp-iframe untuk menampilkan sitemap blogger.

Untuk itu terpaksa blogger yang menggunakan custom domain harus membuat sitemap blog pada hosting dengan tanpa HTTPS. Kita bisa menggunakan cdn.rawgit dari Github namun tanpa HTTPS untuk menghosting kode-kode sitemap.

Karena 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 kita memanipulasi tampilan sitemap yang kita hosting di Github dengan tampilan blog kita agar pengunjung tidak merasa asing dengan tampilan sitemap blog. Kita menggunakan template blog untuk halaman static untuk menampilkan sitemap blog. Jika blog AMP Anda menggunakan 2 buah tampilan untuk halaman static yaitu untuk tampilan desktop dan mobile, maka kita harus membuat sitemap 2 buah juga untuk tampilan mobile dan desktop. Demo seperti pada tombol di bwah ini.

Jika blog Anda hanya menggunakan 1 tampilan (tampilan yang sama) untuk mobile dan desktop, maka cukup membuat 1 halaman sitemap saja.

Untuk membuatnya silahkan ikuti langkah-langlah di bawah ini:

Langkah Pertama

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

Langkah Kedua

Kemudian silahkan hapus beberapa kode yang tidak diperlukan yang berhubungan dengan blogger seperti kode-kode meta untuk verifikasi search engine dan kode Google Analytics blog.

Lalu rubah kode berikut:

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

menjadi

<title>Sitemap Blog Anda</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 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 filenya 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:

http://cdn.rawgit.com/KompiAjaib/kompi-html/master/sitemap-kompi.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

Silahkan cari 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.kompiajaib.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.kompiajaib.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/....

Selesai untuk membuat sitemap blog AMP untuk tampilan desktop, sebagai contoh sitemap untuk blog Kompi Ajaib seperti berikut;

http://cdn.rawgit.com/KompiAjaib/kompi-html/master/sitemap-kompi1.html

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

Nah sekarang tinggal membuat sitemap untuk tampilan mobile.

Langkah pertama silahkan copy source code halaman static blog Anda untuk tampilan mobile dengan cara klik kanan pada salah satu halaman static blog Anda dengan menambahkan ?m=1 pada URL-nya lalu View page source kemudian copy seluruh kodenya dan paste di notepad atau dreamweaver.

Langkah kedua dan seterusnya silahkan lakukan seperti langkah-langkah di atas untuk tampilan desktop.

Selesai untuk membuat sitemap blog AMP untuk tampilan mobile, sebagai contoh sitemap untuk blog Kompi Ajaib untuk mobile seperti berikut;

http://cdn.rawgit.com/KompiAjaib/kompi-html/master/sitemap-kompi1hp.html