Cara Mudah Membuat Daftar Isi Blog

Cara Mudah Membuat Daftar isi Blog - Daftar isi (sitemap / table of content) adalah sebuah halaman pokok utama untuk menampilkan semua artikel ataupun postingan blog secara ringkas dalam satu halaman ibarat sebuah petunjuk arah untuk mencari artikel dalam kategori tertentu, daftar isi sangat lah penting untuk blog agar memudahkan visitor untuk mencari informasi lebih dalam lagi dari blog tersebut. dengan membuat daftar isi pada blog visitor akan betah di blog kita karena mempermudah user untuk mencari informasi yang mereka butuhkan, hal ini juga dapat membuat blog anda memiliki visitor tetap untuk mencari lebih banyak informasi yang pengunjung suka.

Cara Mudah Membuat Daftar Isi Blog

1. Pada Halaman Awal Blog Pilih Menu Halaman [Page]

2. Pilih Halaman Baru [New Page]

3. Di Halaman Baru [New Page] pilih format HTML jangan format Compose [Visual edit]

3. Copy Paste Kode yang berada dalam kotak text [textbox] di bawah sesuai pilihan ke ke halaman yang tadi di buat, dalam format HTML.

Kode HTML Cara Mudah Membuat Daftar isi Blog keren

Kode HTML Cara Mudah Membuat isi blog berdasarkan label Simple

JavaScript

<script src='https://cdn.rawgit.com/vhey93/js/683f5b97/DaftarIsiV1.js'></script> <script src="https://ngeflash-hp.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> 

Kode HTML Cara Mudah Membuat daftar isi Keren di html (Label + CSS)

CSS

<style type="text/css"> .labl,.new{ font-weight:700 } #toc{ width:97%; margin:5px auto; border:1px solid #000; -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0,.2); -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0,.2); box-shadow:4px 4px 8px 2px rgba(0,0,0,.2) } .labl{ color:#000; margin:0 -5px; padding:1px 0 2px 11px; background:-moz-linear-gradient(right,#C2EAFE 0,#00a3c1 40%); background:-webkit-gradient(linear,left 10,right 80,color-stop(.2,#000),color-stop(1,#fff)); border:2px solid #000; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow:3px 3px 1px #bbb; -moz-box-shadow:3px 3px 1px #bbb; -webkit-box-shadow:3px 3px 1px #bbb; display:block } .labl a{ color:#fff } .labl:first-letter{ text-transform:uppercase } .new{ color:red; font-style:italic } .postname{ font-weight:400; background:-moz-linear-gradient(right,#b6b6b6 0,#fff 40%); background:-webkit-gradient(linear,left 80,right 10,color-stop(.6,#fff),color-stop(1,#b6b6b6)) } .postname li{ border-bottom:#ddd 1px dotted; margin-right:5px } </style> 

JavaScript

<div id="toc"> <script src='https://cdn.rawgit.com/vhey93/js/683f5b97/DaftarIsiV1.js'></script> <script src="https://ngeflash-hp.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script></div> 

Kode HTML Cara Mudah Membuat daftar isi blog dengan scroll (Arsip Simple)

CSS

<style type="text/css"> #toc{ width:97%; margin:5px auto;border:1px solid #000000;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); } </style> 

JavaScript

 <div id="toc"> <script src="https://cdn.rawgit.com/vhey93/js/8cfd460b/Daftarisiv3.js"></script> <script src="http://www.bloggars.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script> </div> 

Kode HTML Cara Mudah Membuat kotak daftar isi di blog (Semua Artikel Sortir Tanggal Posting)

CSS

<style type="text/css"> #bp_toc { border: 1px solid #000000; color: #666; float: left; margin: 0 auto; padding: 0; width: 99%; } span.toc-note { display: none; } #bp_toc tr:nth-child(2n) { background: #eeeeee; } td.toc-entry-col1 a { font-weight: bold; } .toc-header-col1, .toc-header-col2, .toc-header-col3 { background:#000000; } .toc-header-col1 { padding: 10px; width: 250px; } .toc-header-col2 { padding: 10px; width: 80px; } .toc-header-col3 { padding: 10px; 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: 15px; text-decoration: none; color: #fff; 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 { padding: 5px; text-align: left; } .toc-entry-col3 { padding-left: 10px } #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; min-height: 4em; float: left; border-right: 1px solid #fff; padding: 0 5px; text-align: center; margin-right: 10px; } td.toc-entry-col2 { text-align: center; } </style>

JavaScript

<br /> <div id="bp_toc"> <script src="https://cdn.rawgit.com/vhey93/js/ce5e32e5/Daftarisiv2.js"></script> <script src="https://ngeflash-hp.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc"> </script></div> 

4. Setelah selesai copy kode diatas kemudian daftar isi blog anda sudah siap di publikasikan.

Ganti URL http://www.gokepo.win dalam Kode HTML diatas Ke URL Blog Anda

Cara Menyisipkan Daftar Isi ke menu Navigasi Blog

Pada Halaman Awal Blog Pilih Menu Tema [Theme]

Kemudian Pilih Edit HTML

Lalu cari kata yang ada pada menu navigasi sebagai contoh saya mengganti menu navigasi Teknologi dengan daftar isi atau bisa juga menambahkan menu navigasi baru dengan mengcopy menu navigasi yang ada dari kode <li> sampai </li> untuk link dapat dilihat setelah mempublikasikan halaman daftar isi yang tadi di buat seperti gambar diatas cukup memasukan /p/linkdaftar-isi.html.

Jika sudah selesai pilih Simpan Tema [Save Themes]

Link will be apear in 15 seconds.

Well done! you have successfully gained access to Decrypted Link.