Cara Membuat Daftar Isi dengan Menu Navigasi dan Thumbnail

Selamat siang Sahabat Sintang-site, Sobat semua pasti sudah tau bukan apa itu daftar isi atau sitemap, karena daftar isi adalah bagian penting pada sebuah blog ataupun website. Daftar isi adalah halaman yang memuat artikel-artikel yang sudah di publikasikan di blog atau website.

Daftar isi di buat agar para pengunjung dapat dengan mudah mencari judul artikel yang sesuai pembahasannya dengan apa yang mereka cari

Oke tentunya mungkin sudah berlimpah sekali tutorial membuat daftar isi , tetapi di artikel ini saya jamin akan berbeda, sesuai judul artikel ini , daftar isi yang akan Sintang-Site bagikan adalah daftar isi spesial hehe , mengapa spesial?? karena di daftar isi ini terdapat Fitur :

1. Sort Post By
   - Berfungsi untuk mengsortir post berdasarkan update atau post terbaru
2. Filter Post By Category
   - Berfungsi untuk menampilkan daftar isi dengan label atau kategori yang kita inginkan
3. Search By Keyword
   - Berfungsi untuk mencari artikel pada daftar isi dengan kata kunci
4. Tombol Load More
   - Berfungsi untuk load data artikel tanpa harus beralih halaman atau refresh page sehingga tidak memberatkan loading blog saat membuka daftar isi

Pasti penasaran bukan seperti apa Daftar isi ini , nah buat yang penasaran liat aja screenshot di bawah :

Screenshot :

Gimana ? keren bukan ?? masih penasaran ? liat aja langsung demonya dengan klik link demo di bawah :

DEMO

Baik , mungkin setelah melihat screenshot dan demo sobat sekalian jadi ingin memasangnya , jika benar silahkan ikuti langkah berikut

1. Pertama yang harus sobat lakukan adalah menambah CSS berikut ke template sobat.
   Caranya silahkan masuk pada menu "Template" kemudian pilih "Edit Template"
   lalu cari kode ]]></b:skin> dengan Ctrl+F dan pastekan kode CSS diatask kode ]]></b:skin> tadi ,

/* CSS Sitemap */
#table-outer table{width:100%;margin:0;padding:0}
#table-outer input,#table-outer select{padding:4px;font:inherit;border:2px solid #ecf0f1;width:170px;box-sizing:border-box}
#table-outer select{cursor:pointer;outline:none}
#table-outer input:focus{outline:none}
#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:#fff;border:1px solid #f9f9f9;height:133px}
#feedContainer img{float:left;margin:0 8px 0 0;max-width:100%;border:1px solid #f9f9f9;padding:2px}
#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:#fff;text-decoration:none;background-color:#444;padding:5px;width:95%;margin:0 auto;transition:all 0.3s linear}
#feedNav a,#feedNav span:hover{background-color:#333;transition:all 0.3s linear}
#feedContainer .date{display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px}
#feedContainer .date .dd{font-size:9px;line-height:5px;font-weight:bold}
#feedContainer .date span{display:inline-block;line-height:5px;text-align:center;margin-left:5px}

1. 
   
2. Setelah itu buat Laman baru dengan cara
   Pilih Laman > Klik Laman Baru 
3. Isi dengan judul Daftar isi atapun Sitemap . lalu ganti metode penulisan dari "Compose" ke "HTML" dan terakhir pastekan kode berikut dan publikasian
   
   

   <div id="table-outer">
   <table><tbody>
   <tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select></td></tr>
   <tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
   <tr><td><label>Search by keyword : </label></td><td><form id="postSearcher">
   <input type="text" /></form>
   </td></tr>
   </tbody></table>
   </div>
   <br />
   <header id="resultDesc"></header>
   <br />
   <ul id="feedContainer"></ul>
   <div id="feedNav">
   Loading...</div>
   <script src="https://googledrive.com/host/0B5ACkCu1ZhCfSGZhdW42aVhLZ2M/SintangSiteSitemap.js" type="text/javascript"></script>
   <style scoped="" type="text/css">
   #comments {display:none;}
   </style>

4. Tinggal lihat post dan Tadaaa , Daftar isi blog sobat sudah jadi :)

dan selesai juga akhirnya "Cara Membuat Daftar Isi dengan Menu Navigasi dan Thumbnail" semoga bermanfaat :)

Salam Sintang, Free For All.
Regards, MrPotensial

Tweet