Cara Membuat Daftar Isi Keren Model Tabulasi Terbaru

Written By Adincuih on Tuesday 28 May 2013 | 06:24

Cara Membuat Daftar Isi Keren Model Tabulasi Terbaru - Hari ini saya akan kembali membahas mengenai Trik Blogger, dimana sebelumnya sudah dibahas mengenai Cara Ampuh Mengatasi Peringatan: Missing required field "updated".

Daftar Isi pada Web/Blog disebut sebagai Sitemap atau Table Of Content (TOC) yang berfungsi merangkum semua artikel-artikel yang telah di posting baik itu menurut label atau tanggal/bulan/tahun. Daftar Isi juga berguna untuk memudahkan para pengunjung guna menemukan artikel-artikel yang mereka cari. 

Disini saya akan membahas tentang bagaimana Cara Membuat Daftar Isi Keren Model Tabulasi Terbaru dengan tampilan yang menarik, keren, ringan, dan juga sangat mudah dalam pemasangannya. Untuk itu langsung saja silahkan dilihat tutorialnya di bawah.



Langkah-langkah :

  • Memasang Daftar Isi Pada Laman Blog
1. Login ke Blog
2. Buat Laman baru


3. Copy kode di bawah dan pastekan pada tab Html pada laman tersebut

<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>

<br />
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://sotosop-tutorial.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 src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script>

Keterangan :
  • Ganti URL berwarna biru di atas dengan URL blog anda
  • showDates: false : ganti menjadi true jika ingin menampilkan waktu postingan
  • showSummaries: false : ganti menjadi true jika ingin menampilkan ringkasan singat postingan
  • showThumbnails: false : ubah menjadi true jika ingin menampilkan gambar
  • newTabLink: true : ubah menjadi false jika anda ingin membuka link pada tab yang sama
  • maxResults: 99999 : adalah jumlah maksimal postingan yang ditampilkan



Langkah diatas jika anda ingin menempatkan daftar isi pada laman blog, dan anda juga bisa menempatkannya pada widget blog



  • Memasang Daftar Isi didalam Widget Blog
1. Login ke Blog
2. Pada Dasboard blog pilih Tata Letak - Add Gadget - HTML/Javascript
3. Lalu Pastekan kode diatas pada kolom HTML tersebut
4. Simpan


  • Memasang Daftar Isi Pada Dropdown Menu
Anda juga bisa menempatkanya pada menu dropdown pada blog anda dengan cara:

1. Login ke Blog
2. Pada Dasboard blog pilih menu Laman, Pada Opsi 'tampilkan laman sebagai' pilih Jangan tampilkan



3. Klik Lihat untuk mengambil Url Daftar Isi tersebut

4. Copy Url Daftar Isi



5. Lalu pastekan pada Menu Dropdown di dalam template anda, klik Template - Edit HTML


6. Simpan Template

Judul: Cara Membuat Daftar Isi Keren Model Tabulasi Terbaru
Rating: 100% based on 99998 ratings. 34 user reviews.
Ditulis Oleh Adincuih
Share This Article :
HATI-HATI COPY+PASTE..!!!
JIKA ANDA INGIN COPY+PASTE ARTIKEL DI BLOG INI, MAKA JANGAN LUPA MENYERTAKAN LINK SUMBERNYA

Artikel Terkait :

sotosop, Updated at: 06:24
Comments
2 Comments

2 comments:

PERHATIAN !!!

Silahkan tinggalkan komentar Anda dengan ketentuan :

1. No SPAM !!!
2. No SARA !!!
3. Tidak menempatkan link hidup, dan
4. Berkomentarlah dengan sopan

SALKOMSEL

 
Dinodai Oleh : Adin Cuih
Copyright © 2013 Sotosop - All Rights Reserved
Template Created by Creating Website
Proudly powered by Blogger