Cara Membuat Daftar Isi di Postingan Blog

Kadang kamu sebagai seorang penulis di blog sering menulis banyak sekali Heading kebawah, bisa sampai 7 - 10 heading, dan tentunya bagi sebagian pembaca akan sedikit kesulitan untuk melihat heading mana yang belum pernah dibaca sebelumnya.


Nah dengan itu, kali ini saya akan sedikit berbagi Tips seputar Blog kembali, yaitu Cara Membuat Daftar Isi di Postingan Blog. Seperti Dibawah ini.

Ingin tahu caranya? oke check this out.

Persiapan

Jangan lupa berdoa dan makan dulu, takut lapar nanti pas editnya. :) karena pada saat saya bikin postingan ini, saya belum makan.

Masukan Code Ke Tema

Pertama kamu masuk kehalaman dasbor blogger kamu, dan masuk kebagian Tema, dan Edit HTML, disana kamu masukan Code berikut tepat diantara <head> dan </head>.
<pre><code class="hljs shell">&lt;style type='text/css'&gt;
/* CSS Daftar Isi */
<span class="hljs-meta">#</span><span class="bash">light-toc{background:<span class="hljs-comment">#f5f5f5;border-radius:3px;padding:10px 20px}</span></span>
<span class="hljs-meta">#</span><span class="bash">toc_list{font-weight:700;cursor:pointer;margin:10px 0}</span>
<span class="hljs-meta">#</span><span class="bash">toc_list:focus,<span class="hljs-comment">#toc li:focus,.back_tocontent:focus{outline:none}</span></span>
<span class="hljs-meta">#</span><span class="bash">toc_list svg{vertical-align:middle}</span>
<span class="hljs-meta">#</span><span class="bash">toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}</span>
<span class="hljs-meta">#</span><span class="bash">toc ol li:before{left:-2em}</span>
<span class="hljs-meta">#</span><span class="bash">toc li a{color:<span class="hljs-comment">#222}</span></span>
<span class="hljs-meta">#</span><span class="bash">toc li a:hover{color:<span class="hljs-comment">#1e90ff}</span></span>
<span class="hljs-meta">#</span><span class="bash">toc{display:grid}</span>
.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:&amp;#39;&amp;#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
&lt;/style&gt;</code></pre>
Selanjutnya kamu juga masukan Code berikut diantara <body> dan </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>
Perlu diingat, penempatan antara bisa pada sesudah <body> atau sebelum </body>. Dan jika sudah selesai kamu simpan tema yang telah kamu ubah tadi, dan pastikan tidak ada error.

Masukan Code Pada Postingan

Selanjutnya kamu buat Artikel atau Post Baru, dan pada Halaman pengeditan, ganti dari Compose ke HTML.

Nah didalam kamu masukan Code berikut untuk Daftar Isinya.

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

Perlu diperhatikan bagian Merah itu disesuaikan dengan Heading kamu nanti. Jika sudah selesai, kamu langsung saja biat Heading Baru, dan pada Bagian Edit HTML lagi, kamu ubah variabel <H3> menjadi <H3 id="toc_1">  sesuaikan dengan Heading berapa sesuai dengan punya kamu. Variabel toc_1 adalah Bagian Subheading 1. Ingat baik baik ya.


Nah jika sudah selesai, kamu bisa langsung aja publish artikel kamu, dan lihat apa yang terjadi, apakah berhasil, karena jika gagal itu mustahil kecuali ada kesalahan pada mengeditan code tadi. Pada pengeditan HTML Tema hanya perlu sekali saja, jadi jika kamu ingin menggunakan Daftar Isi kembali, langsung lewat ke Langkah ini.

Video Tutorialnya akan saya share kemudian hari, terima kasih dan semoga berhasil.

Yuk Berlangganan Artikel Terbaru Gratis!

0 Response to "Cara Membuat Daftar Isi di Postingan Blog"

Post a Comment

Contact Form

Name

Email *

Message *

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel