Sitemap sangat penting keberadaannya untuk sebuah blog. Dengan adanya sitemap akan memudahkan para pembaca untuk mencari artikel dalam blog Anda. Ibarat sebuah buku, sitemap merupakan daftar isi buku tersebut. Jadi para pengunjung blog Anda nantinya bisa tahu seluruh isi blog Anda melalui daftar isi atau sitemap. Nah pada artikel kali ini saya akan membagikan Tutorial Membuat Sitemap Blog Valid Amp HTML yang tutorial ini di buat oleh Kang Adhy, Cara nya memang sulit karna harus upload ke Github lalu membuat link nya dari Rawgit.
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.
Baca juga Cara Upload File HTML Di Github
Jika blog AMP Anda menggunakan dua buah tampilan untuk halaman static yaitu untuk tampilan desktop dan mobile, maka kita harus membuat sitemap dua buah juga untuk tampilan mobile dan desktop.
Untuk membuatnya silahkan simak di bawah ini
Tutorial Membuat Sitemap Blog Valid Amp HTML
Langkah Pertama
Buka halaman statis blogger sobat lalu kamu tekan CTRL+U untuk melihat script yang ada di halaman sobat setelah itu copy script tersebut ke dalam notepade.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.Terus Ganti kode berikut :
<title>Bla...bla...bla...</title><title>Sitemap Blog Anda</title><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><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>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.htmlhttp://cdn.rawgit.com/darwinisrin/siijombi.html/master/sitemap8.htmlLangkah 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://siijombi.blogspot.com?",maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya ▼",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>“'+ o.m+'”</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+'…<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://siijombi.blogspot.com dengan URL blog sobat.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 huruf 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 Siijombi seperti berikut :
http://cdn.rawgit.com/darwinisrin/siijombi.html/master/sitemap22.html
Silahkan simpan URL seperti di atas pada menu untuk tampilan desktop.
Sekarang tinggal membuat sitemap untuk tampilan mobile. Langkah pertama silahkan copy source code halaman static blog sobat untuk tampilan mobile dengan cara klik kanan pada salah satu halaman static blog sobat dengan menambahkan ?m=1 pada URL-nya lalu View page source kemudian copy seluruh kodenya dan paste di notepad. 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 Siijombi untuk mobile seperti berikut :
http://cdn.rawgit.com/darwinisrin/siijombi.html/master/sitemap7.html
Silahkan simpan URL seperti di atas pada menu untuk tampilan mobile. Biasanya menu untuk tampilan mobile akan ditampilkan dengan amp-sidebar. 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.
Sumber : www.kompiajaib.com
Tambahkan Komentar Tutup Komentar