Cara Membuat Daftar Isi Blog Keren

Daftar isi buku menggunakan sortir label dan posting terbaru

Lihat Demo

Seperti Judul Postingan saya Cara Membuat Daftar isi Blog keren. Lihat dulu Demonya di atas. Bila kalian berminat dan suka dengan tampilannya, silahkan saya bagi scriptnya di bawah ini. Simak baik-baik ya..
 

Cara pemasangan

Cara pemasangan menu daftar isi ini sangat mudah cukup masukkan script dibawah ini pada laman kosong atau posting terbaru pada blog anda dan beri judul terserah anda mau dikasi judulnya apa.

<style type='text/css'>
#resultDesc {
    margin:0 30px;
    padding:0 0;
    border-bottom:4px solid #31353e;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#D64D52;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 30px;
    padding:0 0;
    overflow:hidden;
    position:relative;
    border:1px solid #3d464f;
    border-top:none;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
    content:"";
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    background-color:#3d464f;
}
#feedContainer li {
    list-style:none;
    margin:0 0;
    padding:0 0;
    border-top:1px solid #3d464f;
    color:#999;
    width:50%;
    float:left;
    display:inline;
}
#feedContainer li .inner {
    margin:15px 16px;
    height:120px;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#5687B8;
}
#feedContainer li a:hover {
    text-decoration:none;
    color:#eee;
}
#feedContainer li a.toc-title {
    font-weight:bold;
    font-size:12px;
    margin:0 0;
}
#feedContainer li .news-text {
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:4px 4px;
    background-color:#222;
    border:1px solid #111;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 0 #444;
    -moz-box-shadow:0 1px 0 #444;
    box-shadow:0 1px 0 #444;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
    background-color:#111;
    padding:0 0;
    color:#999;
    text-decoration:none;
    display:block;
}
#feedNav a:hover, #feedNav a:active {
    background-color:black;
    color:white;
    border:none !important;
}
#feedNav span {
    cursor:wait
}
#table-outer {
    padding:7px 10px;
    margin:30px 30px 0;
}
#table-outer input {
    display:inline-block;
    vertical-align:top;
    margin:0 2px 0 0;
    padding:0 0;
}
#table-outer table {
    border:none
}
#table-outer td {
    padding:2px 2px;
    border:none;
}
#table-outer label {
    font-weight:bold;
    color:#999;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
    display:block;
    text-align:right;
    margin:0 10px 0 0;
}
#table-outer select[disabled] {
    opacity:.4
}
#postSearcher {
    display:block;
    margin:0 0;
    padding:0 0;
}
#postSearcher input, #table-outer select {
    width:180px;
    background-color:#111;
    border:none;
    display:block;
    margin:0 0;
    padding:5px 5px;
    font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
    text-transform:uppercase;
    color:#777;
    outline:none;
    -webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    -moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
    width:170px;
    padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
    background-color:#090909
}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>

<script type='text/javascript'>
//<![CDATA[
var tocConfig = {
 url: "http://nama-blog.blogspot.com",
 feedNum: 30,
 labelName: false,
 numChars: 270,
 thumbWidth: 80,
 navText: "Berikutnya &#9660;",
 frontText: "Atas &uArr;",
 resetToc: "Reset",
 noImage: "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
 loading: "<span>Memuat...</span>",
 searching: "<span>Mencari...</span>",
 noResult: "Tak Ditemukan"
};
//]]>
</script>

<div id="table-outer">
    <table border="0">
        <tbody>
            <tr>
                <td>
                    <label for="orderFeedBy">Urutkan artikel berdasarkan:</label>
                </td>
                <td>
                    <select id="orderFeedBy">
                        <option value="published" selected>POSTING TERBARU</option>
                        <option value="updated">POSTING DIPERBAHARUI</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="labelSorterSelect">Filter artikel berdasarkan kategori:</label>
                </td>
                <td><span id="labelSorter"><select id="labelSorterSelect" disabled><option selected>MEMUAT...</option></select></span>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="feed-q-box">Cari dengan kata kunci:</label>
                </td>
                <td>
                    <form id="postSearcher">
                        <input type="text" id="feed-q-box">
                    </form>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<header id="resultDesc"></header>
<ul id="feedContainer"></ul>
<div id="feedNav"></div>
<script type="text/javascript" src="http://reader-hosting.googlecode.com/svn/trunk/advancedToc.js"></script>

Silahkan anda edit CSS diatas sesuaikan warnanya dengan blog anda, jika semua sudah selesai jangan lupa untuk mempublikasikannya kemudian lihat hasilnya.

Pengaturan

Opsi	Nilai	Keterangan
url	http://nama-blog.blogspot.com	Ganti nilainya menjadi url blog anda.
feedNum	30	Ganti nilainya menjadi, misal 40 jika Anda ingin menampilkan jumlah artikel lebih dari 30.
labelName	false	Jika bernilai false, akan menampilkan artikel berdasarkan posting terbaru. Dan jika anda ingin menampilkan berdasarkan kategori ganti nilainya menjadi nama label anda, misal Code Snippet
	Nama label
numChars	270	Digunakan untuk menentukan jumlah potongan snippet posting.
thumbWidth	80	Digunakan untuk menentukan ukuran besar kecil thumbnail/gambar posting.
navText	Berikutnya	Digunakan untuk memanggil posting berikutnya.
frontText	Atas	Digunakan untuk memberitahukan jika post uda mencapai batas.
resetToc	Reset	???
noImage	http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg	Digunakan untuk menggantikan posting yang tidak memiliki gambar.
loading	Memuat	Tulisan yang akan muncul pada saat posting selanjutnya terpanggil.
searching	Mencari	Sedang mencari post
noResult	Tak Ditemukan	Post tidak ditemukan.

Pembaharuan: Jika yang diatas gagal atau tidak berpungsi coba gunakan yang dibawah ini.

<style type='text/css'>
#table-outer {
  padding:7px 10px;
  margin:30px 30px 0;
}
#table-outer table {
  width:80%;
  margin:0;
}
#table-outer form {font:inherit;}
#table-outer td {padding:2px 2px;}
#table-outer label {
  font-weight:bold;
  color:#999;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  display:block;
  text-align:right;
  margin:0 10px 0 0;
  padding:4px 0 0;
}
#table-outer select[disabled] {opacity:.4;}
#post-searcher {
  display:block;
  margin:0;
  padding:0;
}
#table-outer input,#table-outer select {
  width:100%;
  background-color:#111;
  border:none;
  display:block;
  margin:0;
  padding:5px 5px;
  font-size:86%;
  text-transform:uppercase;
  color:#777;
  outline:none;
  -webkit-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  -moz-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
}
#table-outer input:focus,#table-outer select:focus {background-color:#090909;}
#feed-container {
  display:block;
  clear:both;
  margin:0 30px;
  padding:0;
  list-style:none;
  overflow:hidden;
  position:relative;
  border:1px solid #3c3c3c;
  border-top:none;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
#feed-container:after {
  content:"";
  display:block;
  width:1px;
  height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  background-color:#3c3c3c;
}
#feed-container li {
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #3c3c3c;
  color:#999;
  width:50%;
  float:left;
  display:inline;
}
#feed-container li .inner {
  margin:15px 16px;
  height:116px;
  overflow:hidden;
  word-wrap:break-word;
  text-overflow:ellipsis;
}
#feed-container li a {
  text-decoration:none;
  color:#5687B8;
}
#feed-container li a:hover {
  text-decoration:none;
  color:#eee;
}
#feed-container li a.toc-title {font-weight:bold;}
#feed-container li .news-text {margin:10px 0 0;}
#feed-container li img {
  margin:0 10px 5px 0;
  padding:5px;
  background-color:#222;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  float:left;
}
#result-desc {
  margin:0 30px;
  padding:0;
  border-bottom:4px solid #303030;
}
#result-desc span,#result-desc div {
  display:block;
  margin:0;
  padding:5px 10px 7px;
  color:#D64D52;
}
#result-desc div {color:inherit;}
#feed-nav {
  margin:10px 30px 0;
  text-align:center;
  font-weight:bold;
  text-transform:uppercase;
}
#feed-nav a,#feed-nav span {
  background-color:#111;
  padding:0;
  color:#999;
  text-decoration:none;
  display:block;
  height:30px;
  line-height:32px;
}
#feed-nav a:hover,#feed-nav a:active {
  background-color:black;
  color:white;
}
#feed-nav span {cursor:wait;}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>
<div id="table-outer">
    <table border="0">
        <tbody>
            <tr>
                <td>
                    <label for="feed-order">Urutkan artikel berdasarkan:</label>
                </td>
                <td>
                    <select id="feed-order">
                        <option value="published" selected>POSTING TERBARU</option>
                        <option value="updated">POSTING DIPERBAHARUI</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="label-sorter">Filter artikel berdasarkan kategori:</label>
                </td>
                <td>
                    <select id="label-sorter" disabled>
                        <option selected>MEMUAT...</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="feed-q">Cari dengan kata kunci:</label>
                </td>
                <td>
                    <form id="post-searcher">
                        <input type="text" id="feed-q">
                    </form>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<header id="result-desc"></header>
<ul id="feed-container"></ul>
<div id="feed-nav"></div>
<script type="text/javascript" src="http://reader-hosting.googlecode.com/svn/trunk/neW-advancedToc.js"></script>

 Baiklah sekian dulu postingan kali ini, jangan lupa baca juga artikel lainnya di Nyiaran Blog.

Sumber Artikel: http://www.dhf.web.id/2013/07/membuat-menu-daftar-isi-buku-keren-pada.html