How to Add Advanced Search Bar in Blogger - Live Search 2026

 

Default Blogger search = ugly + slow + no live results. Pro blogs have live search like Amazon - type shows posts instantly. Need for 160 posts.

In Post #161, advanced search.

Step 1: Remove Default Search Box

1. Layout → Search Box gadget → Remove
2. Theme → Edit HTML → Search type='Search' → Delete entire b:widget

Step 2: Add Advanced Live Search HTML

Add this where you want search - header below mega menu Post #146:

<div id="adv-search-wrap" style="position:relative;max-width:600px;margin:20px auto;">
  <input id="adv-search-input" type="text" placeholder="Search 160 tutorials... (dark mode, mega menu...)" style="width:100%;padding:14px 50px 14px 20px;border-radius:30px;border:2px solid #e5e7eb;font-size:16px;outline:none;"/>
  <button id="adv-search-btn" style="position:absolute;right:6px;top:6px;background:#111;color:#fff;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;">🔍</button>
  <div id="adv-search-results" style="position:absolute;top:100%;left:0;right:0;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.15);z-index:9999;display:none;max-height:400px;overflow-y:auto;"></div>
</div>

Step 3: Add CSS + Live Search JS

Paste before </body>:

<style>
.adv-result-item{padding:12px 16px;border-bottom:1px solid #f3f4f6;display:flex;gap:12px;text-decoration:none;color:#111;}
.adv-result-item:hover{background:#f9fafb;}
.adv-result-item img{width:50px;height:50px;border-radius:8px;object-fit:cover;}
.adv-result-title{font-weight:600;font-size:14px;}
.adv-result-snippet{font-size:12px;color:#6b7280;}
#adv-search-wrap.dark input{background:#1f2937;color:#fff;border-color:#374151;}
</style>

<script>
// Advanced Live Search for Blogger - Post #161
let searchTimeout;
document.getElementById('adv-search-input').addEventListener('input', function(e){
  clearTimeout(searchTimeout);
  let q = e.target.value.trim();
  let resBox = document.getElementById('adv-search-results');
  if(q.length < 2){ resBox.style.display='none'; return; }
  searchTimeout = setTimeout(() => {
    fetch(`/feeds/posts/summary/?alt=json&q=${encodeURIComponent(q)}&max-results=8`)
    .then(r => r.json()).then(data => {
      let entries = data.feed.entry || [];
      if(entries.length==0){ resBox.innerHTML='<div style="padding:16px;text-align:center;">No results for "'+q+'"</div>'; resBox.style.display='block'; return; }
      let html = '';
      entries.forEach(entry => {
        let title = entry.title.$t;
        let link = entry.link.find(l=>l.rel=='alternate').href;
        let thumb = entry.media$thumbnail ? entry.media$thumbnail.url.replace('s72','w100-h100') : 'https://via.placeholder.com/50';
        let snippet = entry.summary ? entry.summary.$t.substring(0,70)+'...' : '';
        html += `<a class="adv-result-item" href="${link}"><img src="${thumb}"/><div><div class="adv-result-title">${title}</div><div class="adv-result-snippet">${snippet}</div></div></a>`;
      });
      resBox.innerHTML = html;
      resBox.style.display='block';
    });
  }, 300);
});
document.addEventListener('click', function(e){
  if(!e.target.closest('#adv-search-wrap')) document.getElementById('adv-search-results').style.display='none';
});
document.getElementById('adv-search-btn').addEventListener('click', function(){
  let q = document.getElementById('adv-search-input').value;
  if(q) location.href='/search?q='+encodeURIComponent(q);
});
</script>

Step 4: How It Works

Feature	What
Live search	Type "dark" → Shows Post #150 dark mode instantly without reload - uses Blogger JSON feed
Debounce 300ms	Waits typing stop → No spam API calls
Thumbnail	Shows post thumb from Post #155 Pinterest images
Dark mode	Auto matches your Post #150 dark mode - add .dark class via JS

Step 5: Connect to Dark Mode Post #150

// Add to your dark mode JS Post #150
if(localStorage.getItem('darkMode')=='enabled'){
  document.getElementById('adv-search-wrap').classList.add('dark');
  document.getElementById('adv-search-results').style.background='#1f2937';
  document.getElementById('adv-search-results').style.color='#fff';
}

Step 6: Test

1. Type "menu" → Should show Post #146 mega menu
2. Type "backup" → Post #151
3. Type "xyzabc" → Shows "No results" - good
4. Mobile: Check responsive - max-width 600px works
5. Speed: No extra library - uses native fetch - 0kb impact

Post #161 Complete - live search added.

Next Post #162: How to Add Breadcrumbs Advanced SEO in Blogger.