Membuat Daftar Isi Otomatis Menurut Label

Untuk memudahkan para pengunjung blog kita, yang kebingungan mencari artikel yang mereka butuhkan namun lupa judulnya ataupun galau mau mulai darimana.

Inilah suatu cara membantu para pengunjung blog yang kebingungan itu dengan cara menciptakan halaman Daftar Isi atau Sitemap artikel blog kita.

Untuk memudahkan para pengunjung blog kita Membuat Daftar isi Otomatis Berdasarkan Label

Daftar isi atau sering di sebut sitemap ini, dapat membantu para pengunjung blog kita yang mecari artikel yang mereka butuhkan

Sitemap juga dapat di fungsikan untuk menginformasikan kepada search engine ( Google contohnya ) perihal halaman-halaman pada situs kita yang dapat di crawl.

Bentuk paling sederhana Sitemap ialah berupa file .xml yang berisi daftar url sebuah situs beserta metadata-nya masing-masing. Metadata contohnya : kapan terakhir di-update.

Biasanya file sitemap.xml ini sudah otomatis ada dan dapat sahabat lihat melalui URL ini:

http://URLDOMAINMU.com/sitemap.xml

Penampakan file sitemap.xml tersebut kurang lebih ibarat ini:

Untuk memudahkan para pengunjung blog kita Membuat Daftar isi Otomatis Berdasarkan Label

Sitemap dapat kita buat di halaman statis blog kita dengan cara berikut ini.

Widget yang aku bagikan ini merupakan hasil modifikasi dari widget yang dibentuk oleh Arlina Design di blognya www.arlinadzgn.com.

Ok, Langsung saja berikut caranya :

Membuat Daftar isi Otomatis Berdasarkan Label


1. Buka Dasbor Blogger.
2. Buka Menu Halaman kemudian buat Halaman Baru. 
3. Pindah ke HTML Lalu masukkan instruksi berikut:

<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:#4e6cef} .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:#4e6cef;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://turuninsay.blogspot.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/Deny-Listianto/tips/master/Sitemap1.js"></script> </div> 

Ganti Kode url: 'https://turuninsay.blogspot.com' dengan url blog sobat, dan showNew: 15 ialah jumlah artikel yang akan di tampilkan dengan goresan pena Baru/New

Terakhir Publikasikan dan lihat hasilnya.


Demikian tutorial Membuat Daftar isi Otomatis Berdasarkan Label, biar bermanfaat, biar bermanfaat.
Sumber https://www.denylistianto.com/

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel