√ Cara Membuat Table of Contents (TOC) di Blogger Terbaru

Konten [Tampil]

Cara Membuat Table of Contents (TOC) di Blogger merupakan tindakan untuk dapat membuat daftar isi secara otomatis di postinga blogger. tentunya hal ini ada yang bilang sebagai Jump Link atau Daftar Isi di Blooger. Hal tersebut sama saja mengarahkan kepada Cara Membuat Table of Contents di Postingan Bloger. Hal ini bukalah sebuah hal yang sulit karena anda hanya memanfaatkan sebuah ID dalam halaman HTML ketika membuat daftar isi.

Nah cara membuat table of contents di postingan bloger sama saja ketika kita membuat daftar isi otomatis menggunakan aplikasi microsoft word. Dalam microsoft word berfungsi untuk mengetahui nomer halaman dari sebuah halaman buku atau yang lainnya. Lantas, bagaimana cara membuat daftar isi di blogger / blogspot ini.

Daftar Isi

Apa itu Table of Contents?

Table of contents merupakan daftar isi dari sebuah halaman website yang dibuat agar memudahkan pengunjung dalam melakukan navigasi ketika berkunjung. Kegunaan table of contents adalah pengunjung dapat langsung merarahkan tujuannya ketika sedang diwebsite orang lain untuk menemukan pokok pikiran yang ia cari.

Bagaimana cara membuat table of contents di Blogspot.

Cara membuat table of contents di blogspot dapat dilakukan dengan langkah-langkah sebagai berikut:

Masukkan ke akun blogspot atau blogger anda.
Kemudian anda cari menu TEMA > EDIT HTML.
Lalu anda cari ]]></b:skin> atau </style>, agar dapat memudahkan dalam pencarian anda dapat melakukannya dengan kombinasi CTRL+F.
Kemudian anda masukan kode dibawah ini, dan pastekan tepat diatas kode ]]></b:skin> atau </style>.

/* Table of Contents (TOC) */
#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9}
#btn_toc{font-weight:700;cursor:pointer;margin:10px}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li{cursor:pointer}
#toc{display:grid}
.back_toc{cursor:pointer;text-align:right}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}

Lalu anda klik Simpan.

Perhatikan kode css dibawah karena ada dua perlakukan website, yakni menggunakan sticky navigasi atau tidak.

:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}

Jika anda pengguna menu navigasi sticky, anda dapat mengatur bagian height:40px;margintop:40px. agar sesuai dengan template anda. jika anda bukan pengguna menu navigasi sticky maka tidak perlu menyettingnya.

Setelah itu anda masuk ke postingan yang akan anda berikan table of content.
Lalu anda masuk ke Mode HTML ingat bukan mode Compose ya.
Kemudian anda dapat menaruh kode dibawah ini, silahkan anda taruh diparagraf pertama atau sesuai dengan selera anda.

<div id="btn-cm">
<div id="btn_toc" 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">Subheading 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Subheading 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Subheading 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Subheading 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Subheading 5</a></li>
</ol>
</div>
</div>

Anda harus menambahkan URL postingan sebelum kata #toc_1 dan seterusnya. Anda bisa menambahkan subheading lebih dari 5 dengan menambahkan #toc_6 dan seterusnya.

Tambahkan kode id="toc_1" pada setiap heading tag anda. Boleh heading H1, H2 atau H3. Contohnya adalah

<h3> Rafinternet 1 </h3> menjadi <h3 id="toc_1"> Rafinternet 1 </h3>.
<h3> Rafinternet 2</h3> menjadi <h3 id="toc_2"> Rafinternet 2 </h3>.
<h3> Rafinternet 3 </h3> menjadi <h3 id="toc_3"> Rafinternet 3 </h3>.
<h3> Rafinternet 4 </h3> menjadi <h3 id="toc_4"> Rafinternet 4 </h3>.

Terakhir anda masukkan kode dibawah ini disetiap akhir masing-masing paragraf. Setelah itu anda dapat mempublikasikan artikel anda tersebut.

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

Cara Menambahkan efek smooth scroll di Blogspot.

Untuk dapat menambahkan efek smooth scroll ketika di klik table of content, anda dapat menambahkan kode jquery ya. Silahkan anda pastikan di akhir postingan anda kode dibawah ini.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>