Cara Membuat Daftar Isi Tabulasi / Tabbed Di Blog

Cara Membuat Daftar Isi Tabulasi / Tabbed Di Blog
Menampilkan daftar isi blog memanglah sangat penting , karena dengan adanya daftar isi di blog kita dengan mudah bagi pengunjung blog untuk dapat melihat dan kemudian membaca ataupun mengcopy paste artikel blog kita .dan kali ini akan saya share cara membuat daftar isi blog yang begitu minimalis dengan tampilan yang amat sederhana , mau tau yuk ikuti cara membuat Daftar Isi Tabulasi / Tabbed Di blog kita

Cara Membuat Daftar Isi Tabulasi / Tabbed Di Blog :

• Sobat Blogger bisa menggunakan Entri baru Untuk Daftar isi atau juga bisa menggunakan Entri Laman
• Copy code css beserta Javascript Dibawah ini :
  untuk Warna bisa anda sesuaikan menurut selera masing masing
  
  

  <style type="text/css">
  #tabbed-toc {
    margin:0 auto;
    background-color:rgb(223,240,250);
    -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:#5e5e5e;
  }
  #tabbed-toc ul,
  #tabbed-toc ol,
  #tabbed-toc li {
    margin:0 0;
    padding:0 0;
    list-style:none;
  }
  #tabbed-toc .toc-tabs {
    width:30%;
    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:#C2EAFE;
    color:black;
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#055A85;
    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:70%;
    float:right;
    background-color:white;
    border-left:5px solid #055A85;
    -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:#4999cc;
    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 #6666CC;
    background-color:#CCE9FD;
  }
  #tabbed-toc .panel li:nth-child(even) {
    background-color:#F5F5F5;
  }
  #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:#eee;
    color:none;
    outline:none;
  }
  #tabbed-toc .panel li.bold a:hover,
  #tabbed-toc .panel li.bold a:hover time {
    background-color:red;
  }
  @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:#F5F5F5;
      -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">Load...</span></div>
  <a href="http://www.mujijayaganesha.com/" style="display: block; font: normal bold 8px Tahoma,Sans-Serif; margin: 10px; text-align: right; text-decoration: none;" title="Muji Jaya Ganesha">Muji Jaya Ganesha</a> <script type="text/javascript">
  var tabbedTOC = {
      blogUrl: "http://www.mujijayaganesha.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="https://tasyasalsabila.googlecode.com/files/tabulasi.js" type="text/javascript"></script>

• Ganti Yang Berwarna Merah Dengan Blog Sobat
• lalu Publikasikan