membuat daftar isi blog

Membuat Daftar Isi Blog Paling Keren

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.

membuat daftar isi blog

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 😀

Loading...

Semua kode CSS untuk membuat daftar isi blog (widget sitemap) paling keren ini saya dapat dari mbak Arlina ,cek : http://arlinadesign.blogspot.com


Loading...

Bagikan

ganisebastian

Penulis

Menulis dari berbagai pengalaman pribadi dan bisa dipertanggung jawabkan, jika bermanfaat bagi Anda silahkan share.

Komentar

    Avatar

    PIKIR KENAPA

    ( - 10:30)

    terima kasih gan

    Avatar

    Kok gak work mas, cuma loading doang

    Avatar

    isfan

    ( - 14:45)

    Kok ga work mas?

    Avatar

    Muhammad Adhi

    ( - 02:58)

    kode nya banyak.yang di maksud diatas itu yang mana gan

    Avatar

    iqbal

    ( - 08:16)

    Di Code HTML Nya gak harus di ubah Mas , ? atau Url Nya Harus di Ubah Gak ?

    Avatar

    ajib

    ( - 22:17)

    wih keren izin sedot mas buat blog saya hehe

    Avatar

    excelive

    ( - 09:17)

    ijin coba dulu mas, mudah2an aja berhasil. salam

    Avatar

    VASnews

    ( - 08:34)

    hanya untuk template tertentu ya ternyata!

    Avatar

    androidabc

    ( - 22:33)

    tolong mastah gak muncul sitemapnya 🙂 , bantuanya dong ngidem banget sama designya 🙂

      ganisebastian

      ganisebastian

      ( - 10:50)

      Coba cek ke arlina design, sebab sumber artikelnya langsung dari sana mas, mungkin ada beberapa perubahan script.

    Avatar

    ProAndroid

    ( - 22:32)

    kok sitemapnya gk muncul mastah ?

    Avatar

    Teman Android

    ( - 22:31)

    ijin peraktek mastah 🙂

    Avatar

    agam

    ( - 12:25)

    Thanks gan infonya, ane pengen coba seluruh site map yang ane temuin di blog ane

    Avatar

    Vitdroid

    ( - 08:57)

    Kok punya saya ga muncul postinganya mas ? cuma muncul search by keyword dan sort posts, apa harus pake template arlinadesign dulu baru bisa ?

      ganisebastian

      ganisebastian

      ( - 09:29)

      Dalam tutorial ini memang menggunakan template Arlina design mas s ebagai prakteknya.

    Avatar

    Artikel yang sangat bermanfaat, sudah saya coba dan berhasil, thanks atas infonya. Btw header blognya mas gani kok mangkreng terus di atas?

    Avatar

    Nur Halimah

    ( - 05:00)

    Gan, Kalau untuk blog wordpress gimna gan? tutornya dong!

      ganisebastian

      ganisebastian

      ( - 06:16)

      Kalau di wordpress bisa pakai responsive menu plugin atau mega menu.

    Avatar

    awen fals

    ( - 04:04)

    Terimkasih ilmunya Mas, mau coba dulu semoga saja work. izin comot yaaa 🙂

    Avatar

    Fatahilah

    ( - 05:45)

    hasilnya kok gak seperti yang diatas mas?

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *