Membuat Halaman Daftar Isi Lengkap Di Blog Responsive

Sabtu, 31 Oktober 2015

Untuk menciptakan 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 aneka macam 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 wacana Membuat Halaman Daftar isi Lengkap di Blog Responsive.

Kenapa judulnya harus ada responsive, alasannya yakni ditahun ini, pengguna internet diseluruh dunia selalu memakai Smartphone nya untuk melaksanakan pencarian di google.

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



Pada artikel sebelumnya, saya sudah pernah menyebarkan 2 buah artikel wacana membuat daftar isi di blog.

Kamu sanggup lakukan pencarian pada blog ini kalau kau ingin mencoba tampilan lainnya.

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

Tampilannya Halaman Daftar isi yang akan saya bahas kali ini sanggup kau lihat pada gambar dibawah.


Jika kau ingin melihatnya secara eksklusif tampilannya pada blog, kau sanggup klik tombol DEMO dibawah ini.

D E M O

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

Baca juga: Halaman Daftar Isi Fast Loading

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

• Langkah Pertama, Pastikan kau sudah masuk kedalam Dashboard Blog kau yah
• Langkah kedua, kau buat dulu halaman gres dengan judul Daftar Isi
• Langkah ketiga, pilih tab HTML (Jangan Compose yah)
• Selanjutnya salin isyarat 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 kau ganti URL yang sudah saya tandai diatas dengan URL Blog kau yah
• Lakukan Pratinjau terlebih dulu sebelum kau publikasikan

Apabila Kolom Pencarian pada Widget diatas tidak berfungsi dengan baik, silahkan kau tambahkan isyarat dibawah ini pada halaman daftar isi yang sudah kau 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 kau publikasikan kembali Halaman Daftar Isi nya.

Mudah Bukan ?

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

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

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

Jangan lupa berlangganan gratis dengan memasukkan alamat email kau pada kolom Berlangganan Gratis dibawah ini, semoga selalu mendapat pemberitahuan dikala ada artikel gres yang saya publish selanjutnya.

Terimakasih

Share This :