Cara Membuat Daftar Isi Blog & Menampilkannya di Menu

Baca Juga

Cara Membuat Daftar Isi Blog plus Cara Menampilkannya di Menu Navigasi.

DAFTAR Isi (Table of Content) disebut juga Peta Situs (Sitemap) adalah halaman khusus yang memuat daftar link posting atau konten blog.

Daftar isi sangat penting sebagai navigasi menu dan internal link, guna memudahkan pengunjung mengeksplorasi isi blog.

Tips Cara Membuat Daftar Isi Blog & Menampilkannya di Menu sudah dipraktikkan. Demonya bisa dilihat di menu Sitemap.


Cara Membuat Daftar Isi Blog
1. Klik "Page" > "New Page"

2. Isi judulnya dengan "Daftar Isi", "Sitemap", atau "Daftar Posting". Bebas lah...!
3. Klik mode "HTML" (Lihat gambar)

4. Copy & Paste kode berikut ini di kolom isi.

<link rel="stylesheet" href="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.css"/>
<div id="tabbed-toc" class="tabbed-toc"><span class="loading">Memuat&hellip;</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://blogromeltea.blogspot.com/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>

Anda juga bisa simpan sendiri kode CSS dan Javascriptnya:

• Download Kode CSS
• Download Kode JavaScript

5. Ganti alamat blog berwarna merah dengan alamat blog Anda.
6. Sebelum klik "Publish", isi dulu Deskripsnya biar SEO Friendly!

 7. Klik "Publish". Selesai!

*** Ini hanya salah satu jenis atau model daftar isi. Banyak model lainnya, Googling aja dengan kata kunci "Cara Membuat Daftar Isi Blog". Banyak pilihan lain.

CARA MENAMPILKANNYA DI MENU NAVIGASI
Menu  Navigasi yaitu jajaran menu di bawah atau di atas Header Blog, di barisan Home, About, Kontak, dsb.

Berikut ini cara menampilkan daftar isi di menu navigasi:
1. Klik "Page". Contoh di bawah ini, nama daftar isinya "Sitemap".

2. KLIN KANAN menu "Sitemap" (Daftar Isi) dan pilih "Copy link location" atau "Copy link address".

 

Itu artinya, kita mengkopi alamat atau url page daftar isi ini. Simpan di Notepad!
http://klinikblogging.blogspot.com/p/sitemap.html

3. Klik "Template" > "Edit HTML"

4. Cari (Ctrl+F) "Home" atau salah satu nama menu, hingga menemukan yang seperti ini:

 

5. Masukkan LINK yang sudah dicopy dan disimpan di Notepad tadi di menu Sitemap/Daftar Isi.

Kalau belum ada, buat linknya, dalam gambar di atas seperti ini. Begini kodenya:

<li><a href="LINK DAFTAR ISI DI SINI">Daftar Isi</a>

6. Klik "Save Template"!


Cara menampilkan daftar isi di menu ini, juga berlaku untuk menampilkan halaman statis lainnya di navigasi menu.

Demikian Cara Membuat Daftar Isi Blog & Menampilkannya di Menu. Wasalam. (http://blogromeltea.blogspot.com/).*

Sumber