Connect with us

Tutorial Cara Membuat Sitemap di Blog AMP HTML

Tutorial Blog

Tutorial Cara Membuat Sitemap di Blog AMP HTML

Tutorial Cara Membuat Sitemap di Blog AMP HTML – Beberapa minggu yang lalu ada seorang blogger yang menghubungi saya via Whattsaps, dalam percakapan tersebut Ia berniat memninta bantuan untuk membuat sitemap di blog AMP yang dimilikinya.

Taukah Anda kenapa dia mengubungi saya?

Katanya ia sudah mencari pembahasan mengenai tutorial cara membuat sitemap di AMP di google, kala itu ia mengunjungi blog Omboolom.om (punya saya) dan akhirnya ia mengubungi saya lewat Whatsapps.

Berbicara mengenai cara membuat sitemap di blog AMP Html mungkin tidak segampang dengan membuat peta situs di blog Non AMP.

Ketahuilah, dalam APM Html tidak diperbolehkan untuk menampilkan atau menjalankan Jawvascript.

Nah dengan begitu maka agak sedikit susah karena kita harus menjauhkan javascript di postingan Blog AMP.

Tutorial ini sebelumnya sudah dipublikasikan oleh kang Adhy Suryadi di blognya Kompi Ajaib.

Dan postingan kali ini kami akan mempublikasikan ulang konten tersebut.

Cara Membuat Sitemap di  Blog AMP

#1. Membuat Dua Halaman Kosong (Sitemap)

Langkah pertama untuk membuat sitemap di blog AMP adalah membuat halaman dengan judul Sitemap.

Buatlah dua halaman dengan judul yang sama, Hal ini bertujuan karena sitemap perbedaan antara sitemap versi Mobile dan versi Dekstop.

Maka buatlah dua halaman dengan judul sitemap dan publikasikan

#2. Buka Halaman & CTRL U

Sesudah membuat halaman dan mempostingnya, buka halaman tersebut (jangan di preview) lalu pencet Ctrl+U di komputer Anda.

Pada halaman tersebut nantinya akan terbuka HTML berdasarkan laman tersebut.

#3. Copas dan Edit

Langkah ketiga adalah copas kode tersebut dan edit di notepad.

Cari kode ini

[sourcecode language=”plain”]<div class=’post-body entry-content’ id=’post-body-xxxxxxxxxxxxxxxx’ itemprop=’articleBody’>[/sourcecode]

Lalu tambahkan kode ini dibawahnya

[sourcecode language=”plain”]<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:"<mark>http://www.bloganda.com</mark>",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>[/sourcecode]

Silahkan ganti Url (yang berwarna kuning) dengan link blog Anda.

Setelah copas lalu save document notepad tadi dengan judul sitemap AMP versi Dekstop. Ketika menyimpan document notepad, biasanya bertype TXT. Nah disana kita harus menggantinya Doc Type dengan html, jadi filenya bernama Sitemap AMP Versi Dekstop.html

Setelah itu upload ke github dan rubah urlnya di https://rawgit.com/

#4. Tambahkan CSS Style di Template

Langkah selanjutnya adalah menambahkan CSS style di template blog Anda.

Hal ini bertujuan untuk mengtatur  style agar sama seperti sitemap kang Adhy di kompiajaib.com

berikut ini kodenya

[sourcecode language=”plain”]

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

[/sourcecode]

Simpan kode CSS diatas tepatnya di atas kode <style>

#5. Custom Url

Untuk menampilkan sitemap maka ganti url menu sitemap Anda menggunakan url dari rawgit tadi dan jangan lupa ganti urlnya.

Contoh asal

[code]https://rawgit.com/blablablabla/blablabla/blbll/[/code]

Jadi begini

[code]http://rawgit.com/blablablabla/blablabla/blbll/[/code]

Anda hanya perlu menghilangkan hurup S (Url Secure)

Cara membuat sitemap di blog AMP versi dekstop sudah selesai, untuk selanjutnya adalah membuat sitemap versi Mobile.

Sebenarnya pembuatannya tidak jauh berbeda..

Namun….. kamu hanya pertu menambahkan kode url tampilan versi mobile dalam pembuatannya.

Jadi yang asalnya saat kamu membuka laman yang kedua maka tambahkan kode ini ?m=1 seperti ini contoh dibawah ini :

[code]http://www.bloganda.com/p/sitemap[/code]

Jadi..

[code]http://www.bloganda.com/p/sitemap[/code]

Nah itulah cara membuat sitemap di blog AMP Html custom domain ala kang Adhy Suryadi

Continue Reading
Advertisement
You may also like...

Do the work what you can today even though difficult, don't put off your work for tomorrow even though it easily

Click to comment

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

More in Tutorial Blog

To Top

By continuing to use the site, you agree to the use of cookies. More Information

Pengaturan cookie di situs web ini disetel ke "izinkan cookie" untuk memberi Anda pengalaman penelusuran terbaik. Jika Anda terus menggunakan situs web ini tanpa mengubah pengaturan cookie Anda atau Anda mengklik "Terima" di bawah ini maka Anda menyetujui ini.

Close