√ Cara Menciptakan Table Of Contents (Toc) Di Postingan Blogger

Cara Membuat Table of Contents (TOC) di Postingan Blogger - Sebagian orang mungkin ada yang bilang Jump Link atau Daftar Isi di dalam postingan Blogger, keduanya sama saja mengarah ke Table of Contents (TOC). Sebenarnya menciptakan jump link ini sangat gampang Anda hanya perlu memanfaatkan penggunaan ID pada HTML. Namun jikalau Anda masih belum paham disini saya akan menjelaskan cara pembuatan Table of Contents khusus untuk halaman postingan di blogspot.

Baca juga: Cara Membuat Artikel Terkait di Tengah Postingan

Pada umunya Table of Contents (TOC) dipakai pada aplikasi Microsoft Word, yang berfungsi untuk mengetahui daftar isi dari dokumen atau file tersebut. Namun kali ini bagaimana jikalau TOC ini kita gunakan pada blogger untuk menciptakan daftar isi di halaman posting blogger, mungkin ini akan terlihat lebih menarik.

Baca juga: Cara Memasang Iklan Adsense di Tengah Postingan

Selain itu desain yang dipakai pada TOC ini hampir menyerupai mirip Wikipedia, sehingga akan lebih menarik perhatian pembaca blog Anda. Di sini kita tidak memakai instruksi script untuk mendeteksi header teks atau heading tag yang disimpan pada edit HTML postingan blog, alasannya yaitu kita asumsikan penggunaan Table of Contents ini tidak dipakai untuk semua halaman, oleh alasannya yaitu itu penggunaan TOC ini harus dilakukan secara manual pada postingan yang ingin memakai TOC ini.

Membuat table of contents di blogger ini hanya memakai instruksi script HTML, di tambah dengan CSS untuk mengatur letak dan desain tampilannya, dan instruksi JavaScript untuk toggle list TOC untuk jump link ke TOC.

Cara Membuat Table of Contents (TOC) di Postingan Blogger

Lihat cara penerapan HTML pada demo di bawah ini, biar Anda tidak galau ketika menerapkan pada halaman postingan blog Anda.

DEMO

1. Masuk ke Blogger.com.
2. Klik Tema > Edit HTML.
3. Cari instruksi ]]></b:skin> atau </style>.
4. Copy instruksi css dibawah ini, kemudian Paste di atas instruksi ]]></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}

5. Lalu klik Simpan tema.

Catatan:
Perhatikan instruksi css dibawah ini:

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

- Jika Anda memakai sajian navigasi sticky, silahkan atur bab height:40px;margin-top:-40px.
- Jika Anda tidak memakai sajian navigasi sticky, silahkan hapus instruksi tersebut.

6. Setelah itu masuk ke bab Postingan > kemudian Edit salah satu postingan blog Anda yang ingin memakai TOC.
7. Pastikan Anda berada pada bab HTML bukan Compose.
8. Copy instruksi dibawah ini, kemudian Paste sesudah paragraf pertama atau dapat Anda sesuaikan sendiri.

<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="√ Cara Membuat Table of Contents (TOC) di Postingan Blogger">Subheading 1</a></li>   <li><a href="#toc_2" title="√ Cara Membuat Table of Contents (TOC) di Postingan Blogger">Subheading 2</a></li>   <li><a href="#toc_3" title="√ Cara Membuat Table of Contents (TOC) di Postingan Blogger">Subheading 3</a></li>   <li><a href="#toc_4" title="√ Cara Membuat Table of Contents (TOC) di Postingan Blogger">Subheading 4</a></li>   <li><a href="#toc_5" title="√ Cara Membuat Table of Contents (TOC) di Postingan Blogger">Subheading 5</a></li> </ol> </div> </div>

Catatan:
- Tambahkan URL postingan Anda sebelum #toc_1 dan seterusnya.
- Anda juga dapat menambahkan  #toc_6 dan seterusnya.

9. Lalu tambahkan id="toc_1" pada heading tag. Contohnya:
<h3>Subheading 1</h3> menjadi <h3 id="toc_1">Subheading 1</h3>
<h3>Subheading 2</h3> menjadi <h3 id="toc_2">Subheading 2</h3>
<h3>Subheading 3</h3> menjadi <h3 id="toc_3">Subheading 3</h3>
<h3>Subheading 4</h3> menjadi <h3 id="toc_4">Subheading 4</h3>
<h3>Subheading 5</h3> menjadi <h3 id="toc_5">Subheading 5</h3>

Catatan:
- Berlaku untuk heading tag h1, h2, h3, h4, h5, h6 sesuaikan dengan heading tag yang dipakai pada postingan blog Anda.
- Gunakan id="toc_1" kemudian id="toc_2" kemudian id="toc_3" dan seterusnya, sesuaikan dengan jumlah subheading atau minor heading yang ada pada postingan blog Anda.

10. Copy instruksi dibawah ini, kemudian Paste pada bab terakhir masing-masing paragraf.

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

11. Lalu klik Publikasikan atau Perbarui artikel blog Anda.

Catatan:

• Jika Anda selesai mengatur/memasang TOC pada postingan blog, Anda harus tetap berada pada bab HTML kemudian klik Publikasikan atau Perbarui artikel blog Anda.
• Jika sesudah mengatur/memasang TOC kemudian Anda mempublikasikan atau memperbarui artikel Anda pada bab Compose, maka link Subheading pada TOC yang saya contohkan diatas akan menjelma link editor postingan tersebut, oleh alasannya yaitu itu Anda harus tetap berada pada bab HTML ketika akan mempublikasikan atau memperbarui artikel Anda.
• Atau sebelum instruksi #toc_1 tambahkan URL postingan Anda yang dapat dilihat pada bab Tautan permanen pada ketika Anda menulis artikel (teks editor). Makara contohnya: aciknadzirah.blogspot.com/search?q=pengertian-blog-blogger-blogging-dan#toc_1 dan seterusnya.

Code by Kompi Ajaib

Update: 23/04/2018

Cara Menambahkan Efek Smooth Scroll

Untuk menambahkan pengaruh smooth scroll pada table of content, Anda perlu menambahkan beberapa instruksi jQuery yang di butuhkan.

Lihat demonyadi bawah ini sesudah ditambahkan pengaruh smooth scrolling, ketika judul pada table di klik maka akan scroll ke bawah dengan lembut atau smooth.

DEMO

Silahkan tambahkan instruksi ini dan letakan sebelum instruksi </body>

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

Catatan:
Untuk instruksi jQuery ini yaitu versi 3.3.1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Jika dalam template blog Anda sudah memasang instruksi jQuery sebelumnya, mau versi berapapun lebih baik di hapus salah satunya.

Itulah artikel mengenai cara menciptakan table of contents (TOC) di postingan blogger, jikalau Anda mempunyai saran atau pertanyaan silahkan hubungi kami melalui halaman kontak atau dengan memperlihatkan komentar dibawah ini. Terima kasih.
Sumber http://www.caramanual.com