S
SnakeNet
Xi
Programador
Personalizar el diseño del motor búsqueda personalizada de 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í:
Y solo tenemos que añadir de nuestra parte la mejora del css:
Quitar la imagen de la búsqueda
Botón de búsqueda
Recuadro cuando no ve resultados
Borde del área
Modificación de las pestañas
Títulos de los resultados
Rutas de los enlaces de los resultados
Aquí la demostración:
http://jsfiddle.net/9y9mwkc4/embedded/result/

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
Insertar CODE, HTML o 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]
Insertar CODE, HTML o 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]
Insertar CODE, HTML o 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]
Insertar CODE, HTML o PHP:
[COLOR=#000000][FONT=Times New Roman].gsc-tabsArea{border-color: #FF9900 !important;}[/FONT][/COLOR]
Insertar CODE, HTML o PHP:
[COLOR=#000000][FONT=Times New Roman].gsc-tabHeader.gsc-tabhInactive{border-color: #E9E9E9 !important; background: #E9E9E9 !important;}[/FONT][/COLOR]
Insertar CODE, HTML o 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]
Insertar CODE, HTML o 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/