Membuat Daftar Isi Otomatis di Blog: Tutorial Lengkap untuk Pemula
Artikel ini membahas panduan lengkap membuat Daftar isi secara otomatis di blog di khususkan untuk anda yang ingin memasang Daftar isi dengan tampilan yang enak di akses dan di baca pengunjung. Membuat daftar isi otomatis di blog adalah salah satu cara paling simpel tapi powerful untuk meningkatkan SEO dan kenyamanan pembaca. Dengan adanya daftar isi, pengunjung bisa langsung loncat ke bagian yang mereka butuhkan tanpa harus scroll panjang ke bawah.
Di tutorial ini, kita bahas dari nol sampai jadi. Cocok cara membuat daftar isi.mungkin cocok buat pemula, apalagi kalau yang pakai Blogspot. Santai aja, bahasanya nggak ribet kok 😄
Catatan: Daftar isi otomatis ini biasanya muncul berdasarkan heading (H2, H3). Jadi pastikan di halaman yang mau digunakan menampilkan daftar isinya harus ada tag h2/h3 untuk judulnya contoh: <h2>Daftar Isi Blog</h2> atau <h3>Sitemap Blog</h3>. penting untuk identitas halaman dan pengoptimalan SEO.
Apa Itu Daftar Isi Otomatis di Blog?
Sebelum ke bahasan Pokok, saya sedikit ingin menjelaskan tentang apa itu daftar isi otomatis. Dari beberapa sumber yang saya baca, Daftar isi otomatis adalah fitur yang menampilkan list judul atau subjudul (isi dari semua artikel/halaman postingan dari sebuah blog atau website kita secara otomatis. Biasanya ditampilkan pada satu tempat, entah itu di halaman postingan, bisa di halaman statis, atau di widget blog. dengan tujuan:
- Membantu navigasi pembaca
- Meningkatkan user experience
- membuat artikel terlihat lebih profesional dan gampang ditemukan
- Disukai juga mesin pencari seperti om google.
Kenapa Daftar Isi Penting untuk SEO?
Walaupun terlihat sederhana, daftar isi punya dampak besar ke SEO. Google suka konten yang rapi dan mudah dipahami, dan tentunya peluang terindex lebih besar dengan di rampilkan list judul postingan di halaman daftar isi tersebut.
Dengann adanya fitur daftar isi ini
- Struktur artikel jadi jelas
- Durasi baca pengunjung lebih lama
- Menurunkan bounce rate
- Potensi muncul di featured snippet
Perhatian: Jangan terlalu banyak heading yang tidak perlu. Tetap buat struktur yang natural saja, jangan dipaksakan demi SEO.
Persiapan Sebelum Membuat Daftar Isi
Sebelum masuk ke script, ada beberapa hal yang harus ita siapkan:
- Gunakan heading H2 untuk judul utama bagian atas list
- Gunakan H3 untuk sub bagian
- Pastikan struktur artikel rapih
Berikut ini Cara Memasang Daftar isi otomatis / Script Daftar isi otomatis di Blogspot
Seperti bahasan sebelumnya, Ada beberapa cara untuk memasang sebuah Tool atau script di Blogspot. Seperti pada artikel :
Setiap lokasi pemasangan memiliki fungsi dan karakteristik yang berbeda,
sehingga penting untuk mengetahui tempat mana yang paling sesuai untuk kebutuhan Anda.
1. Memasang di Halaman Postingan (Artikel)
Cara ini cocok jika Daftar isi ingin muncul hanya pada satu artikel tertentu.
Langkah-langkah:
- Login terlebih dahulu ke https://www.blogger.com menggunakan email Anda.
- Pilih Buat Postingan Baru atau tekan tombol (+).
- Pada editor postingan, ubah mode ke HTML (bukan Compose).
- Salin dan tempel kode script yang sudah saya sediakan di bawah artikel ini ke dalam kotak editor postingan HTML anda.
Setelah itu, tambahkan Daftar isi otomatis, label, gambar, dan deskripsi sesuai kebutuhan.
Klik Publikasikan untuk menyimpan postingan.
2. Memasang di Halaman Statis
Ini penting Halaman statis sepertinya cocok untuk menampilkan List Sitemap blog kita, karena halaman statis ini biasanya dipakai untuk konten permanen seperti:
tool generator, halaman privacy policy, halaman kontak, atau aplikasi mini & Daftar isi..
Pemasangan script di halaman statis membuat Daftar isi lebih rapi dan mudah diakses.
Langkah-langkah:
- Buka Blogger dan masuk ke dashboard.
- Pada menu kiri, pilih Halaman → + Halaman Baru.
- Ubah mode editor ke HTML agar script dapat berjalan.
- Tempelkan script Anda ke dalam kolom HTML.
- Beri Judul halaman, misalnya: Daftar isi blog.
- Klik Publikasikan.
Kelebihan menaruh script di halaman statis adalah tampilannya lebih bersih,
URL halaman tetap, dan tidak bercampur dengan konten blog lainnya.
3. Memasang di Template
Cara ini digunakan jika Anda ingin script tampil di semua halaman blog,
biasanya script yang di tempel di template itu misalnya script:
- popup otomatis
- script SEO
- script efek animasi background
- script anti-copy, script tombol mengambang, dll
Tapi tidak ada salahnya juga jika anda mau memasang script daftar isi ini di dalam template
Langkah-langkah:
- Buka Blogger → Tema/theme.
- Klik tombol Edit HTML.
- Untuk script JS, letakkan diatas kode
</body> agar loading lebih cepat.
- Untuk script CSS, letakkan sebelum
</head>. pada area style atau skin
- setelah itu Simpan template.
Menaruh script di Template memberikan kontrol penuh, tetapi harus berhati-hati
karena salah penempatan bisa menyebabkan error pada tampilan blog.
4. Memasang di Widget HTML / Gadget HTML
Ini adalah cara paling mudah dan aman, cocok untuk script yang ingin tampil
pada area sidebar, footer, atau bagian tertentu.
Langkah-langkah:
- Buka Blogger → Tata Letak.
- Pilih lokasi widget (Sidebar, Footer, Header).
- Klik Tambah Gadget.
- Pilih HTML/JavaScript.
- Tempelkan script Anda di kolom yang muncul.
- Simpan.
Biasanya fitur Widget HTML ini idealnya untuk script kecil seperti:
- tombol klik
- counter visitor
- iklan
- tool sederhana
- shortcode
Namun ada bagusnya juga list daftar isi di tampilkan disini.
Script Daftar Isi Otomatis
Berikut ini saya sediakan 3 script daftar isi sekaligus tentunya dengan fungsi yang sama tapi tampilan berbeda, anda bisa memilih mana saja yang anda suka.
📌 Daftar isi sederhana
<h1 style="text-align:center;">📂 Sitemap Blog</h1>
<p style="text-align:center;opacity:0.7;">
Temukan semua halaman dan artikel di blog ini dengan mudah.
</p>
<!-- Search -->
<input type="text" id="searchBox" placeholder="Cari halaman..."
style="width:100%;padding:12px;border-radius:10px;border:1px solid #ddd;margin:20px 0;font-size:14px;">
<!-- Container -->
<div id="sitemapContainer"></div>
<style>
#sitemapContainer {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
gap:15px;
}
.sitemap-card {
background:#fff;
border-radius:15px;
padding:15px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
transition:0.3s;
}
.sitemap-card:hover {
transform:translateY(-5px);
box-shadow:0 8px 20px rgba(0,0,0,0.1);
}
.sitemap-card a {
text-decoration:none;
color:#333;
font-weight:600;
display:block;
}
.sitemap-card span {
display:block;
font-size:12px;
opacity:0.6;
margin-top:5px;
}
</style>
<script>
const feedUrl = "/feeds/posts/default?alt=json&max-results=200";
fetch(feedUrl)
.then(res => res.json())
.then(data => {
const entries = data.feed.entry;
const container = document.getElementById("sitemapContainer");
let html = "";
entries.forEach(post => {
const title = post.title.$t;
const link = post.link.find(l => l.rel === "alternate").href;
const date = post.published.$t.split("T")[0];
html += `
<div class="sitemap-card">
<a href="${link}" target="_blank">${title}</a>
<span>📅 ${date}</span>
</div>
`;
});
container.innerHTML = html;
// Search filter
document.getElementById("searchBox").addEventListener("keyup", function(){
let filter = this.value.toLowerCase();
let cards = document.querySelectorAll(".sitemap-card");
cards.forEach(card => {
let text = card.innerText.toLowerCase();
card.style.display = text.includes(filter) ? "" : "none";
});
});
})
.catch(err => {
document.getElementById("sitemapContainer").innerHTML = "Gagal memuat sitemap.";
});
</script>
Safelink-aza
📌 Daftar isi slider
<div id="blog-slider" class="blog-slider">
<div class="slider-wrapper"></div>
<button class="arrow left">◀</button>
<button class="arrow right">▶</button>
</div>
<style>
/* Slider Container */
.blog-slider {
position: relative;
max-width: 100%;
overflow: hidden;
}
.slider-wrapper {
display: flex;
transition: transform 0.3s ease-in-out;
}
.blog-item {
flex: 0 0 100%;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.thumbnail {
position: relative;
}
.thumbnail img {
width: 100%;
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s;
}
.thumbnail:hover img {
transform: scale(1.05);
}
.thumbnail .label {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 5px;
font-size: 12px;
border-radius: 3px;
}
.title {
margin: 10px 0;
font-size: 18px;
font-weight: bold;
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.7);
color: #fff;
border: none;
font-size: 20px;
padding: 10px;
cursor: pointer;
z-index: 10;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.arrow:hover {
background: #000;
}
</style>
<script>
// Konfigurasi URL Feed Blog
const blogUrl = window.location.origin;
const feedUrl = `${blogUrl}/feeds/posts/summary?alt=json&max-results=10`;
// Ambil Data Postingan
fetch(feedUrl)
.then(response => response.json())
.then(data => {
const posts = data.feed.entry;
const sliderWrapper = document.querySelector('.slider-wrapper');
posts.forEach(post => {
const title = post.title.$t;
const link = post.link.find(l => l.rel === "alternate").href;
const thumbnail = post.media$thumbnail ? post.media$thumbnail.url : "https://via.placeholder.com/150";
const label = post.category ? post.category[0].term : "Uncategorized";
sliderWrapper.innerHTML += `
<div class="blog-item">
<div class="thumbnail">
<img src="${thumbnail}" alt="${title}" class="image">
<div class="label">${label}</div>
</div>
<h2 class="title"><a href="${link}">${title}</a></h2>
</div>
`;
});
});
// Slider Functionality
let index = 0;
document.querySelector('.arrow.left').addEventListener('click', () => {
const items = document.querySelectorAll('.blog-item');
index = (index > 0) ? index - 1 : items.length - 1;
document.querySelector('.slider-wrapper').style.transform = `translateX(-${index * 100}%)`;
});
document.querySelector('.arrow.right').addEventListener('click', () => {
const items = document.querySelectorAll('.blog-item');
index = (index < items.length - 1) ? index + 1 : 0;
document.querySelector('.slider-wrapper').style.transform = `translateX(-${index * 100}%)`;
});
</script>
Safelink-aza
📌 Daftar isi lengkap
<meta content='width=device-width, initial-scale=1' name='viewport'>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,300i,500,700,500i,900' rel='stylesheet' type='text/css'/>
<style type='text/css'>
body{font-family:'Open Sans',sans-serif;background: #fff;}
*{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
#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!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#table-outer select option{min-height:1.4em!important;}
#table-outer input#feed-q{padding:5px 10px!important;}
#feed-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;height:400px;overflow-x: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!important}
#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 (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}
}
@media screen and (max-width:414px){#table-outer table,#feed-container li{width:100%;}
#table-outer table,#table-outer label{text-align:center}
#table-outer table td{display:block;margin:0 auto 5px;clear:both;float:none}
#table-outer label{margin:0;}
#table-outer{padding:0;}
}
</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" 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>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
</script>
<script type='text/javaScript'>
document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={homePage:"https://safelink-aza.blogspot.com",maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya ▼",resetToc:"Kembali ke Awal",noImage:"//2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1100/no-thumbnail.png",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>“'+ 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(/.*?:\/\//g , "//").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="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank" title="'+ b+'">'+ b+'</a><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).replace(/%20/g, " ")+'">'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'</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>
<br>
<p> Ganti ;https://safelink-aza.blogspot.com dengan url blog anda</p>
Safelink-aza
Ganti ;https://safelink-aza.blogspot.comdengan url blog anda
Kesalahan Umum yang Harus Dihindari
- Menaruh script di tempat yang salah
- Artikel terlalu pendek
- Struktur berantakan
FAQ (Pertanyaan Umum)
Apakah daftar isi wajib di blog?
Nggak wajib, tapi sangat disarankan terutama untuk artikel panjang.
Apakah daftar isi berpengaruh ke ranking?
Tidak langsung, tapi sangat membantu SEO biasanya google bisa mengindex url blog kita dari sisi struktur dan pengalaman pengguna.
Apakah bisa digunakan di semua template Blogspot?
Ya, selama template mendukung JavaScript standar.
Apakah bisa dibuat otomatis tanpa script?
Secara default tidak, jadi tetap perlu script seperti di atas.
Penutup
Sekarang anda sudah tahu cara membuat daftar isi otomatis di blog dengan mudah. Nggak perlu skill coding tinggi, cukup copy paste dan sedikit penyesuaian.
Coba langsung praktek di blog, dijamin artikel jadi lebih rapi dan enak dibaca. Kalau mau upgrade lagi, anda bisa kembangkan jadi versi collapsible atau floating 🔥
Kalau masih bingung atau mau versi lebih keren, mari kia diskusikan di kolom komentar. Kita oprek bareng 😎
, SSSTik)
dll
