Steegle logo

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

<!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!

Feedback

Please let us know if this article helped or if you know of of any improvements.

Keep up-to-date

Join the Sites Update Group on the Google Sites Classic Comparison to get email notifications about New Google Sites updates.

Newsletter

Subscribe to our newsletter for emails about all things Steegle.com