Daftar isi atau TOC (Table of Content)
Yang terdapat pada sebuah halaman blog , ini berguna sekali untuk memudahkan pengunjung agar bisa langsung lompat ke artikel yang di tuju,,
Daftar isi ini menampilkan judul pada halaman artikel , selain membuat tampilan blog menjadi keren , ini juga bisa membuat blog atau artikel menjadi lebih SEO ,, membantu mesin pencari dalam penelusuran kata kunci yang orang orang cari, dalam pencarian google.
" Jika sobat ingin membuat daftar isi , sobat bisa lanjut ke bawah :
Membuat Daftar Isi Di Dalam Postingan Blogger.
Simak secara benar agar tidak terjadi kesalahan dalam pengeditan ,,
Jika perlu , alangkah baiknya sobat BackUp terlebih dahulu thema milik sobat, apabila terjadi kesalahan , maka bisa segera di pulihkan.
1. Buka Akun Blogger.
2. Pilih Thema , Edit HTML
Pastekan kode berikut , tepat di atas kode </head>
Kode css Atas </head>
ini code nya gaes..
<style type='text/css'>
/* CSS Table of Contents westoiku.blogspot.com */
#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:'';display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>
Cari Kode </body> , lalu pastekan kode
Berikut.. tepat diatas nya.
Kode Atas </body>
ini code nya gaes..
<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>
Cara Menampilkan Daftar Isi Pada Postingan Blog.
Lansung saja yah ,
Agar artikel sobat yang akan di publis , dan bisa menampilkan daftar isinya.
Caranya seperti ini.
1. Buka Akun Blogger.
2. Buat Postingan Baru.
3. Ubah Compose Menjadi HTML.
Pada tampilan html.
Sobat tambahkan script ini
ini code nya gaes..
<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>
Contoh :
<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.
<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.
Selanjutnya bisa disesuaikan dengan urutan ID pada Table Of Content yang sobat buat.
Misalnya :
<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.
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>
<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>
Jika penasaran dengan hasilnya.bisa lihat di link ini
Post a Comment