Tip: how to add the google search box

  • jaztwo


    Well, here’s a tip I wanted to bring to share with you. is to add and replace the theme’s search box for google custom search box.

    1- the first thing you will need to create our search engine, is not difficult and Google tells you how, to create it go to http://www.google.com/cse. in the design, I recommend using bubblegun or shiny as they look good with the default theme colors.

    2- Now click on “Save and get code” and you get the code for our search engine, I recommend that the search is hosted on google to only have our box on our website. Now copy the code of the search box.

    3- Put a text widget in the header. and paste code that Google has given you there. Now the search appear in the header. if this is ugly and misplaced, to fix this, use CSS.

    4- in the custom CSS option, use the following code

    position: absolute;
    top: 200px;
    left: 680px;

    you can put it wherever you like, that code will put the box in the bottom bar.

    5- Now we see that the input textbox is very small. to solve this by modifying the code that google has given us just a little. if you used a custom design, there should be a code like this

    input.gsc-input {
    border-color: #000000;

    if you didn’t, you can add the following code

    input.gsc-input {
    width: 140px;

    if you use a custom design, the code would look like

    input.gsc-input {
    border-color: #000000;
    width: 140px;

    6- Now we have our custom search box. Hope this helps someone.

    Note: You can also add adsense to the custom search engine

    Note 2: sorry for my bad English


    Kenneth John Odle


    I hadn’t thought about this, but I might use this in future. Thanks!


Viewing 2 posts - 1 through 2 (of 2 total)

  • You must be logged in to reply to this topic.