Membuat Daftar Isi dengan Menu Navigasi beserta Thumbnail




Membuat  Daftar Isi dengan Menu Navigasi beserta Thumbnail
Membuat  Daftar Isi dengan Menu Navigasi beserta Thumbnail
Sudah beberapa hari saya tidak update artikel, namun pada siang ini saya akan membagikan cara untuk Membuat  Daftar Isi dengan Menu Navigasi beserta Thumbnail, Setiap kali membuat blog dan mengisi kan bermacam-macam tema artikel yang di buat, tidak lepas kita harus di wajib kan untuk membuat daftar isi, karena ini sangat penting sekali, Nah kenapa sangat penting? karena pada saat pengunjung mampir ke blog anda, dapat memudahkan mereka para pembaca untuk mencari judul-judul yang mereka inginkan.

 oh ia sampai lupa saya untuk menjelasakan apa itu sitemap, Pasti anda sudah mengetahui bukan apa itu daftar isi/ sitemap, daftar isi adalah bagian terpenting pada sebuah blog ataupun website. Daftar isi adalah sebuah dari halaman yang memuat bermacam-macam artikel-artikel sudah kita buat sebelumnya pada blogger atau pun web.

Daftar isi bentuk nya sangat keren dan ringan, dan terdapat sebuah featur pada sitemap ini, di bawah ini dapat anda baca featur sitemap tersebut.

  1. Sort Post By
    - Ini Berfungsi untuk mengsortir post berdasarkan update atau post terbaru
  2. Filter Post By Category
    - Berfungsi untuk menampilkan daftar isi dengan label/ kategori yang kita inginkan
  3. Search By Keyword
    - Berfungsi untuk mencari artikel pada daftar isi dengan kata kunci
  4. Tombol Load More
    - Berfungsinya untuk load data artikel tanpa harus beralih halaman atau refresh page sehingga tidak memberatkan loading blog saat membuka daftar isi tersebut
Jika sudah anda membaca featur di atas, jika tertarik anda bisa memasang nya jika anda suka, baik di bawah ini cara untuk membuat daftar isi atau sitemap. 

cara untuk membuat daftar isi atau sitemap

  1. Pertama , pastikan sobat udah masuk pada akun blogger anda sendiri atau klik disini
  2. Lalu anda Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Temukan kode ]]></b:skin> cara cepat anda Ctrl+F dan letakan kode CSS di bawah ini tepatnya diatask kode ]]></b:skin> anda cari tadinya
    /* 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}
  4. Setelah selesai mengikuti cara poit no 3, maka anda bisa membuat laman baru, laman tersebut cara buat nya seperti kita ingin membuat halaman disclaimer, privacy policy dan lainya.
  5. Cara buat laman daftar isi tersebut anda harus pilih Laman => Anda klik laman baru.
  6. Selanjutnya anda bisa membuat judul nya sitemap atau bisa juga daftar isi, sesuka anda saja
  7. Masih dalam tahapan laman baru ini, Anda ganti ke mode penulisan dari "Compose" klik ke "HTML" dan terakhir pastekan kode berikut di bawah ini dan publikasian. lihat Gambar di bawah ini jika anda tidak tau.

    <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>
  8. Nah jika sudah anda bisa klik SAVE dan lihat hasilnya.
  9. Sekarang sitemap atau daftar isi anda sudah jadi.
Samapai disini dulu penjelasaanya mengenai Membuat  Daftar Isi dengan Menu Navigasi beserta Thumbnail, selamat mencoba dan bisa bermanfaat untuk anda.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect