Home » » Cara Membuat Daftar Isi (Sitemap) Tabulasi untuk Blog

Cara Membuat Daftar Isi (Sitemap) Tabulasi untuk Blog

Cara Membuat Daftar Isi (Sitemap) Tabulasi untuk Blog
Cara Membuat Halaman Daftar Isi (Sitemap) Blog Keren Gaya Tabulasi.

YANG dimaksud Daftar Isi Tabulasi adalah daftar isi berbentuk tabel seperti ilustrai gambar di samping.

Contoh atau demonya bisa dilihat di Sitemap Tabulasi. Keren 'kan?

Tipe atau bentuk daftar isi berupa tabulasi ini dibagi oleh DTE. Anda bisa kunjungi langsung ke sana untuk mendapatkan kodenya, lengkap dengan kode CSS dan Javascript yang bisa diunduh.

Sebelumnya, CB sudah share tentang cara membuat daftar isi blog yang bentuknya sederhana, per kategori, seperti di Sitemap Per Kategori atau berdasarkan Label.

Anda tinggal pilih, mau sitemap berupa tabulasi atau daftar isi "konvensional". CB sih bikin dua-duanya, namanya juga Contoh Blog (CB), jadi nyontohin dong :)

Cara Membuat Daftar Isi (Sitemap) Tabulasi

1. Page > New Page
2. Isi kolom judul dengan Daftar Isi atau Sitemap
3. Pilih mode HTML

mode html page daftar isi blog


4. Copy & Paste Kode Berikut ini di kolom konten. Ganti alamat blognya dengan alamat blog Anda.

<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://www.contohblog.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>

5. Klik "Publish!

Selamat, kini blog Anda sudah dilengkapi Peta Situs (Sitemap), Table of Content (TOC), alias Daftar Isi sebagai menu, navigasi, sekaligus internal link blog Anda!

Update:
Semula kode CSS dan JavaScript daftar isi tabulasi nan keren di atas disimpan di Google Code yang sekarang sudah dihentikan Si Mbah, sehingga kode sitemap tabulasi tersebut tidak work alias gak muncul. Kini link kode tersebut sudah diupdate dengan kode baru di atas.

Itu dia Cara Membuat Daftar Isi (Sitemap) Tabulasi untuk Blog platform Blogspot. Good Luck & Happy Blogging! (http://www.contohblog.com).*

Thanks for reading & sharing Cara Membuat Daftar Isi (Sitemap) Tabulasi untuk Blog

Previous
« Prev Post

16 comments:

Comment Page:
  1. Sitemap yang menarik dan saya sudah terapkan, tapi kenapa ya postingan yang tahun 2012 ga muncul?

    ReplyDelete
  2. Makasih Gan, dah mau berbagi,
    ini sangat membantu saya gan..

    ReplyDelete
  3. makasih gan....CB baik bgt share semuanya...!

    ReplyDelete
  4. Bwahahaha dari tadi 2 jam habis ngulik-ngulik cara buat SITE MAP, akhirnya dibahas juga.. Makasih min!

    ReplyDelete
  5. halo cb, saya pembaca setia blog cb nih
    mau tanya, saya coba terapkan sitemap nya di blog testing saya, tp ko label yg muncul nya cuma 1 kata ya? misal di cb kan ada "bisnis online" nah yg tertampil cuma "bisnis" nya aja, gimana caranya supaya muncul 2 kata? sy udh coba cek .css nya tp belum ketemu yg harus di ganti

    ReplyDelete
  6. Bisa ganti warna nggak, jadi warna orange?

    ReplyDelete
    Replies
    1. Bisa.... pendukung Persija ya? :)

      Delete
    2. bagaimana cara ganti warnanya?

      Delete
    3. ganti di kode javascript

      Delete
  7. klo labelnya sesuai keinginan kita bisa ga...
    misalkan saya hanya mau label tentang SEO, blog, HTML, CCS.

    ReplyDelete
    Replies
    1. http://contohblognih.blogspot.co.id/2015/09/daftar-isi-blog-label-tertentu-pilihan.html

      Delete
    2. masih belum bisa min,,,
      maksud saya sitemap tabulasi ini, labelnya sesuai keinginan kita saja...

      Delete
  8. Gan, udah saya coba tapi kok posting gak muncul hanya muncul "memuat....."

    ReplyDelete
    Replies
    1. gak cocok berarti, biasanya ada bentrok dengan kode yg sudah ada

      Delete
  9. Gan, sipp..... udah bisa setelah diutak atik, trimaksh. Trs ganti warna label, judul posting disitemap gan, gimana harus belajar js dulu ya ? hee sorry, orang baru di dunia blogging.

    ReplyDelete
  10. terima kasih gan, sangat membantu sekali.. sudah saya terapkan di blog ane dan sangat apikkkk

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox