CARA MEMBUAT DAFTAR ISI ATAU SITEMAP RESPONSIVE DI BLOGGER

Monday, 12 June 2017

gambar daftar isi atau sitemap responsive terbaru

DIDIN XP | Postingan Berikut ini penulis akan membagikan tutorial cara membuat daftar isi atau sitemap responsive terbaru untuk blogger, Sitemap ini memilihki design yang minimalis dan modern sehingga sitemap atau daftar isi blog anda akan terlihat menarik di mata pengunjung.

(BACA JUGA :  Cara Menclaim/Verifikasi Blog Di Google)

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. 

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

 LIHAT DEMO

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

CARA MEMBUAT DAFTAR ISI ATAU SITEMAP RESPONSIVE DI BLOGGER

Berikut langkah-langkah cara membuat daftar isi atau sitemap ini :

1. Login ke Dasbor Blogger anda disini
2. Buat baru Laman/HTML Daftar isi atau Sitemap atau Edit laman/HTML yang sudah dibuat untuk tempat sitemap ini
3. Anda pilih HTML disebelah kanan COMPOSE
4. Silahkan Copy Paste kode dibawah ini di halaman tempat yang anda inginkan.
<style scoped="scoped" type="text/css"> #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:none;margin:0;padding:5px;font-size:86%;text-transform:uppercase;outline:0;-webkit-box-shadow:inset 0 1px 3px #000,0 1px 0 #444;-moz-box-shadow:inset 0 1px 3px #000,0 1px 0 #444;box-shadow:inset 0 1px 3px #000,0 1px 0 #444;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box} #feed-container{display:block;clear:both;margin:0 30px;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 16px;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis} #feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:700} #feed-container li a:hover{text-decoration:none;color:#E94141} #feed-container li .news-text{margin:10px 0 0} #feed-container li img{margin:0 10px 5px 0;padding:5px;float:left;display:block;} #result-desc{margin:0 30px;padding:0;border-bottom:2px solid #eee} #result-desc div,#result-desc span{display:block;margin:0;padding:5px 10px 7px;color:#D64D52} #result-desc div{color:inherit} #feed-nav{margin:10px 30px 0;text-align:center;font-weight:700} #feed-nav a,#feed-nav span{border:1px solid #C9C9C9;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} } </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" type="text" /> </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'> //<![CDATA[ document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={homePage:'http://'+ window.location.hostname,maxResults:30,numChars:150,thumbWidth:80,navText:"Pilih Artikel Selanjutnya ?",resetToc:"Kembali ke Awal",noImage:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmuL7pa224DEEWSbC-UeisNMCisQhp2yhqhRHvEgzBeanYPbcPc32BepijttlJ-sml6g-qx7KgLplukjpzGalRTl7lg53jmyBq_OVuvJWqN0P92IbV4OcV1j1iBeqq9Vmrm-YojMuXRyu/s1600/Panah.jpg",loading:"<span>Loading...</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+"-c"):cfg.noImage.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+"-c");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.thumbWidth+'px;" src="'+ g+'" alt="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank">'+ b+'</a><b> - ('+ e+')</b><br>'+'<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)+'">'+ a[i].term.toUpperCase()+'</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>
5. Kemudian klik SAVE dan silahkan lihat hasilnya.

Note :

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

Nah itulah tadi ulasan tutorial CARA MEMBUAT DAFTAR ISI ATAU SITEMAP RESPONSIVE DI BLOGGER, Semoga anda suka dengan model daftar isi terbaru-nya.

Sekian dulu dari penulis, Jumpa lagi di postingan berikutnya.

Terima Kasih sebelumnya sudah membaca artikel ini, Wasalam.