Membuat Halaman Daftar Isi Lebih Menarik

Membuat Halaman Daftar Isi Lebih Menarik

Membuat halaman daftar isi pada blog, akan mempermudah pengunjung melihat artikel artikel kita..
Dalam tutorial kali ini saya akan memberikan cara membuat daftar isi dengan tampilan yang lebih menarik. dan juga dilengkapi dengan fitur sortir berdasarkan label dan posting yang telah diperbaharui.


Langkah pemasangannya pada blogspot..

1. Pada dasboard Blogger anda Pilih Menu Template dan pilih lagi Edit Template
2. Tekan CTRL+f dan cari kode </style> atau ]]></b:skin> .
3. Salin CSS Berikut dan Letakkan diatas 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;
}

4. Klik Simpan Template
5. Kembali ke dasboard Blogger
6. Sekarang pilih menu Laman
7. Dan buat Laman Baru
8. Silahkan Beri Judul laman
9. Salin kode berikut dan letakkan Pada markup HTML Post 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>

Simpan dan lihat hasilnya,
Selamat Mencoba

13 Responses to "Membuat Halaman Daftar Isi Lebih Menarik"

  1. wah ini yang ane cari 2 dari dulu, thanks yah gan tutornya, izin coba dulu moga2 berhasil :D

    ReplyDelete
  2. daftar isi nya keren bangett gan
    beda dari pada yang lain ^_^

    ReplyDelete
  3. Beda dengan yang lainnya ya

    ReplyDelete
  4. nah akhirnya ketemu, nanti saya coba, kalo ada kesusahan bantu gan

    ReplyDelete
  5. Walah Jadi Lebih Bagus :D , Coba Dulu Gan :D

    ReplyDelete
  6. wow kren nih izin coba
    thanks for share

    ReplyDelete
  7. wih, bisa dicontoh ini :D
    thanks gan

    ReplyDelete
  8. Agan riefand, sepertinya daftar isi yang di mkr, :D makasih ya gan, salam super. barokallah .. izin belajar disini master .. :)

    ReplyDelete
  9. daftar isinya lebih menarik gan, udh kayak di home page ajj :D

    ReplyDelete
  10. ini mirip tutor dari dfc ya :o

    ReplyDelete
  11. Ringan juga load javascript dari daftar isinya.

    ReplyDelete