Cara Membuat Daftar Isi Responsive Blog Otomatis Dan Keren

Assalamau'alaikum Wr.Wb, Salam Sejahtera untuk Seluruh Sobat Bismillah Gratis™ dimanapun Berada, Beberapa hari lalu ada teman yang datang kerumah minta tolong untuk di ajari cara blogging dan membuat blog plus editing Template Blog.
Nah Kali ini saya sengaja iseng nulis artikel tentang cara editting Template Blog ( mumpung belum lupa ) heheheh.. Dan pada postingan kali ini saya akan mencoba berbagi kode CSS Daftar Isi Responsive Blog Otomatis Dan Keren.
Cara Membuat Daftar Isi Responsive Blog ini sepertinya sangat berguna, karena sudah banyak sekali para pengguna platform blog yang menggunakan template yang sudah versi responsive pada smartphone android dan tablet, Dan CSS ini sangat cocok untuk dipasang pada blog sobat Bismillah Gratis™ yang menggunakan template canggih sekarang ini dengan menggunakan script daftar isi yang akan Bismillah Gratis™ share untuk kalian ..

Sitemap (Daftar Isi) Responsive pada blog sebenarnya sudah banyak sekali yang share dengan berbagai macam gaya yang keren dan dapat digunakan secara otomatis, namun apa salahnya jika Bismillah Gratis™ juga membagikan lagi untuk sobat Bismillah Gratis™ yang ingin menggunakan fitur baru yang pernah saya pakai pada blog Bismillah Gratis™ ini.
Untuk apa sih harus responsive? tentunya ya agar sitemap sobat bisa tampil pas saat kalian menggunakan versi ponsel pintar, kan sekarang jamannya sudah menggunakan elektronik canggih jadi blog juga harus tampil keren dengan menyajikan sesuai dengan keadaan pengguna dan pembaca blog kita agar lebih nyaman dan mudah dalam membaca artikel diblog kita semua hehehehe....

Adapun Cara - Cara Penempatannya adalah Sebagai Berikut :

A). Silahkan sobat Bismillah Gratis™ masuk/login ke akun blogger dan masuk bagian laman blog kemudian pilih laman baru, lengkapnya lihat gambar berikut ini :

1. Klik Laman.

2. Klik Laman Baru.

Setelah Itu akan muncul halaman baru, Maka Lakukanlah Sesuai Urutan Nomer yang ada pada seperti gambar dibawah ini : 

3. Isi Judul Postingan
4. Klik HTML, Ingat jangan dibagian compress ya! karena kalian akan memasukkan kode dengan format script jadi silahkan sobat klik HTML dan pastekan kode berikut kedalamnya
5. Letakkan / Paste Kode CSS Dibawah ini :

<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,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://bismillah-gratis.blogspot.co.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

6. Publikasikan

Dan Setelah Di Publikasikan Maka Tampilannya akan seperti pada gambar dibawah ini :

B).Silahkan sobat ganti warna merah dengan URL blog sobat kemudian silahkan sobat Bismillah Gratis™ simpan dan lihat hasilnya....
Nah mudah bukan sobat cara membuat Daftar Isi Responsive Blog yang paling keren sekali, silahkan sobat Bismillah Gratis™ terapkan juga untuk blog kalian agar tampilannya jos dan memuaskan pengunjung kalian kawan.