Skip to main content

follow us

Cara Membuat Sitemap SEO Responsive di Blog Ala Kompi Ajaib - Sitemap merupakan daftar isi blog yang menampilkan keseluruhan daftar post di blog yang tentunya akan mempermudah pengunjung blog kalian untuk memilih dan mencari post tertentu yang di inginkan.



Sitemap blog juga sangat penting digunakan untuk kalian khususnya yang sedang proses pendaftaran Google Adsense.

Nah untuk kali ini saya akan membagikan sebuah tutorial bagaimana cara membuat sitemap otomatis dan responsive seperti yang digunakan oleh kompi ajaib baik untuk kalian pengguna template amp blogger ataupun pengguna template non amp.

Sitemap SEO Responsive di Blogger ini sangat cocok untuk kalian gunakan, karena selain tampilannya yang responsive, sitemap ini juga memiliki fitur yang dapat menfilter post terbaru dan juga filter post berdasarkan label atau kategori serta di lengkapi juga fitur pencarian yang akan mempermudah pengunjung blog untuk mencari artikel yang dibutuhkan.



Selanjutnya untuk kalian yang ingin menggunakan Sitemap SEO Responsive di Blogger, silahkan ikuti tutorial singkat berikut :

Cara Membuat Sitemap SEO Responsive di Blog Non AMP

Silahkan Login ke Blogger terlebih dahulu

Selanjutnya silahkan klik Halaman/Page

Kemudian salin semua kode berikut dan tempelkan di halaman/page yang akan di buat sitemap blog.

<style>#sitemap-tab{padding:10px 10px;margin:0 auto 20px} #sitemap-tab table{width:auto;margin:0 auto} #sitemap-tab form{font:inherit} #sitemap-tab label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0} #sitemap-tab select[disabled]{opacity:.4} #post-searcher{display:block;margin:0;padding:0} #sitemap-tab input{width:100%;border:1px solid #dedede;border-radius:0px;margin:0;padding:5px;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #sitemap-tab select{width:100%;border:1px solid #dedede;border-radius:0px;margin:0 0 5px;padding:5px;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #sitemap-tab select option{min-height:1.4em!important;} #sitemap-tab input#feed-q{padding:5px 10px!important;}.news-text {font-size:14px;line-height:1.5em;} #sitemap-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none} #sitemap-container li{list-style:none;margin:0;padding:0;display:inline} #sitemap-container li a{text-decoration:none;color:#2C2C2C;font-weight:bold;font-size:18px} #sitemap-container li a:hover{text-decoration:none;color:#F62459} #sitemap-container li img{float:left;margin:0 15px 15px 0;padding:0;width:70px;height:50px;!important} #sitemap-nav{margin:10px 0 30px;text-align:center;font-weight:500;width:100%} #sitemap-nav a,#sitemap-nav span{color:#F62459;text-decoration:none;display:block;opacity:.8} #sitemap-nav a:hover,#sitemap-nav span:hover{opacity:1} #sitemap-nav span{cursor:wait} @media (max-width:600px){ #sitemap-tab table{margin:0 auto;width:100%} #sitemap-container,#sitemap-tab{margin:0 auto} #sitemap-container li .inner{margin:5px auto;height:auto;} #SitemaContainer li{float:none;display:block;width:auto;height:auto} #sitemap-container li .news-text, #sitemapContainer:after,#sitemap-container li img{display:none!important} </style> 

<div id="sitemap-tab">
<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" placeholder="Ketik dan tekan ENTER" type="text" /></form>
</td> </tr>
</tbody> </table>
</div>
<header id="result-desc"></header> <ul id="sitemap-container"></ul>
<div id="sitemap-nav">
</div>
<script type="text/javaScript"> document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={url:'https://www.pehawe.info/',maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"//2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1100/no-thumbnail.png",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('sitemap-container'),g:el('sitemap-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.url+'/feeds/posts/summary/-/'+ tag+'?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc':cfg.url+'/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.url+'/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(/.*?:\/\//g , "//").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).replace(/%20/g, " ")+'">'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'</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.url+'/feeds/posts/summary?alt=json-in-script&start-index='+(o.i+ 1)+'&max-results='+ cfg.maxResults+'&orderby=published&callback=loadToc');fn.b(cfg.url+'/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> <div class="clear">
</div>
<div class="inline-ad">
</div>
<b:if cond="data:blog.pageType == &quot;static_page&quot;">
<style type="text/css">
#comments,#sidebar-wrapper {display:none;}
#main-wrapper {float:none;width:95%;margin:0 auto;max-width:100%;}
</style>
</b:if>

Silahkan ganti https://www.pehawe.info dengan url blog kalian.

Simpan dan lihat hasilnya.

Selanjutnya untuk kalian pengguna template amp, silahkan ikuti tutorial berikut :

Cara Membuat Sitemap SEO Responsive di Blog AMP


Nah jika kalian tidak sabar ingin mencoba membuat Sitemap blog pada halaman static Blogger AMP HTML, silahkan gunakan kode berikut ini dan paste pada mode HTML halaman static untuk Sitemap blog kalian.

<amp-iframe title="Sitemap"
              src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/sitemaps-amp.html?url=https://www.pehawe.info/"
              height="750"
              layout="fixed-height"
              frameborder="0"
              sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">
    <amp-img src="https://2.bp.blogspot.com/-rRo__E6FsPs/Ws7U-IT8KNI/AAAAAAAAw_Q/qCwa6vKHgTIB-ytesdA4FlKrXMRYt5NMACLcBGAs/s1600/placeholder.png"
             layout="fixed-height"
             height="360"
             width="auto"
             placeholder>
    </amp-img>
  </amp-iframe>

Silahkan ganti URL https://www.pehawe.info/ dengan URL blog Anda dan pastikan blog kalian sudah menggunakan HTTPS.

Demikian tutorial Cara Membuat Sitemap SEO Responsive di Blog Ala Kompi Ajaib yang dapat saya bagikan kali ini semoga bermanfaat teruntuk kalian para blogger. Salam luar biasa.
Disclaimer : Semua Konten yang kami bagikan semuanya adalah Gratis, dan kalian di ijinkan untuk mereshare ulang dg menyertakan link sumber dari Pehawe Dan kami tidak pernah meminta donasi atas apa yg kami bagikan. Trims

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar