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.
Tu Correo

ME APUNTO

Powered by ConvertKit

/* Layout */
.ck_form.ck_minimal {
/* divider image */
background: #f9f9f9;
font-family: ‘Helvetica Neue’, Helvetica, Arial, Verdana, sans-serif;
line-height: 1.5em;
overflow: hidden;
color: #666;
font-size: 16px;
border: solid 1px #d1d1d1;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
clear: both;
margin: 20px 0px;
text-align: center;
}

.ck_form.ck_minimal h3.ck_form_title {
text-align: center;
margin: 0px 0px 10px;
font-size: 28px;
}

.ck_form.ck_minimal h4 {
text-align: center;
font-family: ‘Open Sans’, Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-size: 18px;
font-weight: normal;
padding-top: 0px;
margin-top: 0px;
}

.ck_form.ck_minimal p {
padding: 0px;
}

.ck_form, .ck_form * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.ck_form.ck_minimal .ck_form_fields {
width: 100%;
float: left;
padding: 5%;
}
/* Form fields */

.ck_errorArea {
display: none; /* temporary */
}

#ck_success_msg {
padding: 10px 10px 0px;
border: solid 1px #ddd;
background: #eee;
}

.ck_form.ck_minimal input[type=”text”], .ck_form.ck_minimal input[type=”email”] {
font-size: 18px;
padding: 10px 8px;
width: 68%;
border: 1px solid #d6d6d6; /* stroke */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; /* border radius */
background-color: #fff; /* layer fill content */
margin-bottom: 5px;
height: auto;
float: left;
margin: 0px;
margin-right: 2%;
height: 42px;
}

.ck_form input[type=”text”]:focus, .ck_form input[type=”email”]:focus {
outline: none;
border-color: #aaa;
}

.ck_form.ck_minimal .ck_subscribe_button {
width: 100%;
color: #fff;
margin: 0px;
padding: 11px 0px;
font-size: 18px;
background: #33CCCC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; /* border radius */
cursor: pointer;
border: none;
text-shadow: none;
width: 30%;
float: left;
height: 42px;
}

.ck_form.ck_minimal .ck_guarantee {
color: #626262;
font-size: 12px;
text-align: center;
padding: 15px 0px 0px;
display: block;
clear: both;
}
.ck_form .ck_powered_by {
display: block;
color: #aaa;
font-size: 12px;
}

.ck_form .ck_powered_by:hover {
display: block;
color: #444;
}

.ck_converted_content {
display: none;
padding: 5%;
background: #fff;
}

.ck_form.ck_minimal.width400 .ck_subscribe_button, .ck_form.ck_minimal.width400 input[type=”email”] {
width: 100%;
float: none;
margin-top: 5px;
}

.ck_slide_up, .ck_modal, .ck_slide_up .ck_minimal, .ck_modal .ck_minimal {
min-width: 400px;
}

.page .ck_form.ck_minimal {
margin: 50px auto;
max-width: 600px;
}

Te encantará:

The following two tabs change content below.

Celia

Diseñadora, Mentora y Formadora Online at El Perro de Papel
Mamá y emprendedora a tiempo completo. Ayudo a otras mujeres y madres soñadoras a emprender un negocio online de éxito para conciliar su vida personal y profesional.Si este artículo te ha gustado, sigue aprendiendo conmigo en mi reto gratis de 14 días para conectar con tu mejor versión CLICK AQUÍ.Y AQUÍ tienes mi curso premium para mamás emprendedoras que quieren hacer realidad su idea genial, mano a mano, conmigo.¡Que tengas un feliz día, soñadora!

¿CANSADA DE TRABAJAR TANTAS HORAS SIN VER LOS RESULTADOS ESPERADOS?

Te regalo mi CURSO GRATIS DE 5 DÍAS para mamás emprendedoras que quieren conciliar su vida personal y profesional sin volverse locas ni renunciar a sus sueños.

¡Bienvenida! Ahora revisa tu correo ;)

Pin It on Pinterest

Share This