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.
2. Pilih menu laman > Klik Laman Baru.
3. Ubah tab Compose menjadi HTML serta beri judul Laman.
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 :
- Ganti http://santaibareng.net dengan URL blognya sobat.
Baca juga : Cara Membatasi Jumlah Postingan di Halaman Pencarian Blog
Gimana sobat ? Mudah kan.
OK, sekian dulu. Selamat mencoba semoga berhasil dan bermanfaat.