Tutorial: Personalizar o design do motor de busca personalizada do Google

JezusHD disse:

Tienes un tutorial para personalizar el botón de búsqueda de Google Adsense.

Clique para expandir...

SnakeNet disse:

No sabia aquí personalizas todo y pues ya que lo realice pues pensé lo añado aquí.

Clique para expandir...

Pompinchu disse:

Añade eso y se genera un buen tutorial. De antemano, se agradece el aporte. :encouragement:

Clique para expandir...

SnakeNet disse:

Personalizar o design do motor de busca personalizada do Google

Estuve ayudando a un usuario [MENTION=117787]Bloggero[/MENTION] mucho de ustedes lo conocerán y al final se decanto por usar el código de el recuadro de búsqueda de google que perfectamente lo podéis crear aquí.

https://www.google.com/cse/create/new?hl=es

Pero lo que no le quedaba bien en su web era la imagen de google en el búscador y me ofrecí para ver si se podía quitar en resumen tras realizar varias pruebas quedo bien y pues lo termine personalizandolo entero y como me gusto dicha búsqueda que hacia tiempo que no la usaba me anime a crear este tema.

El código que os va a generar debe ser algo así:

HTML:

<script>
  (function() {
     var cx = '003139723t43344202343:e8mubil6vsg';
    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>
<gcse:search></gcse:search>

Y solo tenemos que añadir de nuestra parte la mejora del css:

Quitar la imagen de la búsqueda

Inserir CODE, HTML ou PHP:

[COLOR=#000000][FONT=Times New Roman]input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus{background: none !important;}[/FONT][/COLOR]

Botón de búsqueda

Inserir CODE, HTML ou PHP:

[COLOR=#000000][FONT=Times New Roman]input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus{background: #000 !important;}[/FONT][/COLOR]

Recuadro cuando no ve resultados

Inserir CODE, HTML ou PHP:

[COLOR=#000000][FONT=Times New Roman].gs-no-results-result .gs-snippet, .gs-error-result .gs-snippet{background: rgb(255,244,194) !important; border: 1px solid rgb(255,204,51) !important; color: #000 !important;}[/FONT][/COLOR]

Borde del área

Inserir CODE, HTML ou PHP:

[COLOR=#000000][FONT=Times New Roman].gsc-tabsArea{border-color: #FF9900 !important;}[/FONT][/COLOR]

Modificación de las pestañas

Inserir CODE, HTML ou PHP:

[COLOR=#000000][FONT=Times New Roman].gsc-tabHeader.gsc-tabhInactive{border-color: #E9E9E9 !important; background: #E9E9E9 !important;}[/FONT][/COLOR]

Títulos de los resultados

Inserir CODE, HTML ou PHP:

[COLOR=#000000][FONT=Times New Roman].gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b{color: #0000CC !important;}[/FONT][/COLOR]

Rutas de los enlaces de los resultados

Inserir CODE, HTML ou PHP:

[COLOR=#000000][FONT=Times New Roman].gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl{color: #008000 !important;}[/FONT][/COLOR]

Aquí la demostración:
http://jsfiddle.net/9y9mwkc4/embedded/result/​

Clique para expandir...