Cara Membuat Daftar Isi Sitemap di Blog yang Keren dan Mudah

Cara Membuat Daftar Isi Sitemap di Blog yang Keren dan Mudah

oleh

Daftar isi yang kita tahu ada di sebuah blog post, namun ada juga halaman daftar isi yang menyimpan berbagai macam daftar artikel yang ada di blog kita. Untuk itu pada artikel kali ini saya akan memberikan cara membuat daftar isi sitemap di blog WordPress dan Blogger, yang keren dan mudah untuk di pasang.

Halaman daftar isi ini berbeda dengan halaman sitemap.xml yang biasa di gunakan pada webmaster tools.

Karena halaman daftar isi ini bisa kita custom sendiri, dan desainnya pun macam-macam.

Halaman daftar isi atau sitemap ini juga di gunakan sebagai syarat untuk mendaftar menjadi publisher Google AdSense.

Saya sendiri selalu menggunakan halaman ini jika ingin mendaftar google AdSense.

Hal ini juga sudah saya bahas di artikel sebelumnya mengenai cara daftar Googgle AdSense.

Bagi kalian yang ingin langsung ke tutorial cara membuat halaman daftar isi/sitemap di blog WordPress, langsung saja klik link di bawah.

Cara Membuat Halaman Daftar Isi/Sitemap di Blogger

Seperti yang saya katakan sebelumnya, banyak sekali yang mendesain halaman daftar isi ini.

Jadi saya akan menunjutkan beberapa desain saja.

a. Halaman Daftar Isi/Sitemap untuk VioMagz, VioToko, dan LinkMagz

Sebenarnya script ini milik Taufik Nurrohman, tetapi sangat cocok di gunakan pada template VioMagz, VioToko, dan LinkMagz.

Jadi sangat di rekomendasikan bagi kalian menggunakan template dari Mas Sugeng tersebut.

Beli Sekarang

Bagi kalian yang ingin memasang daftar isi, silahkan ikuti langkah-langkah berikut ini:

  1. Langkah pertama, masuk ke dashboard Blogger.
  2. Kemudian pilih menu Halaman.
  3. Klik tombol Halaman Baru.
  4. Buat judul halaman menjadi Sitemap.
  5. Klik tab HTML, kemudian masukan kode berikut ini.
    <div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC={blogUrl:"https://www.domain.com/",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <em style="color:red;">New!</em>'};
!function(a,b){var c=(new Date).getTime(),d={blogUrl:"http://dte-feed.blogspot.com",containerId:"tabbed-toc",activeTab:1,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:!1,newText:' &ndash; <em style="color:red;">Baru!</em>'};if("undefined"==typeof tabbedTOC)tabbedTOC=d;else for(var e in d)d[e]="undefined"!=typeof tabbedTOC[e]?tabbedTOC[e]:d[e];a["clickTabs_"+c]=function(a){for(var b=document.getElementById(d.containerId),c=b.getElementsByTagName("ol"),e=b.getElementsByTagName("ul")[0],f=e.getElementsByTagName("a"),g=0,h=c.length;h>g;++g)c[g].style.display="none",c[parseInt(a,10)].style.display="block";for(var i=0,j=f.length;j>i;++i)f[i].className="",f[parseInt(a,10)].className="active-tab"},a["showTabs_"+c]=function(e){for(var f=parseInt(e.feed.openSearch$totalResults.$t,10),g=d,h=e.feed.entry,i=e.feed.category,j="",l=0;l<(g.showNew===!0?5:g.showNew)&&l!==h.length;++l)h[l].title.$t=h[l].title.$t+(g.showNew!==!1?g.newText:"");h=g.sortAlphabetically?h.sort(function(a,b){return a.title.$t.localeCompare(b.title.$t)}):h,i=g.sortAlphabetically?i.sort(function(a,b){return a.term.localeCompare(b.term)}):i,j='<span class="toc-line"></span><ul class="toc-tabs">';for(var m=0,n=i.length;n>m;++m)j+='
<li class="toc-tab-item-'+m+'"><a onclick="clickTabs_'+c+"("+m+');return false;" onmousedown="return false;" href="javascript:;">'+i[m].term+"</a></li>
";j+="</ul>
",j+='<div class="toc-content">
';for(var o=0,n=i.length;n>o;++o){j+='<ol class="panel" data-category="'+i[o].term+'"',j+=o!=g.activeTab-1?' style="display:none;"':"",j+=">";for(var p=0;f>p&&p!==h.length;++p){for(var q,r=h[p],s=r.published.$t,t=g.monthNames,u=r.title.$t,v=("summary"in r&&g.showSummaries===!0?r.summary.$t.replace(/<br */?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,g.numChars)+"&hellip;":""),w=("media$thumbnail"in r&&g.showThumbnails===!0?'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+r.media$thumbnail.url.replace(//sd(-c)?//,"/s"+g.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+g.noThumb.replace(//sd(-c)?//,"/s"+g.thumbSize+"-c/")+'"/>'),x=r.category||[],y=g.showDates?'<time datetime="'+s+'" title="'+s+'">'+s.substring(8,10)+" "+t[parseInt(s.substring(5,7),10)-1]+" "+s.substring(0,4)+"</time>":"",z=0,A=r.link.length;A>z;++z)if("alternate"===r.link[z].rel){q=r.link[z].href;break}for(var B=0,C=x.length;C>B;++B){var D=g.newTabLink?' target="_blank"':"";x[B].term===i[o].term&&(j+='
<li title="'+x[B].term+'"',j+=g.showSummaries?' class="bold"':"",j+='><a href="'+q+'"'+D+">"+u+y+"</a>",j+=g.showSummaries?'<span class="summary">'+w+v+'<span style="display:block;clear:both;"></span></span>':"",j+="</li>
")}}j+="</ol>
"}j+="</div>
",j+='<div style="clear:both;">
</div>
',b.getElementById(g.containerId).innerHTML=j,a["clickTabs_"+c](g.activeTab-1)};var f=b.getElementsByTagName("head")[0],g=b.createElement("script");g.src=d.blogUrl.replace(//+$|[?&#].*$/g,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+d.maxResults+"&orderby=published&callback=showTabs_"+c,"onload"!==d.preload?a.setTimeout(function(){f.appendChild(g)},d.preload):a.onload=function(){f.appendChild(g)}}(window,document);</script>
  6. Ganti https://www.domain.com/ dengan domain kalian.
  7. Klik menu Pilihan, silahkan setting seperti di gambar » kemudian klik Selesai.
  8. Jika sudah semua, klik Publikasikan.Cara Membuat Daftar Isi Blog Di Halaman Blog

Jika sudah jadi, maka tampilannya akan seperti ini.Cara Mudah Membuat Sitemap di Blogger

b. Halaman Daftar Isi/Sitemap by Arlina Design

  1. Langkah pertama, masuk ke dashboard Blogger.
  2. Kemudian pilih menu Halaman.
  3. Klik tombol Halaman Baru.
  4. Buat judul halaman menjadi Sitemap.
  5. Klik tab HTML, kemudian masukan kode berikut ini.
    <div id="bp_toc">
</div>
<script src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>
  6. Klik menu Pilihan, silahkan setting seperti di gambar » kemudian klik Selesai.
  7. Jika sudah semua, klik Publikasikan.Cara Membuat Daftar Isi Blog Di Halaman Blog
  8. Masuk ke menu Tema » klik icon titik tiga » pilih Edit HTML.
  9. Cari kode </style> atau /style dengan tekan Ctrl + F pada keyboard.
  10. Masukan kode di bawah ini sebelum kode </style>.
    /* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
  11. Jika sudah, klik tombol 💾 Simpan tema.

Jika sudah jadi, tampilannya akan seperti ini.Cara Membuat Sitemap SEO Keren di Blogspot

Sumber: https://www.arlinadzgn.com/2015/03/cara-menambahkan-widget-sitemap-di-blog.html

c. Halaman Daftar Isi/Sitemap by dte.web.id

  1. Langkah pertama, masuk ke dashboard Blogger.
  2. Kemudian pilih menu Halaman.
  3. Klik tombol Halaman Baru.
  4. Buat judul halaman menjadi Sitemap.
  5. Klik tab HTML, kemudian masukan kode berikut ini.
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/tovic/dte-project/0ef9de902cf286a77272f9b3c6f8168c17ab61c6/accordion-toc-skin.css"/>
<div id="table-of-content" class="table-of-content"><span class="loading">Memuat...</span></div>
<div class="credit-link"><a href="//www.dte.web.id/2011/11/widget-daftar-isi-akordion-dengan.html" title="Accordion TOC by Taufik Nurrohman">&#9654; Accordion TOC</a></div>
<script>
var toc_config = {
    url: 'https://www.domain.com',
    containerId: 'table-of-content',
    monthNames: [
        'Januari',
        'Februari',
        'Maret',
        'April',
        'Mei',
        'Juni',
        'Juli',
        'Agustus',
        'September',
        'Oktober',
        'November',
        'Desember'
    ],
    oldestFirst: false,
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="//cdn.rawgit.com/tovic/dte-project/0ef9de902cf286a77272f9b3c6f8168c17ab61c6/accordion-toc-2.js"></script>
  6. Ganti https://www.domain.com/ dengan domain kalian.
  7. Klik menu Pilihan, silahkan setting seperti di gambar » kemudian klik Selesai.
  8. Jika sudah semua, klik Publikasikan.Cara Membuat Daftar Isi Blog Di Halaman Blog

Jika berhasil, maka tampilannya akan seperti ini.Cara Buat Sitemap di Blogger (Blogspot)

Sumber: https://www.dte.web.id/2011/11/widget-daftar-isi-akordion-dengan.html

Cara Membuat Halaman Daftar Isi/Sitemap di Blog WordPress

  1. Langkah pertama masuk ke dashboard WordPress kalian.
  2. Geser kursor ke menu Plugin, kemudian klik Tambah Baru.
  3. Cari plugin Simple Yearly Archive di kolom pencarian.
  4. Jika sudah ketemu, klik Pasang Sekarang » Aktifkan.
  5. Geser kursor ke menu Pengaturan, kemudian pilih Simple Yearly Archive.
  6. Silahkan kalian atur tampilannya sesuai keinginan kalian.
  7. Jika sudah selesai, klik Update Options ».
  8. Langsung saja kalian geser kursor ke menu Laman, kemudian pilih Tambah Baru.
  9. Masukan judul halaman kalian.
  10. Kemudian masukan kode berikut ini.
    [SimpleYearlyArchive]
  11. Jika sudah, klik Terbitkan.Cara Mudah Membuat Halaman Daftar Isi Pada Blog WordPress

Kurang lebih tampilannya seperti ini.Hasil Telusur Hasil web Cara Membuat Halaman Daftar Isi di Blog

Di sini saya hanya menggunakan tampilan default saja, tidak menambah pengaturan apapun kecuali tanggal.

Penutup

Demikian artikel dari saya mengenai cara membuat daftar isi atau sitemap di blog WordPress dan juga Blogger.

Jika ada pertanyaan, kritik, dan saran.

Silahkan masukan ke dalam kolom komentar.

Jika ada typo dalam artikel ini, mohon beritahu admin.

Jangan lupa share artikel ini agar bermanfaat untuk orang lain.