Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Tutorial Blog

Cara Membuat Table Of Content (TOC) Otomatis di Blogger Terbaru

Oleh massiswo Posting Komentar
Di artikel kali ini saya akan membagikan cara membuat tabel of content (TOC) di blogger secara otomatis dan semi otomatis.


Cara Membuat Table Of Content (TOC) Otomatis di Blogger
Cara Membuat Table Of Content (TOC) Otomatis di Blogger

Kenapa otomatis dan semi otomatis, silahkan simak ulasan lengkapnya pada artikel dibawah ini.

Pengertian Table Of Content (TOC) blog ?

Table Of Content adalah daftar isi pada artikel atau postingan pada blog, dimana itu merupakan ringkasan point-point utama dalam sebuah artikel blog. Table Of Content (TOC) sering dijumpai di situs wikipedia.

Kegunaan Table Of Content pada postingan blog

Secara umum lebih memudahkan pengunjung untuk mencari tahu point penting dari jawaban yang ada di artikel sehingga tidak harus membaca semua postingan secara menyeluruh.

Dari segi mesin pencarian tentu akan ada tampilan jump link yang ditampilkan di mesin pencari seperti google contohnya seperti pada gambar dibawah ini.

Kegunaan Table Of Content pada postingan blog
Kegunaan Table Of Content pada postingan blog

Dari tampilan diatas, tentu hasil pencarian seperti diatas akan lebih menarik pengunjung untuk membaca artikel blog anda. Karena ada point-point penting yang di tampilkan.

Sebenarnya ada 3 (tiga) cara membuat Tabel Of Content (TOC) yaitu secara manual, secara otomatis dan semi otomatis.

Dari ketiga cara diatas tentu mempunyai perbedaan masing-masing dari segi loading kecepatan membuka halaman blog, cara manual paling bagus karena tidak ada kode CSS atau Script yang memberatkan.

Kalau dari segi efesien cara otomatis dan semi otomatis lebih simple tanpa harus menandai bagian-bagian point penting pada artikel seperti yang dilakukan cara manual.

Untuk membuat Table Of Content (TOC) secara manual saya telah membuat tutorialnya pada halaman dibawah ini.

Baca : Cara membuat tabel of content (TOC) di blog secara manual


Cara Membuat (TOC) Table Of Content Otomatis di Blogger

Table Of Content (TOC) Otomatis di Blogger
Table Of Content (TOC) Otomatis di Blogger 

Untuk membuat daftar isi atau table of content ini tingkat sulit tidaknya itu juga tergantung dari template blog yang anda gunakan.

Contohnya saya menggunakan template viomagz ini, template ini bawaannya tidak ada fitur TOC atau daftar isi otomatisnya atau manualnya. Sehingga harus membuat sendiri jika ingin ditampilkan.

Ada beberapa cara yang bisa anda pilih untuk membuat daftar isi atau tabel of content (TOC) di blog.

Berikut Cara Membuat table of content (TOC) otomatis di Blog
  1. Silahkan masuk dasboard blogger anda
  2. Lalu klik menu Tema dan pilih Edit HTML
  3. Backup dulu template anda sebelum mencoba langkah selanjutnya
  4. Copy semua kode dibawah ini dan letakkan diatas kode </head>
    <b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
/*
 * Blogspot TOC
*/
.bwstoc {
 margin: 10px 0;
 background: #F0F0F0;
 border: 1px solid #ddd;
}
.bwstoc ol, .bwstoc ul {
 margin: 0 0 15px 20px;
 padding: 0;
}
.bwstoc ul {
 list-style: disc;
}
.bwstoc ol li, .bwstoc ul li {
 font-size: 95%;
 padding: 5px 10px 0 0;
 margin: 0 0 0 30px;
}
.bwstoc a {
 text-decoration: none;
}
.bwstoc a:hover {
 text-decoration: underline;
}
.bwstoc .bwstocHeader {
 font-weight: bold;
 font-size: 100%;
 position: relative;
 outline: none;
 border: none;
 padding: 5px 15px 5px 5px;
 margin: 5px 10px;
}
.bwstoc .bwstocHeader a {
 text-decoration: none;
 cursor: pointer;
}
.bwstoc .bwstocHeader a:hover {
 text-decoration: underline;
}
</style>
<!-- Blogger TOC -->
<script type='text/javascript'>
/*
 * SEO Friendly Blogspot Table Of Contents
 * https://bibit.ws/toc-di-blogspot.php
*/
//<![CDATA[
function bwstoc() {
 var bwstoc = i = headinglength = getheading = 0;
 headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
 if (headinglength > 1) {
 // Hanya Tampil Jika Ditemukan Minimal 2 Heading
 for (i = 0; i < headinglength; i++) {
 getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
 var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
 var bws_2 = bws_1.trim();
 var getHeadUri = bws_2.replace(/\s/g, "_");
 document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
 bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
 document.getElementById("bwstoc").innerHTML += bwstoc;
 }
 } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function bwstocShow() {
    var bwstocBtn = document.getElementById('bwstoc');
 var bwstocWrapID = document.getElementById('bwstocwrap');
 var bwstocLink = document.getElementById('bwstocLink');
    if (bwstocBtn.style.display === 'none') {
        bwstocBtn.style.display = 'block';
 bwstocWrapID.style.display = 'block';
 bwstocLink.innerHTML = 'Tutup';
 
    } else {
        bwstocBtn.style.display = 'none';
 bwstocWrapID.style.display = 'inline-block';
 bwstocLink.innerHTML = 'Tampil';
    }
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>
  5. Setelah itu cari kode <data:post.body/>, biasanya banyak kode didalam template blog anda. Pilih salah satu hingga menemukan kode yang pas. Silahkan copy kode dibawah ini. Pilih salah satu ya.. jangan semua dipasang
    Kode 1 : Untuk kode Daftar isi yang tertutup gunakan kode dibawah ini.
    <div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div><ul id='bwstoc' style='display:none'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div><!-- end TOC -->

    Kode 2 : Untuk tampilan Daftar isi langsung terbuka gunakan kode dibawah ini. 
    <div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tutup</a>]</div><ul id='bwstoc' style='display:block'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div><!-- end TOC -->
  6. Kemudian simpan template anda. Jika berhasil disetiap postingan anda akan tampil daftar isi otomatis terpasang.
Kekurangannya pada cara diatas adalah setiap postingan anda akan ada tampilan daftar isi, dan saya kurang setuju dengan ini, Maka dari itu saya lebih memilih cara dibawah ini.


Cara Membuat (TOC) Table Of Content Semi Otomatis di Blog (Recommended)

Selain cara otomatis saya juga membagikan cara-cara membuat daftar isi postingan blog atau table of content secara semi otomatis. Artinya anda harus menuliskan sedikit kode pada postingan blog.

Kenapa kok semi otomatis?

Karena menerut saya, memang tidak semua postingan blog itu harus diberi daftar isi atau TOC. Apalagi kalo isi postingan itu sedikit.

Jadi pemilihan membuat tabel of content semi otomatis ini bisa menjadi pilihan.

Ada beberapa pilihan cara yang bisa anda gunakan. Silahkan pilih yang sesuai dan yang mudah untuk dipraktekkan.

Cara 1 : Membuat table of content semi otomatis di blogger

Membuat table of content (TOC) semi otomatis di blogger
Membuat table of content (TOC) semi otomatis di blogger

Cara pertama dapat anda lihat contohnya seperti pada gambar diatas, dimana pada contoh daftar isi atau TOC blogger ada kode pemanggil yang dibuat manual. berikut ini cara membuatnya :
  1. Silahkan masuk dasboard blogger
  2. Klik pada menu Tema lalu pilih Edit HTML
  3. Berikutnya silahkan backup dulu template anda
  4. Setelah terbackup template anda, copy kode dibawah ini letakkan diatas kode ]]</b:skin>
     .mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}           
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}           
.mbtTOC ul {list-style:none;}           
.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}           
.mbtTOC a{color:#0080ff;text-decoration:none;}        .mbtTOC a:hover{text-decoration:underline; }
.mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}           
.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}
  5. Berikutnya salin juga kode dibawah ini, dan letakkan diatas kode </head>
     <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>              
//<![CDATA[           
function mbtTOC() {var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++)           
{gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
//]]>              
</script>
  6. Jika sudah, langkah berikutnya cari dan ganti kode <data:post.body/> di template anda, biasanya lebih dari satu. Ganti salah satunya bisa yang pertama atau kedua dengan kode dibawah ini. 
     <div id="post-toc"><data:post.body/></div>
  7. Terakhir simpan template anda

Untuk menggunakannya pada postingan

Pastikan postingan atau artikel anda sudah ada sub judul atau subheading h2, h3 dan seterusnya. Untuk menerapkannya silahkan gunakan dengan cara dibawah ini :
  1. Pastikan anda selesai menulis artikel anda secara lengkap dengan dilengkapi subheading seperti diatas.
  2. Lalu klik pada mode HTML (Wajib pada mode tersebut)
  3. Salin dan paste kode dibawah ini dan letakkan di bawah paragraf pertama atau diatas paragraf pertama.
     <div class="mbtTOC"> 
    <button onclick="mbtToggle()">Contents</button> 
    <ol id="mbtTOC"></ol> 
    </div>
  4. Terakhir salin dan tempelkan juga kode dibawah ini letakkan di akhir postingan blog anda.
     <script>mbtTOC();</script>
  5. Terakhir publikasikan atau preview hasil postingan anda untuk melihat tampilan daftar isinya.

Cara 2 : Membuat table of content semi otomatis di blogger (Seperti Blog Ini)

Membuat table of content (TOC) semi otomatis di template viomagz
Membuat table of content (TOC) semi otomatis di template viomagz

Cara kedua ini untuk membuat table of content (TOC) atau daftar isi pada template viomagz versi terbaru. Dan menurut saya ini yang paling cocok dan mudah.

  1. Masuk dasboard blog anda
  2. Ke menu Tema dan Edit HTML lalu backup template anda terlebih dahulu
  3. Silahkan copy dan paste kode dibawah ini diatas kode </body>
     <!-- Toc Semi Otomatis -->
<script async='async' defer='defer'>
/* Made by massiswo.com */
var head,newLine,el,title,link,ToC=&quot;<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Daftar Isi :</h4><ul style='display:yes'>&quot;;$(&quot;.post-body h2, .post-body h3, .post-body h4&quot;).attr(&quot;id&quot;,function(arr){return &quot;point&quot; + arr;});$(&quot;.post-body h2,  .post-body h3, .post-body h4&quot;).each(function(){el=$(this),title=el.text(),link=&quot;#&quot;+el.attr(&quot;id&quot;),ToC+=newLine=&quot;<li><a href='&quot;+link+&quot;'>&quot;+title+&quot;</a></li>&quot;}),ToC+=&quot;</ul></nav>&quot;,$(&quot;.toc-pro&quot;).prepend(ToC);function toc() {$(&quot;.table-of-contents ul&quot;).toggle();}
</script>
  4. Lalu copy juga kode dibawah dan pastekan diatas kode ]]></b:skin> 
     /* TOC Semi Otomatis Made by massiswo.com */
.table-of-contents{flex:auto;width:fit-content;background: #f7f8fb !important;border-left: 6px solid #ebedf3 !important;padding:11px;margin:8px 0 10px 0;font-size: 15px}
.table-of-contents li{margin:0 0 0.25em 0; list-style: decimal;margin-left:-30px !important; margin-top:5px !important}
.table-of-contents a{color:#0479b4;}
.table-of-contents h4{margin:0;cursor:pointer}
:target::before {content:""; display:block; height:60px;margin-top:-60px;visibility:hidden;}
  5. Jika sudah selesai klik simpan template anda.

Penerapan Daftar isi postingan

Silahkan salah satu postingan yang akan diberi table of content (TOC) lalu ikuti cara dibawah ini
  1. Pastikan postingan kamu sudah selesai dengan subheading didalamnya.
  2. Silahkan kopi kode dibawah ini dan letakkan diatas paragraf atau dibawah paragraf pertama, pastikan dulu tampilan tulisan artikel anda pada mode HTML 
     <div class="toc-pro"></div>
  3. Setelah itu simpan, sekarang anda bisa melihat jika kode-kode diatas ditempatkan pada kode template yang tepat seharusnya postingan anda sudah ada hasilnya.

Cara 3 : Membuat table of content semi otomatis di blogger

Jika cara diatas tidak berhasil silahkan gunakan cara yang ketiga ini, Memang kadang kita harus menyesuaikan template yang kita pakai. Beda template beda cara.

  1. Silahkan masuk ke dasboard blogger.com
  2. Lalu masuk menu Tema dan pilih Edit HTML
  3. Selalu backup template anda sebelum mencoba atau menambah kode baru.
  4. Masukkan kode dibawah ini diatas kode ]]</b:skin> 
    /* TOC */
.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color:#2a5365}
.table-of-contents h4{margin:0;cursor:pointer}
.table-of-contents h4:before{font-family:FontAwesome;content:"\f0c9";padding-right:7px;}
/* For Fontaweosme 5 
.table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"\f0c9";padding-right:7px;}
*/
  5. Apabila di template anda belum ada kode font Awesome, silahkan masukkan kode dibawah ini diatas </head>, jika sudah ada lewati step ini langsung kestep berikutnya 
    <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
  6. Berikutnya masukkan kode dibawah ini diatas kode </body> 
    <script async='async' defer='defer'>
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}
</script>
  7. Langkah terakhir klik tombol Simpan

Penerapan pada postingan atau artikel blog

  1. Siapkan satu artikel atau gunakan artikel yang sudah ada. Pastikan artikel tersebut sudah ada subheading (h2, h3, dst).
  2. Pastikan mode tulisan anda sudah berada di mode HTML
  3. Silahkkan masukkan kode dibawah ini dimana saja bisa diatas paragraf pertama atau dibawahnya. 
    <div class="toc-pro"></div>
  4. Apabila sudah selesai klik tombol Perbeharui dan lihat hasilnya.
Apabila tidak berhasil silahkan sesuaikan kode-kode diatas dengan template yang anda punyai.

Baca juga : Membuat custom list number atau penomoran custom pada postingan blogger

Itulah sedikit ulasan tentang cara membuat tabel of content (TOC) pada blogger yang saat ini sering dipakai untuk meningkatkan kualitas konten baik dimata manusia dan mesin pencari.

Apakah anda tertarik untuk menggunakannya? Silahkan praktekkan.

Apabila ada kendala dalam memasang kode-kode diatas silahkan tinggalkan pesan atau pertanyaan pada kotak komentar dibawah.

Posting Komentar untuk "Cara Membuat Table Of Content (TOC) Otomatis di Blogger Terbaru"

--> Berkomentarlah secara bijak dan sopan
--> Berkomentar dengan url ( mati / hidup ) tidak akan di publish