Cara membuat halaman daftar isi keren dan responsive

maskokoganteng.com - Cara bagaimana membuat halaman daftar isi keren dan juga responsive untuk halaman blog Anda. Daftar isi ini menurut Saya fungsinya sangat penting untuk para pembaca blog Anda. Saya sendiri suka melihat halaman daftar isi dari blog yang Saya kunjungi, karena dengan melihat daftar isi Saya langsung bisa mengetahui tentang apa keseluruhan isi dari blog yang Saya kunjungi tersebut.
                                     
Dari daftar isi tersebut terkadang Saya menemukan judul artikel atau yang menarik minat Saya untuk membaca atikel blog tersebut, daftar isi pada blog juga bisa menarik minat pengunjung blog untuk bisa lebih berlama - lama berada di blog Anda. Untuk membuat halaman daftar isi blog sangatlah mudah yaitu dengan cara memasang kode html berikut ini kemudian letakan pada postingan pada halaman blog Anda. Silahkan copy paste html berikut ini :
<div dir="ltr" style="text-align: left;" trbidi="on"> <style type="text/css"> #toc{ width:85%; 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://k17-indonesia.blogspot.co.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script></div> </div>
Ganti url yang berwarna kuning dengan url blog Anda, setelah itu buat postingan baru di halaman blog Anda lalu masukan kode html diatas dibagian htmlnya setelah itu save dan publish jika semua kode html ditempatkan dengan benar maka hasilnya akan seperti pada penampakan gambar dibawah ini.
Cara membuat halaman daftar isi blog keren dan responsive terbaru

Demikian artikel cara membuat halaman daftar isi keren dan responsive terbaru buat blogSemoga bermanfaat dan silahkan dicoba. 

 
Back To Top