Membuat Sitemap Blog Untuk Blogger Amp Html Dengan Custom Domain

Seperti kita ketahui bahwa ada beberapa komponen AMP HTML yang harus memakai HTTPS supaya sanggup berjalan. Komponen tersebut di antaranya yaitu amp-iframe. Dan blogger sanggup menciptakan sitemap blog dengan memakai amp-iframe dengan menghosting kode-kodenya terlebih dahulu dengan URL hosting dengan HTTPS menyerupai halnya cdn.rawgit dari Github.

Namun hal ini menjadikan problem bagi blogger yang memakai custom domain. Karena dengan custom domain maka blogger tidak sanggup memakai HTTPS. Karena blogger yang memakai custom domain tidak sanggup memakai HTTPS, maka blogger yang memakai custom domain tidak sanggup memakai amp-iframe untuk menampilkan sitemap blogger.

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

Karena blogger yang memakai custom domain tidak sanggup menampilkan sitemap di blog alasannya sitemap-nya tidak memakai HTTPS, maka kita memakai link tanpa HTTPS dari cdn.rawgit.

Untuk itu kita memanipulasi tampilan sitemap yang kita hosting di Github dengan tampilan blog kita supaya pengunjung tidak merasa asing dengan tampilan sitemap blog. Kita memakai template blog untuk halaman static untuk menampilkan sitemap blog. Jika blog AMP Anda memakai 2 buah tampilan untuk halaman static yaitu untuk tampilan desktop dan mobile, maka kita harus menciptakan sitemap 2 buah juga untuk tampilan mobile dan desktop. Demo menyerupai pada tombol di bwah ini.

Sitemap Kompi Ajaib tampilan desktop

Sitemap Kompi Ajaib untuk tampilan mobile

Jika blog Anda hanya memakai 1 tampilan (tampilan yang sama) untuk mobile dan desktop, maka cukup menciptakan 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 kemudian View page source kemudian copy seluruh kodenya dan paste di notepad atau dreamweaver.

Langkah Kedua

Kemudian silahkan hapus beberapa instruksi yang tidak diharapkan yang bekerjasama dengan blogger menyerupai kode-kode meta untuk verifikasi search engine dan instruksi Google Analytics blog.

Lalu rubah instruksi berikut:

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

menjadi

 <title>Sitemap Blog Anda</title>

Rubah instruksi 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 menyerupai 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 instruksi </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 instruksi yang menyerupai mirip di bawah ini

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

kemudian ganti instruksi yang ada di antara instruksi di atas dengan kode <div class='clear'></div> dengan instruksi 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 menurut 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="Membuat Sitemap Blog Untuk Blogger AMP HTML Dengan Custom Domain Membuat Sitemap Blog Untuk Blogger AMP HTML Dengan Custom Domain"><a class="toc-title" href="'+ c+'" target="_blank" title="Membuat Sitemap Blog Untuk Blogger AMP HTML Dengan Custom Domain">'+ 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 instruksi http://www.kompiajaib.com dengan URL blog Anda.

Langkah Kelima

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

Selesai untuk menciptakan sitemap blog AMP untuk tampilan desktop, sebagai teladan sitemap untuk blog Kompi Ajaib menyerupai berikut;

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

Silahkan simpan URL menyerupai di atas pada sajian untuk tampilan desktop.

Nah kini tinggal menciptakan 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 kemudian View page source kemudian copy seluruh kodenya dan paste di notepad atau dreamweaver.

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

Selesai untuk menciptakan sitemap blog AMP untuk tampilan mobile, sebagai teladan sitemap untuk blog Kompi Ajaib untuk mobile menyerupai berikut;

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

Silahkan simpan URL menyerupai di atas pada sajian untuk tampilan mobile. Biasanya sajian untuk tampilan mobile akan ditampilkan dengan amp-sidebar.

Dan trik ini sanggup dipakai juga untuk element blog lainnya yang tidak sanggup ditampilkan di blog AMP dengan custom domain menyerupai untuk halaman hasil pencarian dengan Google Custom Search.

Sumber https://www.kompiajaib.com/

Share this post