Pada artikel kali ini kita akan membahas tentang Cara Membuat Daftar Isi Dengan Menu Accordion di Blog Mudah Dijamin Pasti Bisa Berdasarkan Label. Kita ketahui bersama bahwa daftar isi atau sitemap merupakan salah satu elemen penting yang harus ada di dalam sebuah blog, oleh karena berguna untuk mempermudah pengunjung atau pembaca mengeksplorasi semua konten-konten yang ada di blog kita. Pada artikel ini kita akan membahas bagaimana membuat daftar isi atau sitemap dengan tampilan yang lebih menarik yakni dengan menggunakan menu accordion.
Baca juga: Cara Membuat Related Post Bergambar Tanpa Edit HTML Blog
Selain bermanfaat untuk memperindah tampilan menu daftar isi blog, menu accordion ini juga bermanfaat untuk memperingkas atau dapat meminimalis tampilan seluruh isi blog. Sistem kerja dari menu ini mirip dengan sistem kerja tab view, ketika anda meng-klik salah satu label atau kategori yang ada pada blog (satu pilihan) maka label yang lain (pilihan lain) akan tertutup secara otomatis. Perbedaannya hanya terletak pada posisi listnya, menu accordion berbentuk vertikal sedangkan tab view berbentuk horizontal.
Berikut tampilan daftar isi dengan menu accordion yang dapat anda terapkan pada blog anda :
 |
| Daftar isi blog otomatis |
Berikut adalah Cara Membuat Daftar Isi dengan Menu Accordion Berdasarkan Label di Blog :
- Pertama silahkan login ke akun blogger anda.
- Pada Dashboard atau menu blogger, silahkan pilih menu Halaman Statis atau Static Page atau Laman.
- Setelah terbuka silahkan klik Halaman atau Laman baru
- Pada menu editor silahkan isi judul dengan Daftar Isi.
- Pada kolom edit teks, pilih mode HTML, selanjutnya copy paste kode-kode yang ada di bawah :
Kode Daftar Isi atau Sitemap dengan Menu Accordion:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harmansyah/harmansh-css/6af1f95a/accordion-yellow-skin.css" rel="stylesheet"></link>
<div class="table-of-content" id="table-of-content"><span class="loading">Memuat...</span></div>
<div class="credit-link"><a href="#" title="Accordion TOC by Harmansyah">▶ Accordion TOC</a></div>
<script>
var toc_config = {
url: '//rozisenirupa.com',
containerId: 'table-of-content',
showNew: 10,
newText: ' – <strong style="font-weight:bold;font-style:italic;color:red;">New!</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/harmansyah/harmansh-css/6af1f95a/accordion.js"></script>
Baca juga: Cara Membuat Megamenu Blog
Catatan: Teks rozisenirupa.com berwarna merah, silahkan anda ganti dengan alamat URL blog atau website anda.
Jika semua sudah terisi dengan benar, silahkan klik Publikasikan.
Selesai, selamat sekarang blog anda telah memiliki daftar isi yang unuk dan keren.