google sites search bar

How to embed a search bar in Sites.google.com

You can embed a search bar using the three options below in sites.google.com. One option is using a simple piece of code, the second is using google custom search and the third is using duduckgo custom search engine.

Sites.google.com search bar using code

Go to insert-> Embed and add the following code to your website. in the line containing “var sitesearchUrl=” replace your website search path. For example, my website’s search path is https://sites.google.com/search/muthalis-site?query=

<!DOCTYPE html>
<html>
  <head>
    <base target="_blank">



<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
  function submitSearch(){
        var siteSearchUrl = 'https://www.aozata.com/?s=';  // Replace with your site's search URL
        var query = document.getElementById("search-query-input").value;
        var url = siteSearchUrl + query
  if(typeof IE_fix != "undefined") 
  {
   var referLink = document.createElement("a");
   referLink.href = url;
   document.body.appendChild(referLink);
   referLink.click();
  }
  else { window.open(url,'_blank'); } // All other browsers
 }
function searchKeyPress(e){
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('search-icon').click();
        return false;
    }
    return true;
}

</script>

    <link rel="stylesheet" type="text/css" href="https://ssl.gstatic.com/docs/script/css/add-ons.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <style>
      body {margin:0;padding:14px 6px 0 6px;background-color:transparent;font-family: 'Roboto', sans-serif;overflow:hidden;}
      #search-icon,#clear-icon {padding:12px;height:24px;vertical-align:middle;cursor:pointer;}
      #clear-icon {visibility:hidden;}
      #search-query {
        width:50vw;min-width:480px;max-width:720px;
        margin:0 auto;overflow:hidden;border:0;border-radius:4px;color: #212121;background-color:#FFF;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);font-size:16px;line-height:24px;}
      #search-query-input {
        min-width:104px;width:66%;height:24px;font-size:16px;font-stretch: normal;letter-spacing: normal;line-height:24px;border:0;color:#000;background-color:transparent;cursor:text;
        text-align:start;vertical-align:middle;}
      @media all and (max-width: 480px) {  
          #search-query {min-width:200px;width:100%;}
       }
    </style>
  </head>
  <body>
        <!-- <input type="text" id="query" />
        <button id="search" onclick="submitSearch()">Search</button> -->

        <div id="search-query">
          <img id="search-icon" alt="Search"  onclick="submitSearch();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII=">
          <input type="text" id="search-query-input" placeholder="Search this site" onkeypress="return searchKeyPress(event);" style="box-shadow:none";>
        </div>

  </body>
</html>

Google custom search

 

Create a google custom search for your website from cse.google.com. From your control panel copy the search engine code and add it to your website from the embed section.

Duckduckgo

If you have enough pages indexed on duckduckgo, go to https://duckduckgo.com/search_box. Under site search, enter your google site’s URL. You will get a piece of code similar to the one below.

<iframe src="https://duckduckgo.com/search.html?site=https://sites.google.com/view/muthalis-site/home&prefill=Search " style="overflow:hidden;margin:0;padding:0;width:408px;height:40px;" frameborder="0"></iframe>

Now go to insert->embed->embed by code and add this code and click on publish.

How to embed a search bar in Sites.google.com 1