Script Sitemap Atau Daftar Isi Blog Otomatis Aktif Responsif - Menulis Catatan

Sekilas info mengenai script daftar isi yang saya gunakan untuk Blog Menulis Catatan. Terlihat seperti gambar di bawah, menggunakan script daftar isi yang masih aktif dan responsif.

Script Sitemap Atau Daftar Isi Blog Otomatis Aktif Responsif

Untuk memudahkan pengunjung dalam menelusuri isi blog yang kita kelola, secara umum para blogger memasang daftar isi atau sering juga disebut sitemap untuk blognya. Karena itu saya juga membuat daftar isi untuk blog menulis catatan. Dalam prakteknya beberapa kendala yang ditemukan dalam membuat daftar isi otomatis di blog menggunakan script, terkadang kita menggunakan script yang tidak aktif, sehingga pada saat publish daftar isi blog yang telah dibuat tersebut hanya tampil tulisan "memuat...."

Sobat blogger mesti cermat dalam menggunakan script daftar isi, mesti diuji coba terlebih dahulu. Saya sendiri mengalami beberapa kali kendala sitemap tidak tampil di blog. Mengatasi masalah ini, pergantian script dan uji coba publih sitemap atau daftar isi blog saya lakukan secara berulang sampai berhasil.

Meski tampilan sitemap sederhana namun sangat bermanfaat untuk blog, ada beberapa script yang secara tampilan menarik namun saat dipergunakan untuk blog, sriptnya tidak aktif. Maklum saya tidak paham dalam pembuatan script. Jadi berterima kasihlah pada teman - teman blogger yang telah berbagi script sitemap atau daftar isi secara gratis. Daftar isinya juga responsif dan scriptnya masih bekerja dengan baik.

Untuk memasang daftar isi / sitemap di blog, caranya sangat mudah. Dengan login di blogger, kemudian buat page atau halaman dengan judul Dafar isi atau Sitemap, terserah pilihan anda. Dalam mode html, pasanglah script sitemap/daftar isi di bawah ini, lalu publish. Silakan lihat hasilnya.
Perhatikan tulisan warna merah, silakan ganti dengan alamat blog sobat

<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css"> .table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)} .table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial} .table-of-content .toc-header:hover{background-color:#fdfdfd} .table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease} .table-of-content .toc-header.active{color:#fc4f3f} .table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)} .table-of-content .loading{display:block;padding:15px;text-decoration:blink} .table-of-content ol{margin:0;padding:0;list-style:none;transition:initial} .table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial} .table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial} .table-of-content a:visited{color:#a2a2a9;transition:initial} .table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial} .post ol li:before{display:none} </style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script> var toc_config = { url: 'https://www.menuliscatatan.com/', containerId: 'table-of-content', showNew: 15, newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>', sortAlphabetically: { thePanel: true, theList: true }, maxResults: 980, activePanel: 1, slideSpeed: { down: 400, up: 400 }, slideEasing: { down: null, up: null }, slideCallback: { down: function() {}, up: function() {} }, clickCallback: function() {}, jsonCallback: '_toc', delayLoading: 0 }; </script> <script src="https://rawgit.com/ardycool/sitemapku/master/sitemap.js"></script> </div>

Hasil Daftar Isi terlihat seperti di bawah ini, otomatis dan responsif, tampilan minimalis, loading cepat, blog tetap ringan.

Blogger

1. Agar Postingan Cepat Terindek Di Google
2. Akibat Mengganti Judul Blog
3. Beberapa Hal Yang Perlu Diperhatikan Dalam Membuat Blog
4. Cara Daftar Alexa
5. Cara Membuat Akun Feedburner Untuk Blogspot Dengan Benar
6. Cara Membuat Cookie Di Blog Sebagai Notifikasi baru
7. Cara Membuat OpenID URL
8. Cara Mendaftarkan Blog ke Google
9. Cara mengatasi Normal 0 false false false EN-US X-NONE AR-SAMicrosoftInternetExplorer4
10. Cara Menghapus Cookie Browser baru
11. Cara Pasang Kode Verifikasi Google Di Blog
12. Cara Pasang Youtube Di Blogspot
13. Cara Verifikasi Blog Wordpress Self Hosting Pada Google Webmaster Tool
14. Kebijakan Konten Blogger dan Pedoman Komunitas baru
15. Kenapa Muncul Iklan Di Blog Secara Tiba Tiba
16. Layanan Free Web Submission ke Search Engine
17. Membuat Artikel Muncul Di Google Tanpa Judul Blog baru
18. Membuat Blog Anti Copas Menggunakan CSS
19. Membuat dan Mengganti Favicon Blog Di Blogspot
20. Membuat Sitemap Blogspot Webmaster Valid AMP
21. Memperbaiki Item Data Terstruktur Hilang Atau Tidak Valid
22. Mengatasi Duplikat Konten Di Blogspot
23. Mengatasi Masalah FCP: lebih dari 1 dtk (seluler) baru
24. Mengatasi Masalah URL Yang Dikirimkan Diblokir Oleh Robots.txt baru
25. Migrasi Blog Dari Blogger Ke Wordpress Self Hosting
26. Script Sitemap Atau Daftar Isi Blog Otomatis Aktif Responsif
27. Submit RSS Feed Blog Di Bing
28. Submit Sitemap Blogspot Di Google Webmaster Tool
29. Submit Sitemap Di Bing Webmaster Tools
30. Tip Memilih Web Hosting Yang Tepat
31. Validasi Feed Menggunakan RSS Feed Validator

Budaya Bali

1. Festival Ogoh Ogoh Karangasem 2019 - Tema Desa Kala Patra - Bhuta Hita
2. Perang Pandan Desa Tenganan Pegringsingan Bali
3. Pupuh Durma Geguritan Dharma Prewertti
4. Pupuh Ginada Geguritan Dharma Prewertti
5. Pupuh Sinom Bahasa Bali Indik Dewa Yadnya
6. Pura Silayukti Padangbai Bali
7. Rahajeng Rahina Galungan lan Kuningan
8. Sekar Alit Geguritan Pupuh Adri baru
9. Selamat Hari Raya Galungan Dan Kuningan

Edukasi

1. Apa Itu Email
2. Cara Downgrade iOS 12 ke iOS 11 Iphone 5S
3. Cara Membuat Skype
4. Cara Membuat Slide Power Point Dengan Google Slide Embed Video baru
5. Cara Mengamankan Akun Whatsapp Dari Hacker baru
6. Cara Menggunakan WhatsApp Via Web Di PC
7. Cek Posisi Anda Di Google Terhadap KRB Gunung Agung
8. Global Batur Geopark, Kintamani Bali baru
9. Instal Skype Di Komputer dan Netbook
10. Mengamankan Akun Google Dengan Verifikasi 2 Langkah Gmail baru
11. Panduan Ekinerja KLHK Untuk Polisi Kehutanan
12. Penerapan Aplikasi E-Kinerja Di Lingkup KLHK
13. Pengertian Magma, Lava Dan Lahar
14. Perdirjen KSDAE Tentang Studbook dan Logbook
15. Personal Hotspot Hilang di Iphone
16. Peta KRB Kondisi Awas Gunung Agung
17. Selamat Tahun Baru

Konservasi

1. Batur Enduro Challenge
2. Buyan Jungle Run 2018 - Hari Konservasi Alam Nasional
3. Jalur Track Lintas Alam Taman Wisata Alam Panelokan | Kintamani Bali
4. Lomba Lintas Alam 2018 - Balai KSDA Bali
5. Menanam Pohon Di Hamparan Black Lava Kintamani
6. Panggung Seni Budaya Dewi Danu Batur
7. Partisipasi Kegiatan Konservasi Melalui Pelepasan Tukik di Pantai Watu Klotok baru
8. Pelepasan Penyu Hijau - BKSDA Bali Bersama Pelaku Pariwisata dan Pihak Terkait
9. Pelepasliaran Penyu Hijau DI Pantai Blue Lagoon Padangbai Bali
10. Pelepasliaran Tukik Jenis Lekang Di Pantai Saba baru
11. Pelepasliaran Tukik Penyu Hijau Di Pantai Samuh Candidasa
12. Pengibaran Bendera Merah Putih Di Puncak Gunung Batur Kintamani Bali
13. Penyu Hijau Ditemukan Di Pantai Mandira Candidasa
14. Persetujuan Kerja Sama Antara Kepala Balai KSDA Bali Degan Bupati Bangli
15. Persiapan Buyan Jungle Run II Di TWA Danau Buyan-Tamblingan
16. Peta Jalur Lomba Lintas Alam 2018 Di TWA Penelokan - BKSDA Bali
17. Sosialisasi Pengamanan Hutan TWA Gunung Batur

WordPress

1. Cara Verifikasi Blog Wordpress Self Hosting Pada Google Webmaster Tool
2. Hello world! Waspadalah Terhadap Hack Wordpress
3. Membuat Blog WordPress Self Host
4. Submit RSS Feed Blog Di Bing
5. Submit Sitemap Di Bing Webmaster Tools
6. Theme WordPress Responsive Dan Mobile Friendly
7. Tidak Bisa Login di Wordpress
8. Validasi Feed Menggunakan RSS Feed Validator

YouTube

1. Cara Pasang Youtube Di Blogspot
2. Kenapa Jumlah Subscriber Berkurang Atau Menurun
3. Melihat Video Yang Dihapus Youtube Akibat Melanggar Pedoman Komunitas
4. Membuat Channel Youtube Baru Untuk Akun Pemilik Tanpa Channel baru
5. Memulai Youtube Untuk Persiapan Monetisasi - Youtube Pemula baru
6. Mengatasi dan Mengetahui Penyebab Subscriber Hilang
7. Promosi Youtube Di Blogspot

macOS

1. Cara Instal Mac OS Sierra Dari USB Ke SSD External
2. Cara Instal Windows 10 Di Macbook Air Dengan Bootcamp
3. Cara Instal Windows 10 Di Macbook Dengan Bootcamp baru

Script Sitemap Atau Daftar Isi Blog Otomatis Aktif Responsif ini saya temukan setelah mencoba beberapa script sitemap, ada juga yang tidak work. Ini script sitemap sudah hasil uji coba dari beberapa pencarian. Sumber script sitemaps : http://www.ijo-gading.com/2017/03/sitemap-otomatis-responsive.html. Mohon ijin untuk mempergunakannya dalam membuat daftar isi blog. Saya rekomendasikan script sitemap ini, masih work serta responsif. Terima kasih.