Cara Membuat Table Of Content Menarik di Blogger
Hallo sobat waper, sudah beberapa hari ini mimin belum sempat update artikel nih karena lagi ada kerjaan dirumah yang mendadak harus dikerjakan.
Tapi tenang, hari ini mimin akan membuat artikel panduan dalam membuat table of content pada sebuah artikel.
Apa itu Table Of Content?
Table Of Content adalah poin-poin penting pada sebuah konten yang biasanya dibuat jika kamu menulis lebih dari 1000 kata.
Dengan begitu pengunjung bisa dengan mudah menemukan inti dari artikel yang kamu tulis.
Oke, tanpa panjang lebar lagi kita langsung saja ke cara membuatnya ya sobat. Ikuti langkah demi langkahnya dengan baik dan benar.
Membuat Table Of Content di Dalam Artikel
Dalam membuatnya kamu hanya perlu menambahkan kode script yang sudah mimin sajikan dibawah ini, yuk ikutin.1. Langkah pertama silahkan kamu buka Dashboard Blogger -> Pilih Tema -> Klik Edit Html.
2. Silahkan masukan kode CSS berikut ini sebelum 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:'';display:block;height:40px;margin-top:-40px;visibility:hidden}
</style><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. Sekarang klik Simpan.
5. Terakhir, untuk optimasi pada halaman menulis artikel blog silahkan ganti dari mode Compose ke Html lalu tambahkan kode berikut.
<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. Silahkan edit tulisan yang sudah ditandai diatas, kemudian tambahkan id="toc_1" disetiap heading yang sesuai dengan ID pada kode di atas.
7. Selesai deh.
Demikianlah panduan singkat dari mimin kali ini mengenai Cara Membuat Table Of Content di Blogger yang simpel dan keren. Semoga bermanfaat ya dan terimakasih sudah berkunjung sobat waper!
