Membuat Menu Daftar Isi Buku Keren Pada Blog

Sebelumnya saya juga pernah membahas artikel tentang membuat atau memasang widget daftar isi pada blog dengan judul artikel Cara Membuat Daftar Isi Pada Blog Dengan JQuery dan kali ini saya akan kembali membagikan daftar isi blog yang juga saya gunakan di blog ini.

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.