Cara Mudah Membuat Daftar Isi Blog Otomatis Dengan Menu ( Terbaru )

Daftar isi

• 1 Daftar Isi Blog Otomatis Dengan Menu
• 2 Cara membuat dan memasang Daftar isi Blog
• 3 Penutup

Membuat Daftar Isi Blog Otomatis Dengan Menu

Membuat Daftar Isi Blog Otomatis Dengan Menu - Sitemap atau Daftar isi pada suatu blog/situs adalah hal yang wajib ada karena fungsi dari Daftar isi itu sendiri bisa sangat membantu para pengunjung karena mempermudah mereka mencari artikel-artikel yang mereka cari ataupun untuk melihat artikel atau postingan kita yang lainnya, daftar isi berisi deretan konten atau artikel yang ada pada suatu situs dan biasanya berada pada suatu laman atau halaman web/blog.

Perlu teman-teman ketahui bahwa setiap blog/situs memiliki Daftar isi yang berbeda secara tampilan, namun fungsinya tetap sama saja untuk mempermudah para pengunjung mencari apa yang mereka cari, dan daftar isi juga harus kita desain semenarik mungkin dan responsive, dan yang tak kalah penting haruslah ringan.

Sitemap / Daftar isi yang akan Kang Fatian bagikan kali ini ialah daftar isi yang sedikit berbeda dari kebanyakan daftar isi yang ada, Daftar isi kali ini sudah Kita lengkapi dengan menu pilihan (opsi) bagi pengunjung untuk melihat-lihat artikel, menu pilihan . Sehingga pengunjung akan lebih mudah dan cepat dalam mencari artikel yang pengunjung butuhkan.

Memasang daftar isi pada blog menurut saya baik untuk SEO (Search Engine Optimization). Karena dengan memasang daftar isi pada blog, mesin pencari bisa lebih meningkatkan kemampuanya untuk mengindeks blog anda sehingga blog anda akan lebih di nilai oleh Google.

Cara membuat dan memasang Daftar isi di Halaman Statis Blog:

Demo  

Masuk ke Dasboard blog

    Pilih menu Laman --> Buat Laman Baru

    Kemudian Klik tombol HTML jangan Compose

    Lalu Masukan script di bawah ini :

<style scoped="" type="text/css">
.table-of-content{background-color:#222;color:#ddd;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,.1)}
.table-of-content .toc-header{color:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#333;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial}
.table-of-content .toc-header:hover{background-color:#3a3a3a}
.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{background:#3a3a3a;color:#fff}
.table-of-content .toc-header.active:before{border-color:#fff 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:#222!important;transition:initial}
.table-of-content a{color:#aaa;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#666;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#fff;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://kangfatian.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#009fef;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://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>

Beri judul laman sesuai keinginan kalian, seperti contoh: Daftar Isi, Sitemap, Daftar Post , dan lain-lain.

Jika semua dirasa sudah siap, silahkan klik PUBLIKASIKAN.

Catatan : Ganti Url yang yang saya tandai warna merah dengan Url Blog teman-teman.

 baca juga :
Cara memasang widget musik atau lagu di Blog
Cara membuat sitemap otomatis pada template Viomagz
Cara menghilangkan gambar obeng dan tang di blog
15 Cara mempercepat Loading Blog agar lebih SEO
Cara memasang anti copas di blog dengan peringatan terbaru

Penutup

Itulah Tutuorial  Cara membuat dan memasang Daftar Isi di blog dengan variasi Menu kali ini, semoga bisa berguna dan bermanfaat, dan juga membantu teman-teman yang ingin membuat Daftar isi di Blog nya, jangan lupa untuk share artikel ini dan dukung terus blog ini agar tetap eksis. selamat mencoba dan salam sukses.

Subscribe to receive free email updates: