Cara Membuat Daftar Isi Model Tabulasi Di Blog

Scholovers Blogger | Hai sobat Blogger hari ini admin mau posting Cara Membuat Daftar Isi Model Tabulasi Di Blog. Daftar isi seperti ini memudahkan buat para pengunjung blog sobat melihat semua daftar postingan blog sobat. selain itu, tampilan nya juga keren, Langsung aja Sobat  ikuti langkah-langkah nya.

DAFTAR ISI (MODEL 1)
  • Tahap Pertama yang Sobat harus lakukan yakni login ke akun blogger sobat
  • Selanjutnya buat sebuah postingan baru, baik itu pada halaman statis ataupun biasa dan kalau sudah terbuka, lihat pada sudut kiri atas. Disana terdapat 2 tab dimana yang satu bertuliskan "Compose" dan yang satunya lagi "HTML" dan sekarang klik bagian/tulisan HMTL Tersebut. Namun jika sobat masih bingung, lihat gambar di bawah ini untuk lebih jelasnya.
Cara Membuat Daftar Isi Tampilan Tabulasi Keren
  • Copy kode di bawah ini dan pastekan pada tab HTML yang sudah sobat buka sebelumnya.
<style type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#8A94F0;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#000;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Tahoma,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Tahoma,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#C4C9F8;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#181D67;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #181D67;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#051466;
  line-height:20px;
  height:20px;
  padding:0 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 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#eee;
}
#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:#999;
  color:none;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@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:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    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 .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Tahoma,Sans-Serif;text-decoration:none;margin:9px;" href="http://www.lost-sector.net/2013/03/daftar-isi-tabulasi-untuk-blogger.html" title="Tabbed TOC">Lsc</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://fauzischolovers.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: false,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>
Code Source : www.dte.web.id/
Pengaturan :
  1. Ganti URL berwarna biru di atas dengan URL blog sobat
  2. showDates: false : ganti menjadi true jika ingin menampilkan waktu postingan
  3. showSummaries: false : ganti menjadi true jika ingin menampilkan ringkasan singat postingan
  4. showThumbnails: false : ubah menjadi true jika ingin menampilkan gambar
  5. newTabLink: true : ubah menjadi false jika sobat ingin membuka link pada tab yang sama
  6. maxResults: 99999 : adalah jumlah maksimal postingan yang ditampilkan
Setelah sobat sudah merasa cukup melakukan pengaturanya, langkah selanjutnya adalah simpan atau pratinjau untuk melihat hasilnya.

DAFTAR ISI (MODEL 2)
  • langkah - langkah nya sama seperti DAFTAR ISI (MODEL 1), tetapi yang di ganti hanya kode HTML nya saja.
  • Copy kode di bawah ini dan pastekan pada tab HTML yang sudah sobat buka sebelumnya.

    <br />
    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://www.blogger.com/blogger.g?blogID=6984301103846628017" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><link href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" media="screen" rel="stylesheet" type="text/css"></link>

    <script type="text/javascript">
    var showNew    = true,
        accToc     = true,
        openNewTab = true,
        maxNew     = 10,
        baru       = "Baru Niee !",
        sDownSpeed = 600,
        sUpSpeed   = 600;
    </script>

    <script src="http://my-project-daftari-isi.googlecode.com/files/daftar-halaman.js" type="text/javascript"></script>

    <script src="http://fauzischolovers.blogspot.com//feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

    Keterangan :

        * baru = Tulisan yang akan ditampilkan di samping judul artikel baru.
        * maxNew = Jumlah Artikel yang akan terdapat tulisan "Baru Niee !".
        * sDownSpeed = Kecepatan membuka daftar Label.
        * sUpSpeed = Kecepatan menutup daftar Label.
        * Ganti url blog yang bewarna Biru dengan url blog Sobat.
Sekian Postingan Tentang  Cara Membuat Daftar Isi Model Tabulasi Di Blog. semoga bermanfaat buat sobat School-ers Semua.

Comments