Cara Membuat Halaman Daftar Isi Responsive di Blogger

Pada artikel kali ini saya akan membagikan cara membuat halaman daftar isi di halaman statis blogger, yup pertam kita tau dulu apa itu daftar isi? daftar isi yang dimaksud di blog adalah untuk mempermudah pengunjung blog kita melihat semua artikel-artikel yang kita buat.

Contoh daftar isi blog saya : Daftar Isi - ctcoke.blogspot.com

Silahkan lihat daftar isi blog saya itu dan itu juga sebagai demo untuk membuat halaman daftar isi ini di blog kalian. oke langsung saja ke tutorialnya :

Membuat halaman daftar isi :

1. Login ke akun blog sobat ke blogger.com
2. Buat halaman statis

3. Setelah itu copy code dibawah lalu ikuti tutorial gambar dibawah.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-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:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
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:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,center 60,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>

<br />
<div id="toc">
<script src="http://yourjavascript.com/4599611341/bloggerstutorial-09.js" type="text/javascript"></script>
<script src="https://ctcoke.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Note : ganti https://ctcoke.blogspot.com dengan url blog kalian

4. Sampai disitu sudah cukup, jangan lupa simpan template blog kamu.

5. Selesai silahkan dilihat pasti sangat bagus.

Perlu anda ketahui bahwa cara ini tidak akan berfungsi jika blog anda tidak membuat artikel tanpa menggunakan label, mungkin itu saja gan semoga bermanfaat.