Cara Membuat Halaman Daftar Isi Blogger Mudah

Selamat datang di Apa Aja Dot kom. Pada postingan kali ini saya akan memberikan tutorial singkat Cara Membuat Halaman Daftar Isi Mudah. Bagi yang belum tahu apa  itu halaman pada blogger bisa di baca 6Halaman Pages Penting Yang Wajib Ada Di Blog Kalian. Oke langsung saja simak tutorial saya di bawah.

Baca Juga  : Cara Membuat Halaman Term Of Service / TOSOtomatis

1. Masuk ke akun blogger kalian, masuk ke bagian halaman dan klik Halaman Baru.
   
2. Pindah ke mode HTML dan masukan judul Daftar Isi.
   
3. Copy dan Pastekan Kode di bawah ini.

              <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 id="MasTamvanSearchbox" placeholder="Find Content" 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="https://aajdotkom.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

</div>

4. Ganti Alamat web yang bercetak tebal dengan alamat blog kalian.

5. Jika sudah pas kemudian klik publikasikan.

Baca Juga : Cara Membuat Halaman Di Blogger Mudah

Selamat Halaman Daftar Isi kalian sudah jadi. Jangan lupa masuk ke Tata Letak kemudian Tambah Widget, pilih halaman dan masukan halaman Daftar Isi agar tampil di beranda blog kalian. Itu dia Cara Mudah Membuat Halaman Daftar Isi.

Terima kasih sudah berkunjung, apabila ada kesalahan saya mohon maaf. Jangan lupa share jika bermanfaat. Sampai jumpa di postingan selanjutnya.