Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Table Of Content Di Postingan Blog

Cara Membuat Table Of Content Di Postingan Blog - Hallo sobat semua, pada kesempatan ini saya ingin berbagi seputar tutorial blogger, yaitu cara membuat Table Of Content di postingan blog. Tutorial ini banyak kita jumpai di blog-blog besar seperti Wikipedia, Ensiklopedia dan situs besar lainnya.

Table Of Content adalah daftar dari poin-poin penting yang dibahas pada suatu artikel, dengan menggunakan table of content maka akan memudahkan pembaca untuk memilih bagian pokok artikel mana yang akan di bacanya.

Dan kali ini saya akan memberikan tutorial tentang cara membuat table of content di postingan blog dengan mudah.

Cara mEmbuat Table Of Content Di Postingan Blog
1.Buka Blogger > Klik Menu “Thema” > Klik tombol “Edit HTML”, Kemudian tambahkan kode CSS berikut ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;


<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 selanjutnya adalah, letakan kode di bawah ini sebelum </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>

Lalu klik “Simpan Tema”



Selanjutnya, anda masuk ke bagian postingan, dan buatlah postingan di editor post blogger. Dan tambahkan Kode dibawah ini pada Tab “HTML” (Bukan Compose)


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


Edit tulisan yang ditandai di atas dengan tulisan sendiri. Kemudian tambahkan id="toc_1" disetiap Heading sesuai dengan ID pada kode diatas. Misalnya seperti ini :


<h4>Cara Membuat Table of Contents di Postingan Blogger</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.


Tambahkan ID pada heading menjadi seperti in


<h4 id="toc_1">Cara Membuat Table of Contents di Postingan Blogger</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.


Perhatikan kode yang ditandai, untuk heading selanjutnya disesuaikan dengan urutan ID pada table of contents yang anda buat.

Contohnya :


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


Kemudian tambahkan kode di bawah ini di setiap akhir paragraf tiap bagian.


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


Maka hasilnya akan seperti 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>


Setelah Langkah di atas selesai, Lalu anda klik “Publikasikan” post, dan lihat hasilnya di blog anda.


Dan hasilnya bisa anda lihat pada link Dibawah ini.

RESULT


Demikian artikel dari saya tentang Cara Membuat Table Of Content Di Postingan Blog, Semoga artikel diatas bermanfaat bagi anda semua. Terima Kasih

1 komentar untuk "Cara Membuat Table Of Content Di Postingan Blog"