Membuat Daftar Isi Blog Modern

Cara Membuat Daftar Isi di Blog Otomatis – Banyak blogger yang bertanya bagaimanamembuat daftar isi secara otomatis dan dikelompokan berdasarkan label, sebenarnya sudah banyak tutorial ini diluaran sana tetapi katanya tutorialnya gak jelas dan ingin dibuatkan tutorialnya sejelas mungkin sehingga blogger pemula pun bisa membuatnya.

Baiklah mari kita langsung saja membuat daftar isi yang dimaksud tetapi sebelum anda membuatnya kurang lebih tampilannya ketika sudah jadi akan seperti gambar dibawah ini?

Bagaimana? Masih tertarik untuk membuat daftar isi di blogspot ini? Jika iya silahkan ikuti langkah-langkah berikut;

1. Css di bawah ini letakan di atas </head>

<style>
html {
background: #f2f9fe;
background: -moz-linear-gradient(top, #f2f9fe 0%, #d6f0fd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f9fe), color-stop(100%,#d6f0fd));
background: -webkit-linear-gradient(top, #f2f9fe 0%,#d6f0fd 100%);
background: -o-linear-gradient(top, #f2f9fe 0%,#d6f0fd 100%);
background: -ms-linear-gradient(top, #f2f9fe 0%,#d6f0fd 100%);
background: linear-gradient(to bottom, #f2f9fe 0%,#d6f0fd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 );
background-attachment: fixed;
}
.daf {
padding: 5px;
width: 600px;
position: relative;
margin: 50px auto 0
}
.daf::before {
position: absolute;
content: "";
width: 5px;
background: #9DE;
top: 0;
left: 0;
right: 0;
bottom: 10px;
}
.daf::after {
position: absolute;
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAS5JREFUOI2tlNmNhDAQRCekCYFQOMR9gzg+nZlD2RA2hN4uC0s7yAYD81FCou3XXWXwi4he35a14Pu+F4YhxXFMSZLYJLkuoijynaBBEHhpmlLbtjQMg1F938umaURRFJRlme8EzfOcxnGkdV2NWpZFMtgDuK5rYYTCMmCsN1t3gf7yxJhWyQhFhrDMViQ/vbIsD6HQNE06CjJCcShbhujssaVT6DaxkhGKE0VXZNV1HbJSUFvuXBOYFEDAL0F5o8qMT/lDVVX9wPY8z9eh2ITNiOa/eI2q35p0b5sbCN1MA+/YV5OxXSW839Z9HNglKDbjqf8k3egR9OwC0Y0f2d8LNax5ZH+vW5Oe/VHOmZ7leCQbVH3syAuXii3LS1BYwYd9lCPkCsWlK2HfRTboH71yVt9PdsQQAAAAAElFTkSuQmCC");
width: 35px;
height: 35px;
background: #F3F7F8;
top: -40px;
left: -25px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
text-align: center;
line-height: 45px;
border: 10px solid #9DE
}
.daf ul {
margin: 0 0 0 50px
}

.daf ul li {
list-style-type: none;
position: relative
}

.daf ul li::before {
position: absolute;
content: "";
height: 4px;
background: #9DE;
top: 9px;
left: -50px;
width: 35px
}

.daf ul li::after {
position: absolute;
content: "";
height: 5px;
background: #fff;
top: 5px;
left: -15px;
width: 5px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
z-index: -1;
border: 3px solid #98D2E0;
}
.daf a {
color: #0007B8;
font: normal 12px/20px Arial, sans-serif
}
.daf .jd {
position: relative;
margin: 10px 10px 10px;
padding: 5px 10px;
background: #9DE
}

.daf .jd::before {
position: absolute;
content: "";
border: 10px solid;
left: -15px;
border-color: rgba(0, 0, 0, 0) #9DE rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
z-index: -1;
}
.daf .jd::after {
position: absolute;
content: "";
border: 15px solid;
top: 0;
right: -27px;
border-color: #9DE rgba(0, 0, 0, 0) #9DE #9DE
}
.daf a.dari {
padding: 8px;
background: #9DE;
position: relative;
margin: 0 15px
}

.daf a.dari::before {
position: absolute;
content: "";
border: 10px solid;
left: -15px;
border-color: rgba(0, 0, 0, 0) #9DE rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
z-index: -1;
top: 5px;
}

.daf a.dari::after {
position: absolute;
content: "";
border: 8px solid #9DE;
left: -25px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
top: 7px;
}
</style>

2. Letakan Js di bawah ini di dalam post

<div class='daf'><script type="text/javascript" src="https://system-svn.googlecode.com/files/isi.txt"></script><script src="http://rawazine.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script></div>

Semoga Berhasil