ganisebastian
Membuat daftar isi blog atau seringkali di sebut sitemap blog penting sekali untuk sebuah navigasi, seorang pengunjung akan segera dapat mengakses isi posting atau konten blog anda dengan mudah, selain itu fungsi daftar isi blog juga menambah tampilan blog lebih elegan dan terlihat profesional.
Di posting sebelumnya juga pernah di bahas mengenai cara membuat sitemap blog, semua keterangan lengkap mengenai daftar isi blog bisa anda simak pada : Contoh Daftar Isi Blog Yang Ringan Dan Seo Friendly.
Daftar isi blog ini otomatis menyesuiakan, berdasarkan label/category yang ada di posting blog anda, satu lagi keistimewaan daftar blog ini bergambar (thumnail). Contohnya seperti gambar di bawah ini.
Untuk berjaga jaga, sebaiknya Backup dulu template anda.
Baiklah langsung saja Masuk Blogger – Laman – Buat Laman baru – Copy paste kode di bawah ini pada Mode HTML.
| <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> <header id=”resultDesc”></header> <ul id=”feedContainer”></ul> <div id=”feedNav”> Loading…</div> <script src=”https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/sitemap-tab.js” type=”text/javascript”></script> <style scoped=”” type=”text/css”> #comments {display:none;} </style> |
Setelah selesai publikasikan halaman.
Selanjutnya,masuk ke menu Template – Edit Template, Copy paste kode di bawah ini dan tempatkan sebelum kode </style>
| /* CSS Full Sitemap */ #bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;} span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:’Open Sans’;font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;} .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;} .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;} .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px; text-decoration:none;color:#aaa;font-family:’Open Sans’;font-weight:700;letter-spacing: 0.5px;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration:none;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;} #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;} .toc-entry-col1 {counter-increment:rowNumber;} #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;} td.toc-entry-col2 {background:#fafafa;} |
Setelah selesai simpan template anda.
Daftar isi blog keren atau tidak keren, tergantung dari penilaian masing masing, tapi kalau menurut saya blog yang keren itu isi postingnya juga keren (bermutu), di tambah penerapan daftar isi blog keren ini jadinya Full keren 😀
Semua kode CSS untuk membuat daftar isi blog (widget sitemap) paling keren ini saya dapat dari mbak Arlina ,cek : http://arlinadesign.blogspot.com
izin sedot kode master huakakakakak
kereen klik mania kemana mana ada terus ni mantappp
Aku work kok tampilan daftar isinya, makasi ya masgan.
terima kasih gan
Kok gak work mas, cuma loading doang
Sama
Kok ga work mas?
kode nya banyak.yang di maksud diatas itu yang mana gan
Di Code HTML Nya gak harus di ubah Mas , ? atau Url Nya Harus di Ubah Gak ?
Hanya rubah URL nya saja, menjadi URL milik Anda.
wih keren izin sedot mas buat blog saya hehe
ijin coba dulu mas, mudah2an aja berhasil. salam
hanya untuk template tertentu ya ternyata!
tolong mastah gak muncul sitemapnya 🙂 , bantuanya dong ngidem banget sama designya 🙂
Coba cek ke arlina design, sebab sumber artikelnya langsung dari sana mas, mungkin ada beberapa perubahan script.
kok sitemapnya gk muncul mastah ?
ijin peraktek mastah 🙂
Thanks gan infonya, ane pengen coba seluruh site map yang ane temuin di blog ane
Kok punya saya ga muncul postinganya mas ? cuma muncul search by keyword dan sort posts, apa harus pake template arlinadesign dulu baru bisa ?
Dalam tutorial ini memang menggunakan template Arlina design mas s ebagai prakteknya.
Artikel yang sangat bermanfaat, sudah saya coba dan berhasil, thanks atas infonya. Btw header blognya mas gani kok mangkreng terus di atas?
Gan, Kalau untuk blog wordpress gimna gan? tutornya dong!
Kalau di wordpress bisa pakai responsive menu plugin atau mega menu.
Terimkasih ilmunya Mas, mau coba dulu semoga saja work. izin comot yaaa 🙂
Monggo mas 😀
hasilnya kok gak seperti yang diatas mas?
Hehe..masa sih, sudah dipraktekin juga tuh sebelumnya mas dan work,,nggak ada masalah 😀
Ini yang terbaru http://riskiaktovan.blogspot.com/2016/12/update-membuat-artikel-terkait-blogger-terbaru-2017.html
Yang lama mungkin gk begitu work soalnya algoritma Google selalu di update