Membuat Halaman Daftar Isi Lengkap di Blog Responsive

Untuk membuat sebuah halaman daftar isi pada blog itu memang tidak susah. Kamu juga tidak perlu banyak merubah pengaturan HTML pada template yang kita gunakan.

Halaman Daftar isi memang sudah banyak sekali jenisnya. Dari yang Menurut Label, Sampai Yang mengusung tema Material Design.

Kode HTML dan CSS nya pun berbeda-beda pastinya.

Nah pada artikel kali ini, saya akan membahas tentang Membuat Halaman Daftar isi Lengkap di Blog Responsive.

Kenapa judulnya harus ada responsive, karena ditahun ini, pengguna internet diseluruh dunia selalu menggunakan Smartphone nya untuk melakukan pencarian di google.

Jadi Tampilan Halaman Daftar isi yang akan saya bagikan pun pastinya sudah responsive yah.

Pada artikel sebelumnya, saya sudah pernah membuatkan 2 buah artikel tentang membuat daftar isi di blog.

Kamu bisa lakukan pencarian pada blog ini jika kamu ingin mencoba tampilan lainnya.

Dengan menampilkan halaman daftar isi yang lengkap dengan kolom pencarian, memang sangat memudahkan para pengunjung untuk melakukan pencarian artikel.

Tampilannya Halaman Daftar isi yang akan saya bahas kali ini bisa kamu lihat pada gambar dibawah.

Jika kamu ingin melihatnya secara langsung tampilannya pada blog, kamu bisa klik tombol DEMO dibawah ini.

D E M O

Tertarik untuk memasang Widget Daftar Isi Lengkap ini diblog kamu yang Responsive ?

Yuk ikuti langkah-langkahnya dibawah ini. Gak susah kok..

Langkah Pertama, Pastikan kamu sudah masuk kedalam Dashboard Blog kamu yah
Langkah kedua, kamu buat dulu halaman baru dengan judul Daftar Isi
Langkah ketiga, pilih tab HTML (Jangan Compose yah)
Selanjutnya salin kode berikut ini dan letakkan pada halaman tersebut.

<style type="text/css">
#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .putus{clear:both;width:100%;position:relative;height:46px}#DaftarIsiBlogMasTamvan .search{width:99%;margin:0 auto;text-align:center;background-color:transparent;padding:5px 0;right:0;position:absolute;top:0;z-index:99}#DaftarIsiBlogMasTamvan .search #MasTamvanSearchbox{width:100px;padding:12px;border:1px solid black;border-radius:3px;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;transition:all 0.2s;float:right;margin:0 12px 0}#DaftarIsiBlogMasTamvan .search #MasTamvanSearchbox:focus{width:95%;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;transition:all 0.2s}#DaftarIsiBlogMasTamvan{margin:0 auto;width:100%;position:relative;border-radius:3px;overflow:hidden}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan a:link{color:#fc4f3f;text-decoration:none;outline:none;transition:all .25s}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan a:visited:hover{color:#fc4f3f;text-decoration:none}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan a:visited,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan a:link:hover{color:#444;text-decoration:none}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan table{max-width:100%;width:100%;margin:1.5em auto}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan table td,.post-body #DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan table caption{border:1px solid #d9d9d9;text-align:left;vertical-align:top;padding:10px}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan table th{border:1px solid #009abf;text-align:left;vertical-align:top;padding:10px}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan table.tr-caption-container{border:1px solid #eee}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan th{font-weight:700}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan table caption{border:none;font-style:italic}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan td:hover{background:#fafafa}#Daftar_Isi_Blog_Mas_Tamvan{background:#334;color:#666;margin:0 auto;padding:5px}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan span.toc-note{display:block;text-align:center;color:#fff;font-weight:700;text-transform:uppercase;font-size:16px;line-height:normal;margin:0 auto;padding:20px;position:absolute;left:0;top:0}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .toc-header-col1{background-color:#f5f5f5;width:250px;padding:10px}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .toc-header-col2{background-color:#f5f5f5;width:75px;padding:10px}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .toc-header-col3{background-color:#f5f5f5;width:125px;padding:10px}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .toc-header-col1 a:link,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .toc-header-col1 a:visited,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .toc-header-col2 a:link,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .toc-header-col2 a:visited,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .toc-header-col3 a:link,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .toc-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-weight:700;letter-spacing:.5px}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .toc-header-col1 a:hover,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .toc-header-col2 a:hover,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .toc-header-col3 a:hover{text-decoration:none}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .MasTamvancol1,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .MasTamvancol2,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .MasTamvancol3{background:#fdfdfd;font-size:89%;padding:5px}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .MasTamvancol1 a,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .MasTamvancol2 a,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .MasTamvancol3 a{color:#666;font-size:13px;font-weight:700}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .MasTamvancol1 a:hover,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .MasTamvancol2 a:hover,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .MasTamvancol3 a:hover{color:#e76e66}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan table{width:100%;counter-reset:rowNumber;margin:0 auto}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .MasTamvancol1{counter-increment:rowNumber}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan table tr td.MasTamvancol1:first-child::before{content:counter(rowNumber);min-width:1em;margin-right:.5em}#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan td.MasTamvancol2{background:#fafafa}@media screen and (max-width:500px){#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan td.MasTamvancol2,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .toc-header-col2,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan .toc-header-col3,#DaftarIsiBlogMasTamvan #Daftar_Isi_Blog_Mas_Tamvan td.MasTamvancol3{display:none}#DaftarIsiBlogMasTamvan .search #MasTamvanSearchbox:focus{width:80%}}</style>
<div id='DaftarIsiBlogMasTamvan'>
<div class="search">
<input placeholder="Find Content" id="MasTamvanSearchbox" type="text" />
</div>
<div id="Daftar_Isi_Blog_Mas_Tamvan">
</div>
<script src='https://rawgit.com/mastamvan/backup/master/daftarisiquicksearch.js' type="text/javascript"></script>
<script src="http://blogkangwira.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
</div>

Selanjutnya silahkan kamu ganti URL yang sudah saya tandai diatas dengan URL Blog kamu yah
Lakukan Pratinjau terlebih dulu sebelum kamu publikasikan

Apabila Kolom Pencarian pada Widget diatas tidak berfungsi dengan baik, silahkan kamu tambahkan kode dibawah ini pada halaman daftar isi yang sudah kamu buat tadi.

<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>

Setelah itu silahkan kamu publikasikan kembali Halaman Daftar Isi nya.

Mudah Bukan ?

Mudah bukan tutorial Membuat Halaman Daftar Isi Lengkap di Blog yang Responsive ini?

Ohya.. Kode HTML ini saya dapat dari Blog Mastamvan.

Jangan sungkan untuk bertanya pada kolom komentar dibawah ini apabila kamu merasa kesulitan dalam menerapkan tutorial diatas.

Jangan lupa berlangganan gratis dengan memasukkan alamat email kamu pada kolom Berlangganan Gratis dibawah ini, supaya selalu mendapatkan pemberitahuan ketika ada artikel baru yang saya publish selanjutnya.

Terimakasih