Free Thesis Google Custom Search Box for Thesis Theme 2.0

Recently I add more free Thesis 2.0 Boxes for Thesis Theme 2.0 users, so I created another one box for Thesis Theme 2.0, that one is Google Custom Search Box.

How to create google custom search engine?

  1. First create google search engine via following link with your gmail id http://www.google.com/cse/
  2. At the time of get code page, click on look and feel page link, there you should select two page layout.
  3. Then click and save&get code button
  4. Then it will open another page, there give your search results page display url
  5. Then click save change buttons.

There you will get two type of code.

First one is google search box code – paste this code in our search box as per below instruction.

Second one is google search results page code – paste this code in your search results display page.

Let’s see how to use thesis google search box in your site Header.

If you want to add Google Search Box in your nav menu click here to see the tutorial.

Steps

  • First go to Thesis admin section
  • Then click select boxes after that click upload button
  • Then browse our thesis-google-search.zip file
  • Then click add button it shows your boxes installed successfully.
  • Then click on that check box and select save boxes button. That’s all now you successfully installed our google search box.
  • Once you successfully installed boxes, it will automatically go to Thesis Skin editor section.
  • Now go to Thesis skin editor section.
  • Then create two container name as header left and header right via Thesis Add boxes section
  • Then click on those container and configure two container as per below image
header class header right class
  • Then add those container in header container section(refer below image)
google search box
  • Then add our google search box as per above image
  • Then click on google search box and paste your google search box code(refer below image)
search box admin
    • Then go to CSS section
    • Then click on header package section and go to additional CSS section
    • Then paste following CSS code as per below image
.header-left {
float:left;
}
.header-right{
float:right;
margin-top:30px;
}
header css
  • Then save your template and check your site. That’s all.

OUTPUT

header search

 

 

 

 

Download Google Custom Search Box

 

 

 

We will be providing more Thesis Theme 2.0 Tutorials and Thesis 2.0 Boxes, so don’t miss those tutorials and Boxes, subscribe below box

We launched Thesis Skins for Thesis Theme 2.0., if you have time, visit our Thesis Skins page.

If you have any doubt regarding this box, feel free to ask me via below comment box.

If you like above box, share with your friends via following social media options.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Sarah January 9, 2013, 8:43 pm

    Hello,
    Thanks for this great post! I installed this box and it put the search box at the top left of the header. How can I move it to the bottom right of the header? Also, I want the search results to pop up on a separate page. Where do put the second code from Google to have them show on a separate page? Thanks for all your help!

    • Sarah January 9, 2013, 9:21 pm

      Ok, I figured out how to move it. I have another question now though.. 🙂

      Is there any way to get rid of the blue magnifiying glass so that only the search box is displayed?

      • admin January 10, 2013, 4:16 am

        ya it’s possible. paste the following code to this path thesis skin editor–> custom css

        .cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
        display: none !important;
        }

        after pasting above code click on save css button and check your site.

  • Michael Aulia January 16, 2013, 11:05 pm

    Can’t seem to click on the link “Download Google Custom Search Box” anymore. Did you take the hyperlink out?

    • admin January 17, 2013, 2:15 am

      Now you can download the Google Search Box.

  • al January 20, 2013, 8:45 pm

    I also wondering where you would paste the second code for your search page?

    Thanks.

    • admin January 21, 2013, 3:30 am

      Hi,

      At the time of look and feel section, you gave one page url, paste the second code in that page HTMl section.

      • al January 22, 2013, 11:01 am

        Sorry, forgot to come back and say thanks, so thanks.

        • admin January 22, 2013, 3:33 pm

          Welcome….

  • Laura June 5, 2013, 5:16 am

    I am also trying to figure out where to put my second code. What do you mean “look ad feel” section? I am pretty sure I don’t have one of those…

Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.