Membuat Halaman Daftar Isi Lebih Menarik

Didalam suatu blog, Daftar Isi / Sitemap menjadi hal yang mutlak untuk menarik perhatian bagi pengunjung dalam mempermudah melihat seluruh isi artikel yang terdapat didalam blog tersebut, ada kalanya kita penasaran ingin melihat artikel yang dibuatnya. Betul kan?? hehee.. Yuk kita coba bikin halaman Daftar Isi menjadi lebih menarik.

Caranya:

1. Buat satu halaman statis beri judul "Daftar Isi"
Dan simpan kode ini dalam mode HTML

<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>

2. Selanjutnya salin CSS ini tepat diatas </style>

#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;
}

Simpan perubahan templatenya, dan lihat halaman Daftar isi yang tadi sobat buat. Gimana??? menarik bukan???

Source: Blog Ngudang