Cara Membuat Daftar Isi Ditambah Dengan Quick Search Content

Cara Membuat Daftar Isi Ditambah Dengan Quick Search Content. Halo sobat blogger, kali ini Love Karawang akan membagikan daftar isi blog saya (Blog Mas Tamvan), daftar isi blog saya ini dilengkapi dengan pencharian konten...

jadi akan memudahkan para pengunjung untuk mencari konten yang ada di blog kita, tinggal tulis artikel yang di cari nanti akan secara otomatis ditmpilkan di daftar isinya...

Untuk melihat tampilannya, kalian bisa liat di laman daftar isi blog saya...

Untuk tutorial pemasangannya sangat mudah, kalian tinggal ikuti tutorial singkat dibawah ini...

Tutorial Membuat Daftar Isi Ditambah Dengan Quick Search Content

• Langkah pertama. Baca بِسْــــــــــــــــــمِ اللهِ الرَّحْمَنِ الرَّحِيْمِ

• Login ke akun blogger kalian

• Selanjutnya bikin laman / halaman statistik baru

• Jangan lupa kasih judul terlebih adhulu, agar urlnya sesuai dengan judul laman, contoh Sitemap / Daftar Isi

• Lalu masuk ke mode HTML jangan Compose

• Langkah terakhir copy kode Widget Daftar Isi Plus Quick Search Content dibawah ini dan paste kedalamnya.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css"> .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}a:link{color:#fc4f3f;text-decoration:none;outline:none;transition:all .25s}a:visited:hover{color:#fc4f3f;text-decoration:none}a:visited,a:link:hover{color:#444;text-decoration:none}table{max-width:100%;width:100%;margin:1.5em auto}table td,.post-body table caption{border:1px solid #d9d9d9;text-align:left;vertical-align:top;padding:10px}table th{border:1px solid #009abf;text-align:left;vertical-align:top;padding:10px}table.tr-caption-container{border:1px solid #eee}th{font-weight:700}table caption{border:none;font-style:italic}td:hover{background:#fafafa}#Daftar_Isi_Blog_Mas_Tamvan{background:#FF0101;color:#FF0101;margin:0 auto;padding:5px}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}.toc-header-col1{background-color:#f5f5f5;width:250px;padding:10px}.toc-header-col2{background-color:#f5f5f5;width:75px;padding:10px}.toc-header-col3{background-color:#f5f5f5;width:125px;padding:10px}.toc-header-col1 a:link,.toc-header-col1 a:visited.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-weight:700;letter-spacing:.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.MasTamvancol1,.MasTamvancol2,.MasTamvancol3{background:#fdfdfd;font-size:89%;padding:5px}.MasTamvancol1 a,.MasTamvancol2 a,.MasTamvancol3 a{color:#FF0101;font-size:13px;font-weight:700}.MasTamvancol1 a:hover,.MasTamvancol2 a:hover,.MasTamvancol3 a:hover{color:#e76e66}table{width:100%;counter-reset:rowNumber;margin:0 auto}.MasTamvancol1{counter-increment:rowNumber}table tr td.MasTamvancol1:first-child::before{content:counter(rowNumber);min-width:1em;margin-right:.5em}td.MasTamvancol2{background:#fafafa}@media screen and (max-width:500px){td.MasTamvancol2,.toc-header-col2,.toc-header-col3,td.MasTamvancol3{display:none}#DaftarIsiBlogMasTamvan .search #MasTamvanSearchbox:focus{width:80%}}</style>

<br />
<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="http://Lovekarawang.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
</div>
</div>

Catatan : Silahkan ganti atau hapus url http://Lovekarawang.blogspot.com..

• Juka Quick searchnya tidak bekerja, silahkan tambahkan kode dibawah ini...

<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>

• Kalo sudah, Langsung Publikasikan.

• Dan Selesai.

Jangan lupa mampir ke artikel lainnya ya gan :)