Cara membuat sitemap ( Daftar Isi ) blogger di halaman statis

 Membuat sitemap pada blogger sebenarnya sangat beragam. Salah satunya yaitu membuat sitemap di halaman statis. keuntungan dari membuat sitemap ini yaitu kita dapat memberikan lebih detail artikel apa saja yang ada di dalam blog kamu.


Gambar intro sitemap

Berikut ini adalah beberapa model sitemap blogger yang bisa teman-teman gunakan dan cara untuk memasang sitemap tersebut pada halaman statis blog kamu.

Membuat sitemap di halaman statis

Ada beberapa model sitemap yang bisa teman-teman gunakan, silahkan teman-teman pilih mana yang pas dengan kebutuhan teman-teman.

1. Sitemap dengan navigasi per abjad atau huruf.

Source kode ini saya dapatkan dari blog mbak igniel. Dalam versi ini ditambahkan berupa navigasi huruf yang bisa bergulir ke artikel yang memiliki awalan yang sama dengan huruf pada menu. Sitemap ini sangat cocok buat kalian yang memiliki blog dengan niche download, nonton film, e-book, mp3 dan video. Dan berikut ini langkah-langkah untuk membuat sitemap dengan navigasi per abjad atau huruf.

  1. Langkah pertama silahkan teman-teman buat sebuah halaman blog teman-teman.
  2. Kemudian silahkan copy script dibawah ini pada halaman tersebut pada mode HTML.
    
    <style>
    /* Blogger Sitemap Alphabetically with Letter Heading by igniel.com */
    #sitemap5 {font-size:14px; font-weight:400}
    #sitemap5 .judul {font-size:150%; background-color:#008c5f; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
    #sitemap5 a {color:#666; text-decoration:none; transition:all .3s ease;}
    #sitemap5 a:hover {color:#000;}
    #sitemap5 .isi .abjad {background-color:#2196f3; color:#fff; padding:10px 15px; font-size:110%; font-weight:600; text-transform:uppercase; position:relative;}
    #sitemap5 .isi .abjad #top:before {content:''; width:12px; height:calc(100% - 20px); position:absolute; right:0px; top:0px; padding:10px; cursor:pointer; background:rgba(0,0,0,.2) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat;}
    #sitemap5 ol, #sitemap5 ol li {list-style-type:none;}
    #sitemap5 .nav ol {margin:0px 0px 15px; padding:0px; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
    #sitemap5 .nav ol li {background-color:#444; color:#fff; padding:7px 0px; cursor:pointer; margin:0px 5px 5px 0px; text-align:center; text-transform:uppercase; width:40px;}
    #sitemap5 .nav ol li:last-child {margin-right:0px;}
    #sitemap5 .isi ol {margin:0px 0px 20px; padding:0px; border:1px solid #ccc; border-top:0px;}
    #sitemap5 .isi ol li {color:#666; margin:0px; padding:10px 15px; line-height:1.5em; -webkit-margin-start:0px !important;}
    #sitemap5 .isi ol li:nth-of-type(even) {background-color:#e9e9e9;}
    #sitemap5 .isi ol li:nth-of-type(odd) {background-color:#fff}
    @media screen and (max-width:480px) {
      #sitemap5 {font-size:13px;}
      #sitemap5 .judul {padding:10px;}
      #sitemap5 .isi .abjad {padding:7px 15px;}
    }
    @media screen and (max-width:360px) {
      #sitemap5 {font-size:12px;}
      #sitemap5 .judul {padding:10px;}
      #sitemap5 .isi .abjad {padding:7px 12px;}
      #sitemap5 .isi ol li {padding:7px 12px;}
    }
    </style>
    
    <div id="sitemap5">Loading....</div>
    <script> //<![CDATA[
    /* Blogger Sitemap Alphabetically with Letter Heading by igniel.com */
    var scroll  = 'smooth'; /* 'smooth' OR 'instant' */
    /*
    'smooth' for smooth scroll
    OR
    'instant' for quick scroll
    */
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('q a=["","\f\s\i\g\o\d","\s\i\c\b\d\c\W\e\c\x\c\k\d","\f\i\s","\u\J\c\c\h\f\u\o\j\f\d\f\u\f\r\x\x\b\i\G\1V\b\e\d\v\z\f\j\k\1n\s\b\e\e\N\b\s\1b\v\f\g\d\c\x\b\o\K\1n\f\d\b\i\d\Z\g\k\h\c\1o\v","\1n\x\b\1o\Z\i\c\f\r\e\d\f\v","\b\o\o\c\k\h\1J\E\g\e\h","\N\j\h\G","\f\g\d\c\x\b\o\K","\1H\c\d\W\e\c\x\c\k\d\1K\G\1F\h","\g\k\k\c\i\1X\1i\1Y\1k","\J\c\c\h","\e\c\k\1H\d\E","\c\k\d\i\G","\1Q\d","\d\g\d\e\c","\e\g\k\1b","\i\c\e","\b\e\d\c\i\k\b\d\c","\E\i\c\J","\o\r\f\E","\d\j\1k\j\1E\c\i\1J\b\f\c","\s\E\b\i\1x\d","\z\r\h\r\e","\g\k\h\c\1o\2d\J","\r\i\e","\f\j\i\d","\m\h\g\w\l\s\e\b\f\f\v\p\b\N\z\b\h\p\n\m\f\o\b\k\l\h\b\d\b\Z\w\b\e\r\c\v\p","\p\n","\m\u\f\o\b\k\n\m\f\o\b\k\l\g\h\v\p\d\j\o\p\l\d\g\d\e\c\v\p\1K\b\s\1b\l\d\j\l\1i\j\o\p\n\m\u\f\o\b\k\n\m\u\h\g\w\n\m\j\e\n","\m\e\g\n\m\b\l\E\i\c\J\v\p","\p\l\d\g\d\e\c\v\p","\m\u\b\n\m\u\e\g\n","\m\u\j\e\n","\m\e\g\n","\m\u\e\g\n","\m\h\g\w\l\s\e\b\f\f\v\p\z\r\h\r\e\p\n\1i\j\d\b\e\l\2h\j\f\d\2i\l","\m\u\h\g\w\n\m\h\g\w\l\s\e\b\f\f\v\p\k\b\w\p\n\m\j\e\n","\m\u\j\e\n\m\u\h\g\w\n\m\h\g\w\l\s\e\b\f\f\v\p\g\f\g\p\n","\m\u\h\g\w\n","\s\e\g\s\1b","\O\f\g\d\c\x\b\o\K\l\H\g\f\g\l\H\b\N\z\b\h\l\2j\h\b\d\b\Z\w\b\e\r\c\v\p","\p\2e","\f\d\b\i\d","\f\s\i\j\e\e\1F\k\d\j\2s\g\c\1E","\o\b\i\c\k\d\2t\j\h\c","\1w\r\c\i\G\1t\c\e\c\s\d\j\i","\b\h\h\W\w\c\k\d\1k\g\f\d\c\k\c\i","\J\j\i\W\b\s\E","\O\f\g\d\c\x\b\o\K\l\H\k\b\w\l\j\e\l\e\g","\1w\r\c\i\G\1t\c\e\c\s\d\j\i\1x\e\e","\O\f\g\d\c\x\b\o\K\l\H\k\b\w","\O\f\g\d\c\x\b\o\K\l\H\g\f\g\l\H\b\N\z\b\h\l\O\d\j\o"];q 1f=1,V=2c,1a=1l 1h(),Q=1l 1h(),1p=1l 1h(),1j=a[0],T=a[0],1q=a[0];B 1g(){q 1e=D[a[2]](a[1]);1e[a[3]]=a[4]+1f+a[5]+V;D[a[7]][a[6]](1e)}B 2f(1B){q Y=D[a[9]](a[8]);F(!Y){1L};Y[a[10]]=a[0];q S=1B[a[11]];F(S[a[13]][a[12]]>0){I(q U=0;U<S[a[13]][a[12]];U++){q P=S[a[13]][U];q 1d=P[a[15]][a[14]];I(q M=0;M<P[a[16]][a[12]];M++){F(P[a[16]][M][a[17]]==a[18]){q 1c=P[a[16]][M][a[19]];F(1c&&1c[a[12]]>0&&1d&&1d[a[12]]>0){1a[a[20]]({"\r\i\e":1c,"\z\r\h\r\e":1d})};2k}}};F(S[a[13]][a[12]]>=V){1f+=V;1g()}1I{I(q t=1a,A=0;A<t[a[12]];A++){q R=t[A][a[23]][a[22]](0)[a[21]]();F(1j[a[24]](R)==-1){1j+=R;Q[R]=[{2l:t[A][a[25]],2m:t[A][a[23]]}]}1I{Q[R][a[20]]({"\r\i\e":t[A][a[25]],"\z\r\h\r\e":t[A][a[23]]})}};I(q y 1O Q){1p[a[20]](y)};q t=1p[a[26]]();I(q C=0;C<t[a[12]];C++){T+=a[27]+t[C]+a[28]+t[C]+a[29];I(q L=0,1m=Q[t[C]];L<1m[a[12]];L++){q X=1m[a[26]](B(y,t){1L y[a[23]]>t[a[23]]?1:-1});T+=a[1W]+X[L][a[25]]+a[1U]+X[L][a[23]]+a[28]+X[L][a[23]]+a[2u]};T+=a[2o];1q+=a[2n]+t[C]+a[2r]};Y[a[10]]=a[2g]+1a[a[12]]+a[2p]+1q+a[1Z]+T+a[1R];1A()}}}B 1A(){D[a[1D]](a[1P])[a[1y]](B(y){y[a[1s]](a[1u],B(){q t=a[1S]+1N[a[10]]+a[2b];D[a[1r]](t)[a[1T]][a[1z]]({1C:1v,1G:a[1M]})})});D[a[1D]](a[2a])[a[1y]](B(y){y[a[1s]](a[1u],B(){D[a[1r]](a[2q])[a[1z]]({1C:1v,1G:a[1M]})})})}1g()',62,155,'||||||||||_0x764c|x61|x65|x74|x6C|x73|x69|x64|x72|x6F|x6E|x20|x3C|x3E|x70|x22|var|x75|x63|_0xd28cx14|x2F|x3D|x76|x6D|_0xd28cx17|x6A|_0xd28cx15|function|_0xd28cx18|document|x68|if|x79|x2E|for|x66|x35|_0xd28cx19|_0xd28cx12|x62|x23|_0xd28cx10|grup|_0xd28cx16|_0xd28cxe|print|_0xd28cxf|max|x45|_0xd28cx1b|_0xd28cxd|x2D|||||||||||sitemap5Arr|x6B|_0xd28cx13|_0xd28cx11|_0xd28cxa|start|runSitemap5|Array|x54|abjad|x4C|new|_0xd28cx1a|x26|x78|key|nav|46|47|x53|40|scroll|x71|x41|48|44|scrollSitemap5|_0xd28cxc|behavior|50|x77|x49|block|x67|else|x43|x42|return|43|this|in|49|x24|39|41|45|31|x3F|30|x48|x4D|38|||||||||||52|42|150|x4F|x5D|sitemap5|36|x50|x3A|x5B|break|url|judul|34|33|37|51|35|x56|x4E|32'.split('|'),0,{}));
    //]]> </script>
    
  3. kemudian save.

var scroll adalah jenis gulir. jenis gulir 'smooth' memiliki efek animasi halaman gulir menjadi halus ( smooth scroll ). slain itu kamu bisa menggunakan jenis gulir 'instant' untuk jenis gulir halaman yang langsung ke tempat tujuan. Untuk blog yang memiliki ratusan artikel usahakan menggunakan efek 'instant'  agar proses gulir tidak memakan waktu yang lama.

 Untuk Demo dari sitemap ini silahkan lihat disini :  Demo On Codepen

2. Sitemap hanya judul saja.

Jenis sitemap yang kedua ini juga sama saya dapatkan dari blog mbak igniel. yang berbeda dari sitemap diatas yaitu sitemap ini sangat fast loading karna hanya menampilkan judul saja. Untuk pemasanganya juga tidak jauh berbeda berikut ini langkah-langkah membuat sitemap hanya judul saja.


  1. Silahkan buat halaman baru pada blog teman-teman.
  2. kemudian masukan script dibawah ini tepat di halaman yang telah dibuat teman-teman dalam mode html
    
    <style>
    /* Blogger Sitemap Simple Title Only */
    #sitemap3 .judul {font-size:150%; background-color:#008c5f; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
    #sitemap3 a {color:#666; text-decoration:none; transition:all .3s ease;}
    #sitemap3 a:hover {color:#000;}
    #sitemap3 ol {margin:0px; padding:0px;}
    #sitemap3 ol li {color:#666; font-weight:400; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}
    </style>
    <div id="sitemap3">Loading....</div>
    <script> //<![CDATA[
    /* Blogger Sitemap Simple Title Only */
    var start=1;var max=150;var sitemap3Arr=new Array();function runSitemap3(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap3&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap3(root){var elem=document.getElementById('sitemap3');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemap3Arr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runSitemap3()} else{var print='';for(var x=0;x<sitemap3Arr.length;x++){print+='<li><a href="'+sitemap3Arr[x].url+'" title="'+sitemap3Arr[x].judul+'">'+sitemap3Arr[x].judul+'</a></li>'}
    elem.innerHTML='<div class="judul">Total Post: '+sitemap3Arr.length+'</div><ol>'+print+'</ol>'}}} runSitemap3();
    //]]> </script>
    
  3. kemudian save.

Berikut ini hasil dari script diatas : Demo On Codepen

Itulah cara untuk membuat sitemap ( Daftar isi ) blogger pada halaman statis. Jika ada pertanyaan tentang artikel ini, silahkan teman-teman kirim pada kolom komentar.