Cara Membuat Daftar Isi atau Sitemap Buka Tutup

Cara Membuat Daftar Isi atau Sitemap Buka Tutup

Daftar Isi atau Sitemap Buka Tutup

Santaibareng.net. Kali ini Santai Bareng akan membagikan Cara Membuat Daftar Isi atau Sitemap Buka Tutup.

Daftar isi atau Sitemap ini berfungsi untuk membuat halaman khusus yang menampilkan daftar isi dari artikel yang telah di publikasikan.

Banyak sekali pengunjung blog yang kadang kala ingin membaca sitemap atau daftar isi blog. Hal ini akan memudahkan pengunjung untuk membaca semua postingan sobat. Selain itu, membuat sitemap atau daftar isi blog, akan menambah kesan profesional dari blog itu sendiri. OK langsung saja.
Berikut Cara Membuat Daftar Isi atau Sitemap Buka Tutup :
1. Buka akun blogger sobat.
2. Pilih menu laman > Klik Laman Baru.
Daftar Isi atau Sitemap Buka Tutup

3. Ubah tab Compose menjadi HTML serta beri judul Laman.
Daftar Isi atau Sitemap Buka Tutup

4. Terapkan kode 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:#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: 'http://santaibareng.net',
containerId: 'table-of-content',
showNew: 15,
newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:12px;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://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>


Keterangan :
5. Publikasikan dan selesai.

Baca juga : Membuat Daftar Isi atau Sitemap Sederhana

Gimana sobat ? Mudah kan.
OK, sekian dulu. Selamat mencoba semoga berhasil dan bermanfaat.
Terima kasih.

Loading...

Share This :