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.

Cara Membuat Daftar Isi Responsive Blog

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 :

Cara Membuat Daftar Isi Responsive Blog

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. 

19 Responses to "Cara Membuat Daftar Isi Responsive Blog Keren dan Otomatis"

  1. wah keren nih daftar isinya mas,,memang benar sekarang harus ngikut perkembangan zaman,sebab kalau tidak kita akan ketinggalan,seperti yang ditulis di artikel ini,,,ok makasih untuk tutornya mas,,,

    BalasHapus
  2. daftar isinya bagus juga nih mas
    patut dijadikan pertimbangan bila saya nanti dah bosen dengan model daftar isi yg sekarang saya pakai

    BalasHapus
    Balasan
    1. silahkan saja mas yanto semoga ini pas dan cocok untuk template mas...

      Hapus
  3. terima kasih mas sudah share, kebetulan daftar isi saya belum responsi :)

    BalasHapus
    Balasan
    1. wah pas banget mas ini silahkan dicobain di blog sobat

      Hapus
  4. Terimakasih mas keren daftar isi nya :D saya udah cape keliling keliling nyari daftar isi yg responsive akhirnya nemu juga di sini.

    izin coba mas ^_^

    BalasHapus
    Balasan
    1. Silahkan langsung dipraktekin saja mas ... semoga bisa bermanfaat dan terpasang rapi di blog mas fajar

      Hapus
  5. kok pas pencet publikasikan pas ane lihat cuma tulisan site map gak daftar isinya gan

    BalasHapus
  6. Ijin copas mas, soalnya hasilnya memang keren.

    BalasHapus
  7. gan cara membuat index cuma satu label/category gimana ya kayak ini nih.
    SS: http://s25.postimg.org/re8pz4btr/2015_10_11_230618.png

    Thanks.

    BalasHapus
  8. sangat membantu untuk Blog Bayu Widiyanto

    BalasHapus
  9. Terimakasih pencerahannya kang. Langsung coba aja nich. Salam santun.
    Hidup Adalah Perjuangan

    BalasHapus
  10. Terima kasih gan. Bermanfaat.Saya sudah mencoba di blog saya dan berhasil.

    BalasHapus
  11. kalau saya sudah copy ko sudah di simpan tapi untuk melihatnya hasilnya giman

    BalasHapus

Jangan cuma dibaca aja, tinggalin komentar juga ya...