Cara Membuat Daftar Isi Responsive di Blog

Salah satu keterbatasan yang tidak dimiliki oleh sebuah blog yakni tidak menyertakanya sebuah navigasi daftar isi atau sitemap guna mempermudah seorang pengunjung mencari gosip konten artikel yang dicari.

Selain itu dengan menambahkan sitemap di Blogger akan mempermudah mesin index Google untuk merayapi semua artikel dan gosip yang telah dipublikasikan dan secara tidak pribadi meningkatkan meningkatkan secara optimal penelusuran atau SEO. Hal ini tentu menambah nilai point plus sendiri untuk sebuah situs blog dan dalam pandangan Google.

Di bawah ini yakni pola daftar isi simple, responsive dan fast loading untuk blogger dengan menampilkan semua daftar indeks posting berdasarkan kategory atau label.
Nah, buat teman yang masih pemula menyerupai saya, mungkin tertarik untuk menambahkan sitemap ke dalam blogger kesayangan, silahkan simak tutorialnya di bawah ini.

Cara Menambahkan Sitemap atau Daftar Isi di Blogger

1. Masuk ke Dashboard Blogger
2. Pilih Pages. kemudian klik New Pages.

Rekomendasi

3. Buatlah judul Pages, misalnya "Daftar Isi"

4. Pada halaman gres pilih mode HTML lalu copy dan paste aba-aba di bawah ini.

<style type='text/css'>  #show-cat {float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px;margin:20px 2% 20px 0}  #show-cat ul {margin:0;border-top:1px solid #ccc;padding:0}  #show-cat ul li {list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0}  #show-cat ul li a{display:block;padding:10px}  #show-cat ul li a, #navi-cat a{background:#fff;color:#555;text-decoration:none}  #show-cat ul li a, #navi-cat a, #navi-cat span{font-size:13px}  #show-cat ul li a:hover, #navi-cat a:hover{background:#666;color:#fff}  #show-post{float:left;width:60%}  #show-post ul li{list-style-type:none;padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.1);font-size:14px;margin:0 0 0 -25px}  #navi-cat{padding:20px 0}  #navi-cat a{margin-right:10px;border:1px solid #ccc}  #navi-cat a, #navi-cat span{padding:5px 10px}  #navi-cat span{float:right}  #show-cat::-webkit-scrollbar{widht:8px;height:8px}  #show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);}  #show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}  #show-cat::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}  @media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}  @media screen and (max-width:480px){#show-cat{100%;margin:20px 0}#show-post{width:100%}}  </style>  <div id='show-cat'></div>  <div id='show-post'>  <script type='text/javascript'>  var cat_home='https://nubietheme.blogspot.com';cat_numb=12;cat_pre='Prev';cat_nex='Next';  var cat_name;var cat_start;var cat_class;  function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="Cara Membuat Daftar Isi Responsive di Blog">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="Cara Membuat Daftar Isi Responsive di Blog">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="Cara Membuat Daftar Isi Responsive di Blog">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="Cara Membuat Daftar Isi Responsive di Blog">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');</script>  </div>

5. Ganti url yang di block warna biru dengan url blog sobat

6. Simpan Template

7. Terakhir, Menghubungkan halaman yang gres di buat dengan navigasi blog, caranya buka menu Template pilih Edit HTML kemudian buat menu gres dengan nama daftar isi/sitemap. Jika sudah, masukan link page yang gres dibuat tadi kemudian Simpan template, selesai.