Cara Membuat Table of Contents Keren di Postingan Blogger

 Table of Contents sebagian orang mungkin ada yang bilang Jump Link atau Daftar Isi di dalam postingan Blogger, keduanya sama saja mengarah ke Table of Contents (TOC).

 Table of Contents ini sering kita lihat di Situs Wikipedia. Tapi bukan sekedar daftar isi biasa, karena ketika di-klik akan otomatis loncat ke menu yang dituju alias jump link. Tentunya ini memudahkan pengunjung karena bisa langsung pergi ke menu yang dicari. Apalagi kalau artikelnya super panjang yang bikin pegel kalau scroll terus.

 Table of Contents adalah daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel.  Table of Contents biasanya diletakkan setelah tulisan kata pengantar atau ide pokok dari sebuah artikel.

Cara Membuat Table Of Contents Keren di Postingan Blogger

Untuk menerapkannya di blog sobat simak langkah langkah penerapannya di blog.

1. Buka dashboard blogger sobat klik Tema » Edit HTML.
2. Selanjutnya letakkan kode dibawah ini diatas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;.

<style type='text/css'>
/* CSS Table of Contents By www.tamboenman.xyz*/
#light-toc{background:#a6dbde;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#toc ol li:before{left:-2em}
#toc li a{color:#fa192f}
#toc li a:hover{color:#035711}
#toc{display:grid}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{Content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>

3. Selanjutnya letakkan kode dibawah ini sebelum kode </body> atau  &lt;!--</body>--&gt;&lt;/body&gt;.

<script type='text/javascript'>          
//<![CDATA[          
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>          
</script>

4. Selanjutnya klik simpan Tema.

5. Selanjutnya kita beralih kehalaman postingan, buka editor post blogger. Tambahkan kode dibawah ini pada tab penulisan HTML

<div id="light-toc">
<div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="Subheading 1">Bagian Subheading 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Bagian Subheading 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Bagian Subheading 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Bagian Subheading 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Bagian Subheading 5</a></li>
</ol>
</div>
</div>

6. Sesuaikan tulisan diatas dengan tulisan sobat. Selanjutnya tambahkan id="toc_1" di setiap heading sesuai dengan ID yang ada pada kode diatas. Dan kode dibawah ini disetiap akhir paragraf tiap bagian.

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

Maka contoh penulisannya akan seperti ini.

<div id="light-toc">
<div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="Subheading 1">Bagian Subheading 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Bagian Subheading 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Bagian Subheading 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Bagian Subheading 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Bagian Subheading 5</a></li>
</ol>
</div>
</div>

<h4 id="toc_1">
Heading Bagian 1</h4>

Lorem Ipsum은 단순히 인쇄 및 조판 산업의 더미 텍스트입니다. Lorem Ipsum은 1500 년대 이래로 업계의 표준 더미 텍스트였습니다. 알 수없는 프린터가 유형의 교정쇄를 가져 와서 표본 표본 책을 만들기 위해 그것을 뒤섞 었습니다.

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

<h4 id="toc_2">
Heading Bagian 2</h4>

Το Lorem Ipsum είναι απλά ψεύτικο κείμενο της βιομηχανίας τυπογραφίας και τυπογραφίας. Το Lorem Ipsum είναι το τυπικό ανόητο κείμενο της βιομηχανίας από τη δεκαετία του 1500, όταν ένας άγνωστος εκτυπωτής πήρε ένα μαγειρείο τύπου και το κωδικοποίησε για να φτιάξει ένα βιβλίο τύπου δείγματος.

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

<h4 id="toc_3">
Heading Bagian 3</h4>

Lorem Ipsum é simplesmente um texto fictício da indústria tipográfica e de impressão. Lorem Ipsum é o texto fictício padrão do setor desde os anos 1500, quando uma impressora desconhecida pegou uma galera do tipo e a mexeu para fazer um livro de amostras do tipo.

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

<h4 id="toc_4">
Heading Bagian 4</h4>

Lorem Ipsum er ganske enkelt dummy tekst fra trykkeri- og typebransjen. Lorem Ipsum har vært bransjens standard dummy-tekst helt siden 1500-tallet, da en ukjent skriver tok en bysse av typen og krypset den for å lage en type eksemplarbok.

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

<h4 id="toc_5">
Heading Bagian 5</h4>

Lorem Ipsum je jednostavno lažni tekst industrije štampanja i unosa teksta. Lorem Ipsum je standardni industrijski lutkaški tekst još od 1500. godine, kada je nepoznati štampač uzeo galeriju tipa i raširio je kako bi napravio knjigu s uzorcima.

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

<h4 id="toc_6">
Heading Bagian 6</h4>

Lorem Ipsum es simplemente un texto ficticio de la industria de impresión y composición tipográfica. Lorem Ipsum ha sido el texto ficticio estándar de la industria desde el año 1500, cuando una impresora desconocida tomó una galera de tipo y la mezcló para hacer un libro de muestras.

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

Setelah selesai klik publikasikan post dan lihat hasilnya pada blog sobat. Untuk demo bisa diklik disini

Klik Demo Klik Disini

Demikian sobat sedikit tutorial cara membuat Table of Contents keren di Blogger, bagi yang mengalami kesulitan silahkan mengajukan lewat kolom komentar di bawah.Semoga postingan ini bermanfaat bagi sobat semua dan selamat mencoba.

Berbagi :