cara membuat sitemap lengkap dan responsive pada halaman statis blog

MUNGKUR | Hallo Sahabat. selamat datang, salam bahagia - pada kesempatan kali ini saya akan berbagi tentang cara membuat sitemap lengkap dan responsive pada halaman statis. 

sitemap adalah  kumpulan daftar isi yang digunakan untuk mempermudah pengunjung melihat daftar artikel yang sudah di publish di blog kita.

sitemap ini sangat praktis dan mempermudah pengunjung dalam mencari daftar artikel yang di inginkan, saya menyarankan untuk kita supaya menggunakan sitemap ini karena kelengkapan dalam pencarian artikel.

Fitur untuk Daftar isi atau Sitemap terbaru ini yaitu :

• Responsive
• Loading ringan dan cepat
• Dilengkapi fitur pilihan KATEGORI, ARTIKEL, DAN PENCARIAN. Sehingga lebih memudahkan pengunjung menemukan artikel yang dicari. 

urutkan artikel berdasarkan  

• artikel terbaru
• artikel yang terakhir di update

filter artikel berdasarkan kategori 

• pilih kategori (menampilkan daftar label)

cari artikel dengan kata kunci (kolom isi kata kunci)

Untuk tampilan Daftar isi atau sitemap responsive terbaru anda bisa lihat demo di bawah ini.

Jika anda ingin menerapkan Daftar isi atau Sitemap responsive terbaru ini, Silahkan anda simak langkah - langkah berikut ini.

cara membuat sitemap lengkap dan responsive pada halaman statis blog

Copy Kode

Silahkan copy kode berikut dan akan di tempelkan pada halaman blog.

<style type='text/css' scoped=""> #table-outer{padding:7px 10px;margin:0 auto} #table-outer table{width:auto;margin:0 auto;border:none!important;} #table-outer table td{border:none!important;padding:0!important} #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 0 5px;padding:5px;font-family: Roboto,sans-serif!important;font-size:14px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #table-outer select option{min-height:1.4em!important;} #table-outer input#feed-q{padding:5px 10px!important;} #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:#000000;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:#245570;font-weight:900} #feed-container li a:hover{text-decoration:none;color:#E94141} #feed-container li .news-text{margin-top:5px;line-height:1.3em!important} #feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important;} #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 (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!important} } @media (max-width:414px){#table-outer table td{display:block;text-align:center} #table-outer label{display:block;margin:0;padding:4px 0 0;text-align:center} #table-outer input, #table-outer select{margin:0 0 10px} } </style> <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" placeholder="Ketik dan tekan ENTER" type="text" /> </form> </td> </tr> </tbody> </table> </div> <br /> <header id="result-desc"></header> <br /> <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:window.location.origin,maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya ▼",resetToc:"Kembali ke Awal",noImage:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVHyE06lXkxv0a6NsuIp62acbj5qoDM2lk5y2sb1s1thDQF-ILjZbLM2FtCw31V51R0uOvWwtM6-x9CxvihZFib5qS_FN0yaUfjqELwePmmnWKQgnTq-pDxu2ygsyqfCyo_1Z4P7rQ4Dmb/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('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(/.*?:\/\//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+'…<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.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>

masuk ke blogger
Login ke Dashbor Blogger anda Disini

pada dashbor blogger > klik pada halaman > buat halaman baru

di halaman baru silahkan pilih Html, jangan pilih Compose  karena kode akan berubah dan bisa terjadi ksalahan kode.

Paste Kode
Paste/tempelkan kode di Html
untuk melihat hasilnya bisa lihat dengan meng klik pratinjau Kalau sudah oke.
Kemudian klik SAVE dan publikasikan silahkan lihat hasilnya.

Baca Juga : Cara membuat sitemap blog responsive sederhana pada halaman statis

Note :
Silahkan anda ubah kata Urutkan artikel berdasarkan, artikel terbaru dan lain-lain dengan sesuai kalimat yang anda ingin kan.

Oke ces , demikian yang bisa saya bagikan buat kita semua, cara membuat sitemap lengkap dan responsive pada halaman statis blog, semoga bermanfaat dan akhir kata saya ucapkan terimaksih, sampai jumpa di postingan saya selanjutnya.

jangan lupa bahagia

Share this post