U3DGDAQbHz1BfkaNiXhOCW0356K5hbADnV3jwXwA

Script Sitemap Atau Daftar Isi Blog Otomatis Aktif Responsif

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.
Membuat Daftar Isi Otomatis Blogspot
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: 9999, 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.

Memuat konten...

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.
Related Posts
GB Sudiantara
Salam persahabatan dari saya. perkenalkan nama saya Bagus. Selamat datang di Bllog Menulis Catatan. Semoga catatan ini bermanfaat buat kita semua.
SHARE

Related Posts

Subscribe to get free updates

5 komentar

  1. work gan di blogger,sangat bermanfaat terimakasih

    BalasHapus
  2. Terima kasih teman teman berkunjung ke blog ini, semoga bermanfaat.

    BalasHapus
  3. Balasan
    1. Silakan gan gunakan scriptnya di blog agan, semoga bermanfaat. Terima kasih

      Hapus

Posting Komentar