Cara Membuat Daftar Isi Super keren di Blog

Cara Membuat Daftar isi Super keren

MAS IMAM - Kali ini sayaakan berbagi cara untuk membuat daftar isi super keren,

simak baik - baik caranya ya sobat ,dibawah ini :

1. Log in ke Blogger
2. Masuk Dashboard = Pilih Template = Edit HTML
3. Letakan Kode CCS dibawah ini ,di atas  ]]></b:skin>

#main-wrapper {980px;}
#tabbed-toc {  margin:-20px 0 0 0;  background-color:#F1F1F1;  overflow:hidden;  position:relative;  color:#333;}
#tabbed-toc .loading {  display:block;  padding:5px 10px;  width:200px;  font:normal 400 14px/normal coda;  color:red;  text-align:center;}
#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 400 12px/28px coda;  height:28px;  overflow:hidden;  text-overflow:ellipsis;  color:#222;  text-transform:uppercase;  text-decoration:none;  padding:0 12px;  cursor:pointer;}
#tabbed-toc .toc-tabs li a:hover {  background-color:#222;  color:white;}
#tabbed-toc .toc-tabs li a.active-tab {  background-color:#666;  color:white  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;}
#tabbed-toc .panel {  position:relative;  z-index:5;  font:normal normal 10px/normal coda;}
#tabbed-toc .panel li a {  display:block;  position:relative;  font-weight:400;  font-size:12px;  color:#892412;  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:red;  float:right;}
#tabbed-toc .panel li .summary {  display:block;  padding:10px 12px 10px;  font-style:italic;  border-bottom:4px solid #666;  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:#FFE8E3;}
#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:#369;}
@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:#333;  }  #tabbed-toc .toc-tabs li a.active-tab {    background-color:#444;    color:#222;  }  #tabbed-toc .toc-content {    border:none;  }  #tabbed-toc .divider-layer,  #tabbed-toc .panel li time {    display:none;  }}

     4. Simpan Template dan Pilih Laman
     5. Pilih Laman Baru ,Jika belum punya

     6. Kemudian ,Pilih HTML dan masukan kode dibawah ini di HTML

<br />
<div id="tabbed-toc">
<span class="loading">Tunggu Sebentar ...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://masimam11.blogspot.com", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: true, // `true` to show the post date
    showSummaries: true, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: true, // `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: " - <em style='color:red;'>Terbaru!</em>" // HTML for the "New!" text
};
    </script>
    <script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script>

     7. Ganti warna Biru ( Terserah Sobat )
         Ganti warna Merah dengan URL Blog sobat

Tweet