Cara Membuat Daftar Isi Secara Otomatis Dan Keren diBlog

Baiklah mari kita langsung saja membuat daftar isi yang dimaksud tetapi sebelum anda membuatnya kurang lebih tampilannya ketika sudah jadi akan seperti gambar dibawah ini

Bagaimana? Masih tertarik untuk membuat daftar isi di blogspot ini? Jika iya silahkan ikuti langkah-langkah berikut;

• Masuk ke akun blogger anda, pada dashbor blog anda pilih LAMAN

• Selanjutnya klik LAMAN BARU setelah tampil halaman seperti ketika anda akan membuat artikel.

• Pilih HTML pada pilihan tempat anda menulis. Ingat HTML bukan COMPOSE. Silahkan masukan judul yang sesuai dengan keinginan anda.

• Selanjutnya slahkan copy kode dibawah ini dan salin atau paste di Kolom HTML tadi.

<div id="bp_toc"></div><script src="https://837e4322157785ac6e2418ca18b2891def99d9f8.googledrive.com/host/0B__SLW9IKWpvUjB4YjRtXzZIUDQ/masdeeons-sitemap.js" type="text/javascript"></script><script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script><br />

<style>

/* CSS Full Sitemap */

#bp_toc {background:red;color:#666;margin:0 auto;padding:5px;}

span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:&#39;Open Sans&#39;;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:&#39;Open Sans&#39;;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;}

</style>

• Jika semuanya sudah slahkan klik PUBLIKASIKAN.

Sekarang blog anda sudah memiliki daftar isi, jika anda membuat artikel baru maka akan secara otomatis masuk kedalam daftar isi tersebut dan akan di kelompokan berdasarkan bulan ketika anda membuat artikel tersebut. Saya rasa sudah cukup jelas dan bagi anda yang masih bingung seperti biasa anda bisa bertanya di kolom komentar, Semoga Bermanfaat.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: