Cara Membuat Daftar Isi Dengan Menu Accordion di Blog Mudah Dijamin Pasti Bisa

Daftar isi blog otomatis

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.

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 :

Berikut adalah Cara Membuat Daftar Isi dengan Menu Accordion Berdasarkan Label di Blog :

1. Pertama silahkan login ke akun blogger anda.
2. Pada Dashboard atau menu blogger, silahkan pilih menu Halaman Statis atau Static Page atau Laman.
3. Setelah terbuka silahkan klik Halaman atau Laman baru
4. Pada menu editor silahkan isi judul dengan Daftar Isi.
5. 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: ' &ndash; <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>

Hasilnya

Memuat...

▶ Accordion TOC

ARTIKEL TERBARU