DurfMSu0Qxmk2O77Srei8VZ6q4jtkNf1l2GZimEB
Bookmark

Cara Membuat Daftar Isi atau Sitemap Mode Buka Tutup

Cara Membuat Daftar Isi atau Sitemap Mode Buka Tutup

Kali ini Santai Bareng NET 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.

Oh iya, nanti sobat juga bisa mencoba Cara Membuat Widget Mengikuti Scroll atau Sticky Widget pada Blog untuk mempercantik tampilan blog.

Cara Membuat Daftar Isi atau Sitemap Buka Tutup

1. Buka akun blogger.
2. Pilih menu Halaman - Buat Laman Baru.

  Cara Membuat Daftar Isi atau Sitemap Buka Tutup

3. Ubah tab Compose menjadi HTML serta beri judul Halaman tersebut.
 
Cara Membuat Daftar Isi atau Sitemap Buka Tutup


4. Terapkan kode script berikut di dalam text editor:

<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.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>{codeBox}

Ganti www.santaibareng.net dengan URL blognya sobat.{alertInfo}

5. Publikasikan dan lihat hasilnya.

Selanjutnya, sobat juga bisa mencoba trik Cara Membuat Tampilan Kotak Label Menjadi 2 Kolom dan 3 Kolom di Blog agar tampilan blog menjadi lebih simple dan rapi.

Sekian tutorial blogger pemula mengenai Cara Membuat Daftar Isi atau Sitemap Buka Tutup. Semoga bermanfaat!
Source: Arlindzgn.com