Membuat Daftar Isi Navigasi 2 Kolom

Pada kesempatan kali ini, saya akan memposting tentang daftar isi. Widget ini original dari dte.web.id dan dimodifikasi menjadi 2 kolom oleh mdf-blog.blogspot.com. Jadi saya di sini cuma men share nya saja -_- hehehe.
Langsung saja ke tutorial nya.

Masuk ke Tata Letak dan tambahkan satu buah elemen HTML/Javascript.

Masukkan kode ini di dalam nya.

 
<style type='text/css'>

#toc-outer {

  color:black;

  font:normal 11px/14px Arial,Sans-Serif;

  height:auto;

  margin:0 auto;

  overflow:hidden;

  padding:0;

  text-align:left;

}

#loadingscript {

  background:transparent url(&#39;

  http://3.bp.blogspot.com/-Z0w4M80kNoE/Tz4_RrLC4fI/AAAAAAAACJY/2mQ2yk5hCdU/s1600/loading.gif&#39;

  ) no-repeat 50% 45%;

  font-weight:bold;

  font-size:20px;

  height:345px;

  padding:30px 0;

  text-align:center;

  text-indent:-99999px;

}

.itemposts {

  background-color:#fff;

  border:1px solid #ccc;

  -moz-border-radius:2px;

  -webkit-border-radius:2px;

  border-radius:2px;

  float:right;

  height:130px;

  margin:0 1% 5px;

  overflow:hidden;

  position:relative;

  padding:1%;

  width:45%;

}

.itemposts h6 {

  -moz-border-radius:5px;

  -webkit-border-radius:5px;

  border-radius:5px;

  border-bottom:2px solid #333;

  color:#333;

  font:bold 11px/16px Sans-Serif;

  height:15px;

  margin:0 0 5px;

  overflow:hidden;

  padding:2px 6px !important;

  text-transform:none;

}

.itemposts h6 a:hover {

  color:#AD3000;

  text-decoration:none;

}

.itemposts img {

  background-color:#fff;

  border:1px solid #ccc;

  -moz-border-radius:3px;

  -webkit-border-radius:3px;

  border-radius:3px;

  float:left;

  height:65px;

  margin:0 7px 5px 0;

  padding:3px;

  width:65px;

  z-indent:99999px;

}

.itemposts .iteminside {}

.itemposts .itemfoot {

  border-radius:5px;

  -moz-border-radius:5px;

  -webkit-border-radius:5px;

  border-top:2px solid #333;

  padding:3px;

  clear:both;

  background-color:#fff;

  color:333;

  overflow:hidden;

}

.itemposts .itemfoot a.itemrmore {

  color:#333;

  float:right;

  font-weight:bold;

  text-decoration:none;

}

.itemposts .itemfoot a.itemrmore:hover {text-decoration:underline}

#itempager {

  clear:both;

  padding:10px 0;

}

#halaman,

#totalposts {

  color:#000;

  display:block;

  font:bold 10px Verdana,Arial,Sans-Serif;

  margin-bottom:10px;

  text-align:center;

  padding:0;

}

#halaman span,

#halaman a {

  background-color:#666;

  color:#fff;

  display:inline;

  margin:0 1px;

  padding:3px 5px;

  text-indent:0;

  text-decoration:none;

}

#halaman a:hover {background-color:#333}

#halaman span.actual {background-color:black}

#halaman span.hidden {display:none}

</style>

<script type='text/javascript'>

//<![CDATA[

var showPostDate   = true,

    showComments   = true,

    idMode         = true,

    sortByLabel    = false,

    labelSorter    = "",

    loadingText    = "Loading...",

    totalPostLabel = "Jumlah posting:",

    jumpPageLabel  = "Halaman",

    commentsLabel  = "Komentar",

    rmoreText      = "Selengkapnya &#9658;",

    prevText       = "Prev",

    nextText       = "Next",

    siteUrl        = "http://nama-blog.blogspot.com",

    postsperpage   = 4,

    numchars       = 150,

    imgBlank       = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";

//]]>

</script>
<script src="https://mbah-siyam.googlecode.com/svn/trunk/daftar-isi.js"></script>

klik simpan. 

Pengaturan.

var showPostDate   = true, //menampilkan waktu terbit post
    showComments   = true, //menampilkan jumlah komentar
    idMode         = true, //Indonesian language
    sortByLabel    = false, //berdasarkan label
    labelSorter    = "", //tuliskan nama label jika hanya menampilkan artikel dg lebel tertentu
    loadingText    = "Loading...", //ketika animasi loading tidak muncul
    totalPostLabel = "Jumlah posting:", //tulisan jumlah posting
    jumpPageLabel  = "Halaman", //tulisan halaman
    commentsLabel  = "Komentar", //tulisan komentar/comment
    rmoreText      = "Selengkapnya ►", //tulisan readmore
    prevText       = "Prev", //sebelumnya
    nextText       = "Next", //selanjutnya
    siteUrl        = "http://nama-blog.blogspot.com", //ganti dengan alamat blog anda
    postsperpage   = 4, //jumlah artikel yang tampil per page
    numchars       = 150, //jumlah karakter huruf yang tampil setiap artikel
    imgBlank       = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg"; //gambar yang tampil jika post tidak terdapat gambar ataupun gambar tidak bisa ditampilkan

 Semoga bermanfaat

Source
http://mdf-blog.blogspot.com/2013/02/daftar-isi-navigasi-2-kolom.html