How to Add Search Box in Blogger - Custom Search 2026

 

Blogger default search = ugly, slow, no suggestions. Custom search box = live suggestions as you type, looks pro, keeps users on site, reduces bounce. Must add in header + sidebar.

In Post #145, add custom search.

Step 1: Add Search Box in Header (Main)

1. Blogger → Theme → Edit HTML → Find <div class='header-right'> or header section → Inside paste:

<div class='custom-search'>
<form action='/search' method='get' style="display:flex;align-items:center;background:#f3f4f6;border-radius:20px;padding:6px 12px;max-width:260px;">
<input type='text' name='q' placeholder='Search guides...' style="border:none;background:transparent;outline:none;flex:1;font-size:14px;"/>
<button type='submit' style="border:none;background:#000;color:#fff;border-radius:50%;width:28px;height:28px;cursor:pointer;">🔍</button>
</form>
<div id='live-results' style="position:absolute;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,0.1);max-width:300px;width:90%;z-index:999;display:none;margin-top:6px;max-height:300px;overflow-y:auto;"></div>
</div>

Step 2: Add Live Search Suggestions JS

1. Find </body> → Above it paste:

<script>
// Live Search - Post 145
var searchInput = document.querySelector('.custom-search input[name="q"]');
var liveBox = document.getElementById('live-results');
if(searchInput){
  searchInput.addEventListener('input', function(){
    var q = this.value.trim();
    if(q.length<2){ liveBox.style.display='none'; return; }
    var script = document.createElement('script');
    script.src = '/feeds/posts/summary?alt=json-in-script&q='+encodeURIComponent(q)+'&max-results=5&callback=showLive';
    document.body.appendChild(script);
  });
}
function showLive(json){
  var posts = json.feed.entry;
  var box = document.getElementById('live-results');
  if(!posts){ box.style.display='none'; return; }
  var html='';
  for(var i=0;i<posts.length;i++){
    var post=posts[i];
    var url=''; for(var j=0;j<post.link.length;j++){ if(post.link[j].rel=='alternate'){ url=post.link[j].href; break; } }
    var title=post.title.$t;
    html+='<a href="'+url+'" style="display:block;padding:10px 14px;border-bottom:1px solid #f0f0f0;text-decoration:none;color:#111;font-size:13px;">'+title+'</a>';
  }
  box.innerHTML=html;
  box.style.display='block';
}
document.addEventListener('click', function(e){
  if(!e.target.closest('.custom-search')){ document.getElementById('live-results').style.display='none'; }
});
</script>

Step 3: Add Search in Sidebar + 404 Page

1. Layout → Sidebar → Add Gadget → HTML/JavaScript → Paste simple search:

<form action="/search" method="get" style="display:flex;gap:6px;">
<input type="text" name="q" placeholder="Search..." style="flex:1;padding:10px;border:1px solid #ddd;border-radius:10px;"/>
<button style="background:#000;color:#fff;border:none;padding:10px 16px;border-radius:10px;">Go</button>
</form>

Also add same to 404 page: Theme → Edit HTML → Find data:view.isError → Inside add search form so user not lost.

Step 4: Style Search Results Page

1. Find .search-query or .status-msg-wrap CSS → Add:

.status-msg-wrap{background:#f0f9ff;border:1px solid #0ea5e9;border-radius:12px;padding:14px;margin-bottom:20px;text-align:center;}
.status-msg-body{font-weight:600;}

Step 5: Google Custom Search (Alternative Pro Method)

If you want Google powered search with AdSense earnings:

1. Go to programmablesearchengine.google.com → Create new engine → Sites: yourblog.blogspot.com → Create
2. Copy code → Layout → Add Gadget → HTML/JavaScript → Paste
3. Enable Search Ads in CSE settings → Earn from search results page (extra $20-50/month)

Type	Pros	Cons
Blogger Default	Fast	Ugly, no live
Post #145 Live Search	Fast, live suggestions, no external JS	Needs feed API
Google CSE	Best results, monetize search	Shows Google branding, slower

Recommendation: Use Post #145 live search for main + Google CSE on search page only.

Post #145 Complete.

Next Post #146: How to Add Categories Menu in Blogger - mega menu.