Google Sites Help

US ✆ +1 (302) 672 3007

UK ✆ +44 (207) 871 5021

Steegle - Google Sites & G Suite Experts

Site Search Gadget Code - new Google Sites

Code you can use in an Embed Code box to give a Search Gadget in new Google Site

Code - Search Gadget

Share via Twitter
Share via LinkedIn
Share via Facebook
<!DOCTYPE html>
<html>
  <head>
    <base target="_blank">
<!-- Pleace this snippet right after opening the head tag to make it work properly -->

<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->


<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
  function submitSearch(){
        var siteSearchUrl = 'https://www.steegle.com/_/search?query=';  // Replace with your site's search URL
        var query = document.getElementById("search-query-input").value;
        var url = siteSearchUrl + query
  if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
  {
   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>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->  
    <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>

Add this code to an embed code box - see Insert HTML, JavaScript and CSS - new Google Sites

Need Help?

If you need help configuring this site search gadget code or getting it to work the way you want please use our support service.

Try it!

Keep up-to-date

Join the New Google Sites Update Group to get email notifications .

Subscribe to our newsletter for emails about all things Steegle