Cara Membuat Table Of Contents Seperti Wikipedia di Postingan Blogger

www.azid45.web.id - Cara Membuat Table Of Contents Seperti Wikipedia di Postingan Blogger. Table of contents merupakan sitemap atau daftar isi pada postingan blogger yang berfungsi untuk mempermudah pembaca. Jadi dengan menggunakan table of contents pembaca bisa mengetahui sub point pokok yang akan dibahas oleh admin dari artikel yang dibuatnya. Table of contents ini biasanya digunakan pada website seperti wikipedia, ensiklopedia dan juga pada file PDF sebagai e-book.

Dengan table of contents ini selain memudahkan pembaca untuk mencari sub pokok pahasan yang dipublikasikan oleh admin, juga dapat membuat blog kita terlihat profesional. Mengapa demikian? Dengan memudahkan pembaca dengan memberikan sub pont-point maka web kita seperti web besar seperti wikipedia yang sudah saya singgung diatas.

Baiklah, jika teman-teman ingin membuat table of contents  seperti wikipedia di postingan blogger dengan mudah, bisa mengikuti langkah-langkah berikut ini;

Langkah pertama, buka blogger > menu tema/template > edit HTML, kemudian tambahkan kode css berikut ini tepat diatas kode </head>

<style type='text/css'>
/* CSS Table of Contents */
#light-toc{background:#f5f5f5;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:#222}
#toc li a:hover{color:#1e90ff}
#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>

Langkah kedua, tempatkan code script berikut ini tepat diatas kode </body>

<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>

Langkah Ketiga, Save Template blog teman-teman.

Langkah memasukkan kode scirpt dan css sudah selesai, namun belum selesai semuanya. Selanjutnya adalah cara memanggill script tersebut di dalam postingan agar dapat membuat table of contents seperti wikipedia.

Langkah pertama, buka new post atau buat postingan baru dan masuk pada mode HTML bukan compose. Kemudian copas kode berikut ini dan pastekan ke dalam postingan bentuk mode HTML tadi.

<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>

Keterangan: ubah title dan bagian subheading1,2,3 dan seterusnya dengan sup point postingan yang teman-teman inginkan. Dan pada setiap judul sub heading tambahkan kode "id=toc_1, id=toc_2, dan seterusnya" sesuai dengan jumlah sub postingan yang teman-teman buat. Setelah itu jangan lupa pada setiap paragraf akhir sub heading tempelkan kode berikut;

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

Untuk mempermudah pemahaman bisa melihat contoh berikut ini;

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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<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 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<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 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<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 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<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 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

Langkah kedua, silakan klik publikasikan.

Result

Sekian, demikianlah Cara Membuat Table Of Contents Seperti Wikipedia di Postingan Blogger. Semoga artikel ini bermanfaat. Amin

Source: www.arlinadesign.com