Step 1. Go to Google's Custom Search Site

Go to google.com/cse and sign in to your Google account.

---

Step 2. Create a new search box

Click on "Add" and type in your website's URL in the following page. ​Then click on "Create" at the bottom. And on the following page under "Modify Your Search Engine", click on "Control Panel".

---

Step 3. Select search box's layout

Click on "Look and Feel" on the left. Then select "Two Page" and click "Save and Get Code".

Note: If you'd like to change your search box's button color, now is the time to do so. Click "Customize", and then click "Search Button". Add your hex color code under background color and border color sections. Then choose "Save and Get Code".

---

Step 4. Create search results page on your site

Under the "Pages" tab in your Weebly site editor, click on "Add Page". Name this page "results" [lower case letters]. Click "Save Settings".

---

Step 5. Add new "Results" page to Google search code

Click "Search Results Details" at the top. Then ​add "results.html" into the top space, and then click save.

---

Step 6. Copy Your Google Custom Search Code

Copy the HTML code you're provided.

---

Step 7. Embed Google Search code into the header of your site

Click on "Design", and then "Edit HTML/CSS". Add the following code into the HTML editor underneath the "Phone-Number" and "Social" table and paste your Google Custom Search Code into the code you just added as shown in orange below:

<table class="google">
    <tr>
        <td class="google">ADD GOOGLE SEARCH BAR CODE HERE</td>
    </tr>
</table>

Note: Be sure to click on the appropriate page layout of your site on the left.

---

Step 8. Change CSS Code

Click on "main.style-css" and scroll down until you find the following code. Change it as displayed below in orange.
​
#header-right table .google {
    width:400px;
}

---

Step 9. Copy code for Search Results

Click on "Next: Get Code For Search Results".

---

Step 10. Paste the Search Results Code on your results page

Click on "Pages" at the top. Then click on your "results" page, and click "Edit Page".

Drag and drop the "Custom HTML" element into the page and paste your Google Search result's code into the element.

---

You're done! Publish your site to test your new Google Custom Search Box!

---

Tips & Additional Information

Make sure you didn't disallow Google to index your site by checking "Hide Site From Search Engines" under  "Settings>Search Engine Optimization". Weebly has your site set by default to be indexed by search engines.

If your site has yet to be indexed by Google, no search results will appear when you use your Google Custom Search. Give Google a couple days to index your website. You can expedite this process by submitting your site to Google in your Google Webmaster Tools.

---

comments powered by Disqus