Membuat Daftar Isi Dengan Quick Search

Membuat Daftar Isi Dengan Quick Search

Cara Membuat Daftar Isi Blog Responsive Dengan Quick Search Content

Tutorial Memasang Daftar Isi Di Blog Dengan Toggle Pencarian Konten. Halo sobat blogger, kali ini saya 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
    • Membuat Daftar Isi Dengan Quick Search
  • Jangan lupa kasih judul terlebih adhulu, agar urlnya sesuai dengan judul laman, contoh Sitemap / Daftar Isi
  • Lalu masuk ke mode HTML jangan Compose
    • Membuat Daftar Isi Dengan Quick Search
  • Langkah terakhir copy kode Widget Daftar Isi Plus Quick Search Content dibawah ini dan paste kedalamnya
    • 
<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://mastamvan.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
</div>

    Silahkan ganti atau hapus url http://mastamvan.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 :)

Tutorial Blogger Lainnya :


Cukup sekian dan terima kasih, semoga artikel tentang Membuat Daftar Isi Dengan Quick Search ini bermanfaat...
Tinggalkan Komentar