Cara Membuat Daftar Isi Yang Keren Dan Mudah

Membuat daftar isi adalah hal yang sangat penting kenapa? karena blog atau website tanpa ada daftar isi akan sangat sulit untuk para pembaca untuk menemukan apa yang akan mereka cari diblog atau website kita, oleh karena itu kita wajib membuat daftar isi. Nah, oleh karena itu kali ini saya akan membagikan tutorial cara membuat daftar isi yang keren dan mudah. Kita simak cara-caranya membuat daftar isi yang keren dibawah ini!

Lihat Demo Disini


1. Langkah pertama

Kalian masuk keblog kalian -- klik laman --- bikin laman baru-- pilih mode HTml dan pastekan kode berikut isi

<style type="text/css">

#toc{

width:97%;

margin:5px auto;

border:1px solid #00a3c1;

-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);

}

.labl{

color:#ff0000;

font-weight:bold;

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(0.20,#00a3c1),color-stop(1,#C2EAFE));

border:1px solid #00a3c1;

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{t

ext-transform:uppercase;

}

.new{

color:#ff0000;

font-weight:bold;

font-style:italic;

}

.postname{

font-weight:normal;

background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);

background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#000),color-stop(1,#C2EAFE));

}

.postname li{

border-bottom: #ddd 1px dotted;

margin-right:5px

}

</style>   
<div id="toc">
<script src="https://cdn.rawgit.com/aramdan/share/master/sitemap.js" type="text/javascript"></script>  <script src="https://tutorkuland.blogspot.co.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>

Ganti tulisan yang berwarna merah dengan Url blog kalian setelah itu klik publikasikan dan lihat hasilnya. Cara isi sangat mudah sekali dan saya juga menggunakan daftar isi tersebut Kalian juga bisa merubah tampilan warnanya dengan mengganti kode-kode warna diatas. Segitu saja untuk tutorial cara membuat daftar isi otomatis keren dan sangat mudah ini share jika menurut kalian bermanfaat dan yang masih bingung bisa komentar dibawah postingan isi terimakasih.