Fast Load: Cara Menciptakan Sitemap Di Blog 100% Fast Load

Cara Membuat Sitemap Responsive - Sitemap merupakan sebuah peta situs atau daftar isi yang ada di blog yang berfungsi untuk memudahkan pengunjung blog anda. Dengan menciptakan sitemap keren di blog berarti anda sudah melaksanakan hal yang sangat membantu pengunjung. apalagi anda menciptakan sitemap responsive dan otomatis, pastinya blog terlihat profisional.

Saya rasa sudah banyak yang tahu apa itu sitemap atau peta situs. yupz sitemap ialah sebuah halaman yang menampilkan seluruh artikel yang pernah di posting menurut label. maka dari itu menciptakan peta situs sangatlah wajib dan sanggup mejadi salah satu hal wajib anda buat kalau ingin mendaftar google adsense.

bergotong-royong untuk anda pengguna platform blogspot sudah disediakan sajian untuk menciptakan sitemap di blog. Tapi tampilan sitemap bawaan blogger sangat tidak menarik dan sangat sederhana, maka dari itu banyak para blogger yang mencoba untuk menciptakan sitemap blog sesuai impian mereka..

yang tentunya sitemap tersebut yummy dilihat dan gampang di navigasi. dari beberapa blog yang aku kunjungi, bergotong-royong tampilan sitemap yang mereka buat terkesan umum dan sudah banyak yang memakai konsep menyerupai itu.

maka dari itu didalam artikel ini aku akan membagikan bagaimana cara menciptakan sitemap yang lebih keren. pastinya kalau anda memakai sitemap yang aku buat ini tidak menghipnotis kecepatan blog alasannya ini tergolong sangat ringan dan responsive...

Tidak lupa juga aku mengingatkan bahwa sajian sitemap ini wajib ada di dalam sebuah blog kalau ingin diterima google adsense. termasuk juga didalamnya menu About, Contact us, Disclaimer, dan Privacy

Menariknya, dengan membuat peta situs responsif ini pengunjung anda sanggup mencari artikel memakai kata kunci. alasannya didalam halaman sitemap disediakan juga kolom pencarian yang sanggup anda tulis menurut kata kunci yang di inginkan..

untuk lebih jelasnya anda sanggup melihat gambar pada artikel ini atau pribadi ke halaman sitemap yang sudah aku sediakan...

Baca : Tampilan sitemap fleksible menurut kategori
Baca : Cara memasang widget responsive di blog
Baca : Tempat hosting terbaik

Cara Membuat Sitemap Blog Responsive

menyerupai biasa kalau anda ingin menciptakan sitemap di platform blogspot, anda harus membuatnya di bab halaman. buat halaman gres menyerupai anda akan menciptakan postingan di blog...

untuk lebih terang dibawah ini aku akan jelaskan langkahnya step by step...

1. Pertama anda harus login dulu ke blogger.com
2. Lihat sajian samping kiri dan pilih halaman

3. Buat halaman gres dan masuk ke dalam mode HTML
4. Copy script di bawah ini dan pastekan ke dalam mode HTML tersebut

<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} } </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 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:"https://www.belajarmembuatwebsite.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=" Sitemap merupakan sebuah peta situs atau daftar isi yang ada di blog yang berfungsi untuk Fast Load: Cara Membuat Sitemap Di Blog 100% Fast Load"><a class="toc-title" href="'+ c+'" target="_blank" title="Fast Load: Cara Membuat Sitemap Di Blog 100% Fast Load">'+ 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> 

5. Jangan lupa untuk mengganti script code homePage:"https://www.belajarmembuatwebsite.com dengan url blog anda
6. Setelah itu posting dan tempelkan url halaman yang di buat tadi ke sajian sitemap yang ada di blog

Setelah semua tahap di atas selesai, jangan lupa untuk mencobanya. aku rasakan sendiri bahwa sitemap yang aku gunakan ini sangat ringan dan responsive..

menciptakan pengunjung lebih gampang mencari artikel menurut label, postingan terbaru, dan mencari mencari artikel memakai kata kunci. model sitemap menyerupai ini aku dapatkan dari blog Kompi Ajaib yang merupakan sebuah blog yang membahas ihwal desain tampilan website...

kalau berkenan silahkan berkunjung alasannya disana juga disediakan aneka macam macam template gratis hingga premium. hingga disini sekian dulu pembahasan aku mengenai cara menciptakan peta situs otomatis di blog yang supaya sanggup berhasil kalau diterapkan..

kalau ada pertanyaan yang fundamental mengenai cara menciptakan sitemap di blog silahkan koment saja di bawah yaa.

selamat mencoba dan happy blogging

Tweet

Subscribe to receive free email updates: