Cara Membuat Daftar Isi Keren Menurut Label V.2

Siapa yang tidak kenal dengan nama daftar isi, tapi bagaimana tampilannya? nah Anthzo's Blog kali ini posting mengenai Cara Membuat Daftar Isi Keren Menurut Label V.2. Lihat saja DEMO nya jika ingin melihat hasil.

Demo

Langkah-langkah :
1. Loggin ke akun Blogger
2. Klik Laman/Entri baru
3. Klik Laman Baru lalu pilih HTML [ jangan lupa beri judul ]
4. Copy paste kan code di bawah ini :

<style type="text/css">
#resultDesc {
    margin:0 30px;
    padding:0 0;
    border-bottom:4px solid #444444;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#444444;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 30px;
    padding:0 0;
    overflow:hidden;
    position:relative;
    border:3px solid #444444;
    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:#00000;
}
#feedContainer li {
    list-style:none;
    margin:0 0;
    padding:0 0;
    border-top:3px solid #444444;
    color:#444444;
    width:50%;
    float:left;
    display:inline;
}
#feedContainer li .inner {
    margin:15px 16px;
    height:100px;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#444444; /* warna judul awal */}
#feedContainer li a:hover {
    text-decoration:none;
    color:#ff0000; /* warna judul akhir */}
#feedContainer li a.toc-title {
    font-weight:bold;
    font-size:13px; /* ukuran font judul  */    margin:0 0;
}
#feedContainer li .news-text {
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:2px 2px;
    background-color:#444444; /* warna kotak gambar dalam */    border:1px solid #ff0000; /* warna kotak gambar luar */    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal bold 13px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
    background-color:#444444;
    padding:0 0;
    color:#444444;
    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:30px 30px;
    margin:10px 10px 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:1px 1px;
    border:none;
}
#table-outer label {
    font-weight:bold;
    color:#444444; /* warna kategori */    text-shadow:0 0px 0 rgba(0, 0, 0, .0);
    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:#444444;
    border:none;
    display:block;
    margin:0 0;
    padding:5px 5px;
    font:normal normal 12px Tahoma, Verdana, Arial, Sans-Serif;
    text-transform:uppercase;
    color:#FFFFFF;
    outline:none;
    -webkit-box-shadow:inset 0 1px 1px black, 0 1px 0 #444;
    -moz-box-shadow:inset 0 1px 1px black, 0 1px 0 #444;
    box-shadow:inset 0 1px 1px black, 0 1px 0 #444;
}
#postSearcher input {
    width:170px;
    padding:1px 1px;
}
#postSearcher input:focus, #table-outer select:focus {
    background-color:#444444
}
@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://anthzoblog.blogspot.com/",
 feedNum: 5,
 labelName: false,
 numChars: 100,
 thumbWidth: 40,
 navText: "Berikutnya &#9660;",
 frontText: "Atas &uArr;",
 resetToc: "Reset",
 noImage: "http://i.imgur.com/pneHqAV.png",
 loading: "<span>Memuat...</span>",
 searching: "<span>Mencari...</span>",
 noResult: "Sorry Bro enggak ada."
};
//]]>
</script>
<br />
<div id="table-outer">
<table border="0">
        <tbody>
<tr>
                <td><label for="orderFeedBy">Urutkan artikel berdasarkan:</label>
                </td>
                <td><select id="orderFeedBy">
                        <option selected="" value="published">POSTING TERBARU</option>
                        <option value="updated">POSTING DIPERBAHARUI</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="labelSorterSelect">Kategori:</label>
                </td>
                <td><span id="labelSorter"><select disabled="" id="labelSorterSelect"><option selected="">MEMUAT...</option></select></span>
                </td>
            </tr>
<tr>
                <td><label for="feed-q-box">Cari pake kata konci:</label>
                </td>
                <td><form id="postSearcher">
<input id="feed-q-box" type="text" />
                    </form>
</td>
            </tr>
</tbody>
    </table>
</div>
<br />
<br />
<br />
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
</div>
<script src="http://anthzoblog.googlecode.com/svn/trunk/daftarisiefek.js" type="text/javascript"></script>

6. Publikasikan dan Lihat

Keterangan :

• Warna merah ganti dengan url blog sobat
• Keterangan tambahan agar lebih mengerti berwarna cokelat

[update title="Informasi buat sobat" icon="info-circle"]Saat ini sobat sedang membaca artikel Cara Membuat Daftar Isi Keren Menurut Label V.2
Sumber:https://anthzoblog.blogspot.com/2014/05/cara-membuat-daftar-isi-keren-menurut_11.html
Jangan lupa untuk memberikan komentar supaya situs ini terus update, terima kasih.[/update]