Free Google Clone Script Download 2022

In this blog, we learn how we create a Google Search Clone. We use HTML, Css, and javascript for this Free Google clone Script.

Hey Reader's Welcome to Tech & Fun Zone blog. In this blog, I will Share Free Google Clone Script. we will learn how we create a Google Search Clone. We use HTML, Css, and javascript for this Free Google Clone script, Hope you enjoy our blog so let's start with a basic HTML structure for a Google Search Clone.

If you want to become a web developer, then the Free Google Clone Script project will be very helpful for you. Because such projects will enhance your experience and you will be able to ease the web development field.

free google clone script

    Top Web Development Project Ideas For Beginers.

    Here I am sharing some Project Ideas whom you can do it to enhance your web development skills.

    1. One-page layout
    2. Netflix Landing Page Clone
    3. Login authentication
    4. Product landing page
    5. Giphy with an unique API
    6. JavaScript quiz game
    7. To-do list
    8. SEO-friendly website
    9. JavaScript drawing
    10. Search engine result page
    11. Free Google Clone Script
    12. Tribute page
    13. Survey form
    14. Exit plugin
    15. Social share Buttons
    16. And Many More....

    So there are so many web development project ideas for beginners. So today I'll share with you Free Google Clone Script Code.

    Benefits of Using Free Google Clone Script

    A fully useful duplicate of Google's main page, you'll use it for searches and everything else. This Free Google clone Script is styled with CSS to seem as much as look to current google's main page, I have added a small amount of jquery magic to form it totally useful.

    free google clone script

    How To Create Google HomePage Lookalike

    To create or develop a Google's main landing page, you must have to know basic knowledge of HTML and CSS and some strong knowledge of JavaScript. Keep in mind that you just need to build a duplicate of the Google home page together with the Google emblem, search icons, text box, Gmail, and pictures buttons – essentially, everything that you just see on Google’s main home page. This could be comparatively straightforward, provided you're good in HTML and CSS.

    Since the aim here is to create a duplicate of Google’s home page, you wish not to worry an excessive amount of regarding the practicality of the elements of the page, but i have added some JavaScript code to work this with google's main home page.

    Steps To Create Google HomePage Lookalike

    HTML Code

     
      <div class="nav nav-pills">  
       <div><a target='_blank' href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.co.uk/%3Fgws_rd%3Dssl" class="colorfix"><button class="btn" role="button">Sign in</button></a></div>  
       <div>  
    <a class="gb_A" aria-label="Google apps" href="https://www.google.co.in/intl/en/about/products" aria-expanded="false" role="button" tabindex="0"><svg class="gb_Se" focusable="false" viewBox="0 0 24 24"><path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path></svg></a>  
       </div>  
       <div><a target='_blank' class="firstsbuttons" href="#">Images</a></div>  
       <div><a target='_blank' class="firstsbuttons" href="https://mail.google.com/mail/?tab=wm">Gmail</a></div>  
      </div>  
      <div class="page">  
       <img class="logo" src="https://blogger.googleusercontent.com/img/a/AVvXsEjcvOF4yIXb522SBmtzAve4-NkAK9Kpza5SzXv-a9FMwKYkOusRwU3ouaElJ1ZQ77qlDQHfreXJxFWjU8X53TwX0N6yKYxIkWKSkeE25B_MljL4zOiXiZ_yB7RS4oyaUfQfnNRf-uYaoCGsUzzazN12LIHLMtBgTEMgsBFpQkeYlq8ZP3J-XoIGCeevoA"> 
        
       <br><input id="searchme" class="search" title="Search" type="text"/>
    <br>  
       <div class="Bcontainer">  
        <div class="button left">Google Search</div>  
        <div class="button right">I'm Feeling Lucky</div> 
    </div>
    <div id="SIvCob">Google offered in:  <a href="https://www.google.co.in/setprefs?sig=0_Lr2KCxlEuNUPriq587E70L6hkkg%3D&amp;hl=hi&amp;source=homepage&amp;sa=X&amp;ved=0ahUKEwjsteuW57j2AhWLLJQKHUIeBQYQ2ZgBCBA">हिन्दी</a>    <a href="https://www.google.co.in/setprefs?sig=0_Lr2KCxlEuNUPriq587E70L6hkkg%3D&amp;hl=bn&amp;source=homepage&amp;sa=X&amp;ved=0ahUKEwjsteuW57j2AhWLLJQKHUIeBQYQ2ZgBCBE">বাংলা</a>    <a href="https://www.google.co.in/setprefs?sig=0_Lr2KCxlEuNUPriq587E70L6hkkg%3D&amp;hl=te&amp;source=homepage&amp;sa=X&amp;ved=0ahUKEwjsteuW57j2AhWLLJQKHUIeBQYQ2ZgBCBI">తెలుగు</a>    <a href="https://www.google.co.in/setprefs?sig=0_Lr2KCxlEuNUPriq587E70L6hkkg%3D&amp;hl=mr&amp;source=homepage&amp;sa=X&amp;ved=0ahUKEwjsteuW57j2AhWLLJQKHUIeBQYQ2ZgBCBM">मराठी</a>    <a href="https://www.google.co.in/setprefs?sig=0_Lr2KCxlEuNUPriq587E70L6hkkg%3D&amp;hl=ta&amp;source=homepage&amp;sa=X&amp;ved=0ahUKEwjsteuW57j2AhWLLJQKHUIeBQYQ2ZgBCBQ">தமிழ்</a>    <a href="https://www.google.co.in/setprefs?sig=0_Lr2KCxlEuNUPriq587E70L6hkkg%3D&amp;hl=gu&amp;source=homepage&amp;sa=X&amp;ved=0ahUKEwjsteuW57j2AhWLLJQKHUIeBQYQ2ZgBCBU">ગુજરાતી</a>    <a href="https://www.google.co.in/setprefs?sig=0_Lr2KCxlEuNUPriq587E70L6hkkg%3D&amp;hl=kn&amp;source=homepage&amp;sa=X&amp;ved=0ahUKEwjsteuW57j2AhWLLJQKHUIeBQYQ2ZgBCBY">ಕನ್ನಡ</a>    <a href="https://www.google.co.in/setprefs?sig=0_Lr2KCxlEuNUPriq587E70L6hkkg%3D&amp;hl=ml&amp;source=homepage&amp;sa=X&amp;ved=0ahUKEwjsteuW57j2AhWLLJQKHUIeBQYQ2ZgBCBc">മലയാളം</a>    <a href="https://www.google.co.in/setprefs?sig=0_Lr2KCxlEuNUPriq587E70L6hkkg%3D&amp;hl=pa&amp;source=homepage&amp;sa=X&amp;ved=0ahUKEwjsteuW57j2AhWLLJQKHUIeBQYQ2ZgBCBg">ਪੰਜਾਬੀ</a>  </div></div>
     
      <footer class="navi navi-tabs">  
       <ul class="bottomone rightone">  
          <li><a target="blank" href="https://www.google.co.uk/preferences?hl=en">Settings</a></li>
          <li><a target="blank" href="https://www.google.co.uk/intl/en/policies/terms/?fg=1">Terms</a></li>
          <li><a target="blank" href="https://www.google.co.uk/intl/en/policies/privacy/?fg=1">Privacy</a></li>  
       </ul>  
       <ul class="leftone bottomone">  
         <li><a target="_blank" href="https://google.com/search/howsearchworks/?fg=1">How Search Works</a></li>
               <li><a target="blank" href="https://www.google.co.uk/services/?fg=1">Business</a></li>
          <li><a target="blank" href="https://www.google.co.uk/intl/en/ads/?fg=1">Advertising</a></li> 
          <li><a target="blank" href="https://www.google.co.uk/intl/en/about.html?fg=1">About</a></li>
    
       </ul>   
      </footer>  

    Above is all HTML code for the Google Clone. Now, we write css & javascript for Google Clone.

    CSS Code

    <style>
      /* Google Clone Script by Techandfunzone */
      @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap'); 
        html {  
           width: 100%;  
           margin: 0;  
           padding: 0;  
     } 
      body {  
      font-family: 'Google sans', sans-serif;  
      font-size: 15px; 
      width: 100%;
     }  
     .page {  
      padding-top: 14vh;  
      text-align: center;  
      padding-bottom: 20px;  
      margin-bottom: 25vh;  
     }  
     .logo {  
      padding-bottom: 32px;  
     }  
     .search {  
      width: 45vw;  
      height: 3.5vw;
      padding: 8px;  
      border: 1px solid #d9d9d9; 
      border-radius: 52px; 
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC) no-repeat;  
      background-position: 98.5%;  
      background-size: 1.5em;  
     } 
      .search:hover {  
      border: 1px solid #b9b9b9;
      border-radius: 52px;
      border-top-color: #a0a0a0; 
      box-shadow: 2px 4px 11px #c0c0c0, -2px -4px 11px #fff;
      border: 2px solid rgba(255, 255, 255, 0.2);
     }  
     .search:focus {  
      outline: none;  
      border: 1px solid #4d90fe;  
     }  
     .Bcontainer {  
      text-align: center;  
      margin: 0 auto;  
      width: 270px;  
      padding-top: 30px;  
      padding-bottom: 20px;
     }  
     .button {  
      display: inline-block;  
      background: #f2f2f2;  
      padding: 8px 12px;  
      font-weight: 700;  
      font-size: 13px;  
      border: 1px solid #f2f2f2;  
      border-radius: 2px;  
      color: #757575;  
      font-family: arial, sans-serif;  
     }  
     .button:hover {  
      border: 1px solid #c6c6c6;  
      color: #222;  
      cursor: pointer;  
     }  
     .left {  
      float: left;  
     }  
     .nav > div > a {  
      padding: 0;  
      color: #000;  
      opacity: .75;  
     }  
     .nav > div > .colorfix {  
      opacity: 1;  
     }  
     .nav>div>a:hover,  
     .nav>div>a:visited,  
     .nav>div>a:focus {  
      background-color: white;  
     }  
     .nav-pills {  
      margin: 15px 5px;  
     }  
     .nav div {  
      float: right;  
      margin-right: 15px;  
     }  
     .firstsbuttons {  
      margin-top: 4.5px;  
     }  
     .btn,  
     .btn:active {  
      color: white;  
      font-weight: 700;  
      background: -webkit-linear-gradient(top, #4387fd, #4683ea);  
      padding: 4px 10.5px;  
      border: 1px solid #4285f4;  
      border-radius: 2px;  
      font-size: 13px;  
     }  
     .btn.focus,  
     .btn:focus,  
     .btn:hover,  
     .btn:visited,  
     .btn:active {  
      color: white;  
      cursor: pointer;  
     }  
     .nav>li>a>img {  
      opacity: .75;  
     }  
     .nav>li>a>img:hover {  
      opacity: 1;  
      cursor: default;  
     }  
     footer {  
      background: #f2f2f2;  
      border-top: 1px solid #e4e4e4;  
      max-height: 60px;  
      width: 100%;  
      padding: 15px 30px 5px 10px;  
      margin-bottom: 0;  
      position:absolute;  
      bottom:0;  
     }  
     .bottomone {  
      display: inline-block;  
      margin-bottom: 0;  
     }  
     .bottomone li a {  
      color: #666;  
      letter-spacing: 0.2px;  
     }  
     .bottomone li {  
      list-style-type: none;  
     }  
     .leftone {  
      float: none;  
     }  
     .rightone {  
      float: right;  
     } 
       .navi > li > a {  
      color: #000;  
      opacity: .75;  
     }  
     .navi > li > .colorfix {  
      opacity: 1;  
     }  
     .navi>li>a:hover,  
     .navi>li>a:visited,  
     .navi>li>a:focus {  
      background-color: white;  
     }  
     .navi-pills {  
      margin: 25px 5px;  
     }  
     .navi li {  
      float: right;  
      margin-right: 15px;  
     }
      a {
     text-decoration: none;
    }
      a:hover {
       text-decoration: underline;  
    }
    .gb_A{display:inline-block;outline:none;vertical-align:middle;-webkit-border-radius:2px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;width:22px;color:#000;cursor:pointer;text-decoration:none}#gb#gb a.gb_A{color:#000;cursor:pointer;text-decoration:none}
    #button-submit {
      background: url(https://raw.githubusercontent.com/Thoda-sa-pagal/ms-icon/main/mic.svg) no-repeat; 
      background-position: 2.5%;  
      background-size: 1.5em;
    }
    
    #button-submit:hover {
        background: url(https://raw.githubusercontent.com/Thoda-sa-pagal/ms-icon/main/mic.svg) no-repeat;
    }
    
    #button-submit:active {
        background: url(https://raw.githubusercontent.com/Thoda-sa-pagal/ms-icon/main/mic.svg) no-repeat;
        outline: none;
    }
    </style>
    <style data-iml="1646821239209">#gws-output-pages-elements-homepage_additional_languages__als{font-size:small;margin-bottom:24px}#SIvCob{color:#3c4043;display:inline-block;line-height:28px;}#SIvCob a{padding:10px 3px;margin: 0 auto;}.H6sW5{display:inline-block;margin:0 2px;white-space:nowrap}.z4hgWe{display:inline-block;margin:0 2px}</style>

    In Provided Above CSS you can customize some thing on your own.

    Javascript Code

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script> $(document).ready(function() {  
      var gsearch = function() {  
       var url = 'https://www.google.com/search?q=' + document.getElementById('searchme').value;  
       window.open(url, 'google');  
      };  
      var glucky = function() {  
       var url = 'https://www.google.com/search?q=' + document.getElementById('searchme').value + '&btnI';  
       window.open(url, 'google');  
      };  
      $(".left").click(gsearch);  
      $(".right").click(glucky);  
      $("#searchme").keypress(function(e) {  
       if (e.which == 13) {  
        gsearch();  
       }  
      });  
     });</script>

    Follow Below Steps to make Google Clone in Blogger:

    1. Go to Blogger Dashboard.
    2. Now Click on Theme Section and Scroll Down & Click on Revert to Classic Themes.
    3. After Click on Revert to Classic Theme and Now Turn off navbar
    4. Download the Script given below.
    5. Copy the Entire Code and paste it into theme section
    6. Click on Save. That's it! Enjoy your free Google Clone Script

    Download Free Google Clone Script

    Google Clone Script.zip
    4kb

    For Zip Password Join Our Telegram Channel and Type "#Google-Clone".

    Conclusion

    I hope that you have come to know about Free Google Clone Script and Dowload Google Clone Script for Blogger in this article.

    Hopefully, the Above tutorial has completely helped you to learn this script. If you have got any issue in understanding this tutorial. Then in fact you'll be able to inquire from me by commenting or Contact us

    Was it helpful? If it had been then don’t forget to share this text along with your alternative friends too.. Thank you for visiting. Happy Blogging..

    © Tech & Fun Zone
    Hi there, this is Arif. I am a Bachelors in computer by qualification who loves to write about blogs, softwares, windows and all it's related topics. I’m the one that writes, publishes, and maint…

    2 comments

    1. Awesome content, Thank you for sharing such nice content.
      1. Thank You Brother ❤....Keep Supporting....i am going to add ur site in my partners list...plz add back mine as well