Tutorial Blogger: Cómo poner una lupa en el buscador de blogger

mayo 19, 2015

Cómo poner una lupa en el buscador de blogger

Seguimos personalizando el diseño del blog para adaptarlo completamente a nuestra idea. Hoy vamos a ver cómo poner una lupa en el buscador de Blogger, un pequeño detalle que nos hará diferentes ¿no crees?

1.- El código que vamos a usar es:

<form action='/search' id='buscador' method='get'>
<input id='texto' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Buscar&quot;;}' onfocus='if (this.value == &quot;Buscar&quot;) {this.value = &quot;&quot;;}'/><input id='botonbuscar' type='submit' value='LUPA'/>
</form>

Si lo añadimos como gadget HTML/Javascript desde el panel de Diseño de Blogger, veremos ésto:

Un buscador de lo más sencillo sin formato ninguno. Vamos a ponerlo bonito y a añadir una lupa donde pone LUPA.




2.- Ahora que hemos copiado nuestro código en un gadget HMTL/Javascript y podemos verlo en vivo en nuestro blog, le daremos el formato desde la plantilla HTML.


Pinchamos en cualquier zona dentro de nuestra plantilla, donde aparece el código, y pulsamos a la vez: Control y la tecla F. Se abrirá el buscador interno de Blogger. Buscamos:

]]></b:skin>

Y justo encima pegamos el siguiente código:



/* Buscador con Lupa*/


#buscador { /*El buscador-form*/

height:34px;

width:300px;

padding:15px;

text-align:center;

background:#f5f5f5; /*color de fondo del buscador*/

}


#buscador #texto{ /*Texto*/

width:185px;

height:19px;

background:#fff;   /*color de fondo*/

border:none;

padding:2px 5px;

font-weight:normal;

border:1px solid #969696;  /*borde del buscador*/

color:#b0b0b0; 
 /*color de la letra*/
}


#buscador #botonbuscar{ /*Botón buscar*/

background:url(URL DE TU IMAGEN) no-repeat left top;

width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/

height:24px; 
 /*alto del botón donde irá tu imagen de la lupa*/

margin-left:5px;

border:none;

color:#348bab;  /*color de la letra, por si decides prescindir de la imagen*/

}

IMPORTANTE: recuerda adaptar tu imagen de la lupa con lupa al ancho y el alto del botón. En este caso:

width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/

height:24px; 
 /*alto del botón donde irá tu imagen de la lupa*/



3.- Si miras ahora en Vista Previa tienes ésto:


Si te fijas la palabra LUPA aparece encima del dibujo de nuestra lupa.


4.-  La forma más sencilla de eliminar el texto del botón es poniendo en color transparente la letra. Aparece en el último fragmento del código, así:


#buscador #botonbuscar{ /*Botón buscar*/

background:url(URL DE TU IMAGEN) no-repeat left top;

width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/

height:24px; 
 /*alto del botón donde irá tu imagen de la lupa*/

margin-left:5px;

border:none;

color: transparent;  /*color de la letra, por si decides prescindir de la imagen*/

}



5.- También podemos eliminar la imagen y quedarnos solo con el texto:

#buscador #botonbuscar{ /*Botón buscar*/
background: #000000 url(#) no-repeat left top;
width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/
height:24px;  /*alto del botón donde irá tu imagen de la lupa*/
margin-left:5px;
border:none;
color: #ffffff;  /*color de la letra, por si decides prescindir de la imagen*/
}

Si decides usar el texto, tienes que modificar la palabra LUPA que pusimos en el gadget HTML/JAVASCRIPT desde diseño por la que quieras:


Así:

<form action='/search' id='buscador' method='get'>
<input id='texto' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Buscar&quot;;}' onfocus='if (this.value == &quot;Buscar&quot;) {this.value = &quot;&quot;;}'/><input id='botonbuscar' type='submit' value='BUSCAR'/>
</form>


6.- Modificando los colores del código de la plantilla podemos conseguir integrar el formulario completamente en el diseño de nuestro blog:


Buscador minimalista black & white:

/* Buscador con Lupa*/

#buscador { /*El buscador-form*/
height:34px;
width:300px;
padding:15px;
text-align:center;
background:#ffffff;
}

#buscador #texto{ /*Texto*/
width:185px;
height:19px;
background:#000000;
border:none;
padding:2px 5px;
font-weight:normal;
border:0px solid #969696;
color:#ffffff;
}

#buscador #botonbuscar{ /*Botón buscar*/
background: #000000 url(#) no-repeat left top;
width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/
height:24px;  /*alto del botón donde irá tu imagen de la lupa*/
margin-left:5px;
border:none;
color: #ffffff;  /*color de la letra, por si decides prescindir de la imagen*/
}

Recuerda que puedes escoger los colores que quieras DE ESTA WEB, que es la que yo uso siempre.


Buscador en Rosa:

/* Buscador con Lupa*/

#buscador { /*El buscador-form*/
height:34px;
width:300px;
padding:15px;
text-align:center;
background:#ffffff;
}

#buscador #texto{ /*Texto*/
width:185px;
height:19px;
background:#F5A9BC;
border:none;
padding:2px 5px;
font-weight:normal;
border:0px solid #969696;
color:#000000;
}

#buscador #botonbuscar{ /*Botón buscar*/
background: #F5A9BC url(#) no-repeat left top;
width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/
height:24px;  /*alto del botón donde irá tu imagen de la lupa*/
margin-left:5px;
border:none;
color: #000000;  /*color de la letra, por si decides prescindir de la imagen*/
}


Buscador integrado con el fondo en azul:

/* Buscador con Lupa*/

#buscador { /*El buscador-form*/
height:34px;
width:300px;
padding:15px;
text-align:center;
background:#81DAF5;
}

#buscador #texto{ /*Texto*/
width:185px;
height:19px;
background:#ffffff;
border:none;
padding:2px 5px;
font-weight:normal;
border:1px solid #ffffff;
color:#81DAF5;
}

#buscador #botonbuscar{ /*Botón buscar*/
background: #81DAF5 url(#) no-repeat left top;
width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/
height:24px;  /*alto del botón donde irá tu imagen de la lupa*/
margin-left:5px;
border:none;
color: #ffffff;  /*color de la letra, por si decides prescindir de la imagen*/
}




Y reducir el tamaño del fondo para que no quede tan ancho y puedas colocarlo bien encajado en tu sidebar, en color lavanda:

/* Buscador con Lupa*/

#buscador { /*El buscador-form*/
height:34px;
width:250px; /*ancho total del buscador*/
padding:15px; /*margen exterior del buscador*/
text-align:center;
background:#E2A9F3;
}

#buscador #texto{ /*Texto*/
width:150px; /*ancho de la caja de búsqueda*/
height:19px;
background:#ffffff;
border:none;
padding:2px 5px;
font-weight:normal;
border:1px solid #ffffff;
color:#E2A9F3;
}

#buscador #botonbuscar{ /*Botón buscar*/
background: #E2A9F3 url(#) no-repeat left top;
width:80px;  /*ancho del botón donde irá tu imagen de la lupa*/
height:19px;  /*alto del botón donde irá tu imagen de la lupa*/
margin-left:0px; /*margen entre la caja de búsqueda y el botón BUSCAR o la LUPA*/
border:none;
color: #ffffff;  /*color de la letra, por si decides prescindir de la imagen*/
}



Solo con bordes naranjas, muy minimalista:

/* Buscador con Lupa*/

#buscador { /*El buscador-form*/
height:34px;
width:250px;
padding:15px;
text-align:center;
background:#ffffff;
border: 1px solid #F7BE81;
}

#buscador #texto{ /*Texto*/
width:150px;
height:19px;
background:#ffffff;
border:none;
padding:2px 5px;
font-weight:normal;
border:1px solid #F7BE81;
color:#F7BE81;
}

#buscador #botonbuscar{ /*Botón buscar*/
background: #ffffff url(#) no-repeat left top;
width:80px;  /*ancho del botón donde irá tu imagen de la lupa*/
height:19px;  /*alto del botón donde irá tu imagen de la lupa*/
margin-left:0px;
border: 0px solid #F7BE81;
color: #F7BE81;  /*color de la letra, por si decides prescindir de la imagen*/
}



BUSCADORES CON LUPA


Modelo Azul
/* Buscador con Lupa*/


#buscador { /*El buscador-form*/
height:34px;
width:225px;
padding-top: 6px;
padding-left: 5px;
margin-left: -6px;
text-align:center;
background:#A9E4F2; /*color de fondo del buscador*/
}


#buscador #texto{ /*Texto*/
width:141px;
height:18px;
background:#fff;   /*color de fondo*/
border:none;
padding:2px 5px;
font-weight:normal;
border:1px solid #A9E4F2;  /*borde del buscador*/
color:#3BA7C3;  /*color de la letra*/
outline: transparent;
}


#buscador #botonbuscar{ /*Botón buscar*/
background:url(https://lh3.googleusercontent.com/-9AdHjDDwYzM/VU3wKYHO8ZI/AAAAAAAAk9Q/is5BbVpOPoY/w70-h24-no/lupa_azul.png) no-repeat left top;
width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/
height:25px;  /*alto del botón donde irá tu imagen de la lupa*/
margin-left: 0px;
border:none;
color:transparent;  /*color de la letra, por si decides prescindir de la imagen*/
}


Modelo Verde

/* Buscador con Lupa*/


#buscador { /*El buscador-form*/
height:34px;
width:225px;
padding-top: 6px;
padding-left: 5px;
margin-left: -6px;
text-align:center;
background:#D9FFDF; /*color de fondo del buscador*/
}


#buscador #texto{ /*Texto*/
width:141px;
height:18px;
background:#fff;   /*color de fondo*/
border:none;
padding:2px 5px;
font-weight:normal;
border:1px solid #D9FFDF;  /*borde del buscador*/
color:#82CC8D;  /*color de la letra*/
outline: transparent;
}


#buscador #botonbuscar{ /*Botón buscar*/
background:url(https://lh3.googleusercontent.com/-prppvEIorC8/VU3zIHth_BI/AAAAAAAAk9o/Zt9U5ZKvxlA/w70-h24-no/lupa_verde.png) no-repeat left top;
width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/
height:25px;  /*alto del botón donde irá tu imagen de la lupa*/
margin-left: 0px;
border:none;
color:transparent;  /*color de la letra, por si decides prescindir de la imagen*/
}


Modelo Rosa



/* Buscador con Lupa*/


#buscador { /*El buscador-form*/
height:34px;
width:225px;
padding-top: 6px;
padding-left: 5px;
margin-left: -6px;
text-align:center;
background:#FCE8EA; /*color de fondo del buscador*/
}


#buscador #texto{ /*Texto*/
width:141px;
height:18px;
background:#fff;   /*color de fondo*/
border:none;
padding:2px 5px;
font-weight:normal;
border:1px solid #FCE8EA;  /*borde del buscador*/
color:#F5B2B6;  /*color de la letra*/
outline: transparent;
}


#buscador #botonbuscar{ /*Botón buscar*/
background:url(https://lh5.googleusercontent.com/-S89VD9-ApHQ/VU3z-1WF0lI/AAAAAAAAk-E/ukG-sE8SjLU/w70-h24-no/lupa_rosa.png) no-repeat left top;
width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/
height:25px;  /*alto del botón donde irá tu imagen de la lupa*/
margin-left: 0px;
border:none;
color:transparent;  /*color de la letra, por si decides prescindir de la imagen*/
}


¿Quieres diseñar tu propio botón con lupa?

Descarga el archivo en .EPS y modifícalo a tu gusto en cualquier programa de diseño gráfico (Corel, Photoshop, Illustrator, Inkscape...)




¿Te animas a añadir un botón personalizado con los colores de tu blog?
Si lo haces ¡déjame el enlace en comentarios para verlo!




¡EMPEZAMOS EN JULIO!

APRENDE A DISEÑAR Y PROGRAMAR BLOGS BONITOS, ORIGINALES Y OPTIMIZADOS PARA TI Y TUS AMIGAS








¡HOLA EMPRENDEDORA!

¿Cansada de pasar tantas horas delante del ordenador sin ver resultados?


DESCARGA GRATIS MI GUÍA DE MARKETING EMOCIONAL + PLANTILLA PROFESIONAL PARA BLOGGER

Aprende a conectar con tu público ideal
¡Y DISFRUTA DE TU TIEMPO LIBRE!


RESUMEN SEMANAL


Cada Viernes Novedades en tu Correo: Últimas entradas, novedades y noticias sobre blogging, marketing y emprendimiento.


Powered by ConvertKit

Te encantará:

0 pensamientos ¡falta el tuyo! ;)



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.