Membuat Daftar Isi Dengan Tampilan Berbeda

Membuat halaman daftar isi pada blog sangat memudahkan bagi para pengunjung blog anda untuk melihat seluruh artikel blog anda. Menurut saya, setiap blog wajib memiliki halaman daftar isi karena dengan daftar isi ini, anda dapat membuatnya pengunjung blog menjadi merasa nyaman di blog anda.
Silahkan lihat contoh daftar isi di blog ini Daftar Isi

Oke, langsung saja ke proses pembuatannya.

1. Loginkan akun blogspot anda
2. Klik "Template" kemudian pilih lagi "Edit Template"
3. Kemudian cari kode "</style>" atau "]]></b:skin>"
4. Copy kode di bawah ini dan letakkan tepat di atas kode "</style>" atau "]]></b:skin>"

#table-outer table {
width: 100%;
margin:0;
padding:0;
}
#table-outer input, #table-outer select {
padding: 4px;
font: inherit;
border: 2px solid rgba(177, 0, 0, 0.26);
width: 170px;
box-sizing: border-box;
}
#table-outer select {
cursor:pointer;
}
#resultDesc {
margin-bottom:10px;
 }
#feedContainer {
overflow: hidden;
margin-top: 20px;
}
#feedContainer strong {
font-size: 10px;
}
#feedContainer, #feedContainer li {
padding: 0;
margin: 0;
list-style: none;
}
#feedContainer li {
float: left;
width: 50%;
margin-bottom: 10px;
position: relative;
z-index: 0;
}
#feedContainer .inner {
padding: 8px;
margin: 0 5px;
position: relative;
background-color: #FFFFFF;
border: 1px solid rgba(177, 0, 0, 0.26);
border-radius: 2px;
height: 133px;
}
#feedContainer img {
float: left;
margin: 0 8px 0 0;
max-width: 100%;
border: 1px solid #C7C7C7;
padding: 3px;
}
#feedContainer .toc-title {
max-height: 33px;
overflow: hidden;
}
#feedContainer .toc-title:hover {
text-decoration:underline;
}
#feedContainer .news-text {
font-size:11px;
}
#feedNav a, #feedNav span {
display: block;
text-align: center;
color: #FFFFFF;
text-decoration: none;
background-color: #AF0606;
padding: 5px;
width: 95%;
margin: 0 auto;
border-radius: 2px;
}
#feedContainer .date {
position: absolute;
bottom: 0;
right: 0;
background-color: #AF0606;
color: #FFFFFF;
font-size: 9px;
padding: 3px 2px;
width: 75px;
}
#feedContainer .date .dd {
font-size: 15px;
line-height: 18px;
font-weight: bold;
}
#feedContainer .date span {
display: inline-block;
line-height: 12px;
text-align: center;
margin-left: 5px;
}

5. Klik "Simpan Template"

Langkah selanjutnya yaitu :
1. Kembali ke "Dasboard" kemudian klik "Laman"
2. Buat "Buat Laman Baru"
3. Silahkan berikan judul
4. Salin kode dibawah dan letakkan pada markup HTML bukan Compose

<div id="table-outer"><table><tr><td><label>Urutkan posting 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>Filter posting berdasarkan kategori:</label></td><td><span id="labelSorter"><select disabled><option selected>Loading...</option></select></span></td></tr><tr><td><label>Cari dengan kata kunci:</label></td><td><form id="postSearcher"><input type="text"/></form></td></tr></table></div><header id="resultDesc"></header><ul id="feedContainer"></ul><div id="feedNav">Loading...</div>
<script src="https://googledrive.com/host/0B-GXzRKoPbNnR3N0Z0dMQ0lDYWM" type="text/javascript"></script>

5. Kemudian Publikasikan

Sumber : http://ngudang.blogspot.com/2014/06/membuat-halaman-daftar-isi-lebih-menarik.html