¿Búsqueda personalizada de Google con un cuadro y botón de búsqueda personalizados?

Question

Estoy tratando de hacer una búsqueda personalizada de Google (solo necesito algún tipo de motor de búsqueda en mi sitio), y tengo que hacerlo para poder usar mi propio cuadro de búsqueda (campo de entrada). Necesito que sea del tamaño exacto. También necesito poder hacer mi propio botón para buscar. Voy a necesitar poder cambiar el tamaño y el fondo del botón de búsqueda. Todavía no estoy del todo seguro, pero en realidad podría necesitar que sea un img regular.

¿Alguien sabe cómo hacer esto?

Si no puede hacer esto con Google, ¿conoce otra forma de hacerlo?

Si no hay otra manera además de usar su propio motor de búsqueda, ¿puedo obtener un enlace a un tutorial muy simplificado sobre cómo hacer mi propio buscador? Estoy dispuesto a poner el trabajo extra para aprender, pero probé un poco, y después de ver tres tuts diferentes, me rendí porque eran muy largos y confusos. Espero haber estado buscando en los lugares equivocados.

Answer 1

Aquí es el que estoy usando, sólo tiene que añadir algunos estilos de <input id='q' que es el cuadro de búsqueda y < input value='MyButton' es el botón para hacer clic

<!-- Google CSE Search Box Begins --> 
<center> 
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="http://myblog"> 
    <input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/> 
    <input value="FORID:11" name="cof" type="hidden"/> 
    <input id="q" style="width:600px;" name="q" size="75" type="text"/> 
    <input value="MyButton" name="sa" type="submit"/> 
</form> 
</center> 
.... 

Editar: Por encima es mi respuesta desde 2010, no puedo confirmar si está funcionando o no, pero aquí está el que está funcionando.

<div id="cse" style="width: 100%;">Loading</div> 
<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript"> 
    google.load('search', '1', {language : 'en'}); 
    google.setOnLoadCallback(function() { 
    var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXX:YYYYYYYYYYYYYY'); 
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); 
    var options = new google.search.DrawOptions(); 
    options.setAutoComplete(true); 
    customSearchControl.draw('cse', options); 
    }, true); 
</script> 

Para más información: se refieren a https://developers.google.com/custom-search/docs/js/cselement-devguide

Answer 2

Para los empleados de Google que están buscando una solución con la opción de superposición de nuevos "Resultados" bajo "look and feel". Usé la respuesta de YOU y agregué algunos hacks menores para que funcione. La idea básica es obtener el código que Google le brinda, ocultar el cuadro de búsqueda y el botón de Google, y usar la respuesta de USTED con los códigos XXXXX: YYYY correctos. Mientras se oculta <gcse:search></gcse:search>" no use display:none de lo contrario los resultados de búsqueda no funcionarán.

<script> 
    (function() { 
    var cx = 'XXXXXXXXXX:YYYYYYYYY'; 
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; 
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); 
})(); 
</script> 
<div style="width:0px;overflow:hidden;height:0px;"> <!-- if you use display:none here, it doesn't work--> 
    <gcse:search></gcse:search> 
</div> 
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action=""> 
    <input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/> 
    <input value="FORID:11" name="cof" type="hidden"/> 
    <input id="q" style="" name="q" size="75" type="text"/> 
    <button class="btn">Search</button> 
</form> 

Answer 3

ge stackoverflow,

el tema que realmente me disparó-lo suficiente como para hacer un mini recorrido - si usted está tratando de establecer una barra v2, tratar con el catalejo plana, sólo quieren para que el spyglass funcione, desea reemplazar la barra personalizada usando v2, encontrar y ubicar los estilos utilizados y anularlos. ¡Espero eso ayude! http://t.co/9nvx2l0DeD @ eb_p1

largo dirección: http://eburnett.hubpages.com/hub/googlecustomsearchenginev2