Cara Membuat Daftar Isi Responsive Blog Keren dan Otomatis

Cara Membuat Daftar Isi Responsive Blog ini sepertinya sangat berguna untuk saat ini karena sudah banyak sekali para pengguna platform blog yang menggunakan template yang sudah versi responsive pada smartphone android dan tablet, nah ini sangat cocok untuk dipasang pada blog sobat yang menggunakan template canggih sekarang ini dengan menggunakan script daftar isi yang akan saya share untuk kalian sob..

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 saya juga membagikan lagi untuk sobat yang ingin menggunakan fitur baru yang pernah saya pakai pada blog mahrus NET ini.

Untuk apa sih harus responsive? tentunya ya agar sitemap sobat bisa tampil pas saat kalian menggunakan versi ponsel pintar kah 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.

Daftar Isi Blog Keren dan Responsive secara Otomatis :

Pertama : Silahkan sobat mahrus NET masuk/login ke akun blogger dan masuk bagian laman blog kemudian pilih laman baru, lengkapnya lihat gambar berikut ini :

Kedua : Sekarang sobat pilih bagian HTML, Ingat jangan dibagian compress ya! karena kalian akan memasukkan kode dengan format script jadi silahkan sobat klik HTML dan pastekan kode berikut kedalamnya :

<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://mahrus-net.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

 Ketiga : Silahkan sobat ganti warna merah dengan URL blog sobat kemudian silahkan sobat simpan dan lihat hasilnya....

Nah mudah bukan sobat cara membuat Daftar Isi Responsive Blog yang paling keren sekali, silahkan sobat terapkan juga untuk blog kalian agar tampilannya jos dan memuaskan pengunjung kalian kawan.