June 19, 2019

Cara Membuat Daftar Isi (Sitemap) Tabulasi untuk Blog

June 19, 2019

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.

KODE LAINNYA

Berikut ini kode sitemap blog keren lainnya. Desainnya seperti ini:

Cara Membuat Daftar Isi (Sitemap) Tabulasi untuk Blog


<style type="text/css">
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
color:white;}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .toc-tabs {width:30%;float:left;}
.tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:70%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
text-decoration:none;outline:none;overflow:hidden;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #275827;overflow:hidden;}
.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
background-color:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
.post ol li::before {content: none;}
.post ol li {margin:0;}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
.tabbed-toc .toc-tabs li {display:inline;float:left;}
.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "/", // 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="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>

Itu dia Cara Membuat Daftar Isi (Sitemap) Tabulasi untuk Blog platform Blogspot.

Good Luck & Happy Blogging! (http://www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

21 comments on Cara Membuat Daftar Isi (Sitemap) Tabulasi untuk Blog

  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
  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
    Replies
    1. gimana caranya gan biar bisa memuat ?

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

    ReplyDelete
  11. makasih sekali mas.. ijin tanya unutk memsarkan hurufnya gimana ya,,???

    ReplyDelete
  12. Teriamakasih infonya sangat membantu, kunjungi juga kami di http://bit.ly/2F3UmIv

    ReplyDelete
  13. Mas saya coba kok tapi kotak tabulasinya kecil ya bagaimana cara setting ukuran kotaknya

    ReplyDelete
    Replies
    1. emang kecil, biarkan saja, tujuan utama kan buat search engine itu mah, bukan buat user

      Delete

Contact Form

Name

Email *

Message *