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

16 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. nah akhirnya ketemu, nanti saya coba, kalo ada kesusahan bantu gan

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

    ReplyDelete
  5. wow kren nih izin coba
    thanks for share

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

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

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

    ReplyDelete
  9. Ringan juga load javascript dari daftar isinya.

    ReplyDelete
  10. BLOG nya menarik sekali keren banget ka kunjungi yang satu ini yaaa biar kalian ga bingung dalam menentukan masalah GEDGET
    http://zapplerepair.com/iPhone-6S-masalah-lcd-display-kadang-mau-muncul-kadang-engga.html

    ReplyDelete