Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Buscador interno con botón en color y borde en color

Pués te voy a enseñar un truco muy bueno, la verdad es que es muy lindo, consiste en aplicar unas líneas en nuestra plantilla para conseguir hacer un buscador con borde y botón del color que más nos guste...

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima le pegas estas líneas de código...

/* Boton y borde del buscador */
#search-btn {background: #c9c9c9;color: #000000;padding: 1px;margin: 0px 0px 0px 2px;
border: 2px solid #a3a3a3;}
#search-box { width: 150px; border: 2px solid #a3a3a3;padding: 1px;}
/* Fin del codigo */


Déjame que te explique el código...

- La primera línea, dónde dice...

background: #c9c9c9; es el color de fondo (#c9c9c9 de color gris) si quieres cambiarlo, mira en la tabla de colores.

color: #000000; es el color del texto, del texto del botón (está en negro) si quieres cambiarlo, mira en la tabla de colores.

border: 2px solid #a3a3a3; son las propiedades del borde. 2px Es el grosor del borde, puede aumentase el grosor o disminuirse. Solid, es el estilo de borde (normal) si quieres otros estilos quizás te interese esta entrada.

#a3a3a3 es el color del borde, si quieres cambiarlo, mira en la tabla de colores.

- La segunda línea, dónde dice...

width: 150px; es el grosor de la caja de búsqueda (150px)

border: 2px solid #a3a3a3; son las propiedades del borde. 2px Es el grosor del borde, puede aumentase el grosor o disminuirse. Solid, es el estilo de borde (normal) si quieres otros estilos quizás te interese esta entrada.

#a3a3a3 es el color del borde, si quieres cambiarlo, mira en la tabla de colores.

Cuando termines, guarda cambios.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega el código del buscador...

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>

* Puedes cambiar el texto de
Buscar y poner la palabra que quieras que aparezca en el botón.

Nota:

Si ya tienes añadido el buscador interno que te enseñé en la última entrada, no necesitarás añadir este otro buscador (es el mismo código) ya que al añadir las líneas en la plantilla, se aplicará el color de botón y de borde automáticamente.


¡Eso es todo!

Elisabeth dice...

me ha parecido genial,gracias jaime


besitosssss

Jaime Trujillo Escobedo dice...

Hola Elisabeth! me alegra mucho que te gustara, la verdad es que sirve para personalizar un poquito más ese simple botón :-D un abrazo0!! :-)

Fede dice...

Buen truco Jaime, vamos a ver como le va a mi blog, que a proposito estoy estrenando plantilla nueva, asi que a remodelar se dijo. Saludos.

Jaime Trujillo Escobedo dice...

Hola Fede! que alegría lo de la plantilla! mañana me paso y la veo ;-D esto del buscador es bueno porque podemos cambiar el botón blanco tan común :-D le damos ese toquecillo personal :-) un abrazo0 amigo0! :-)

gaxgax dice...

Gracias por compartir lo que sabes de manera desinteresada, agradezco cada uno de tus consejos, que han hecho de mi blog y sin miedo a exagerar un segundo hogar, ojala que todo el conocimiento que repartes, se te devuelva solo en buenos momentos.....saludos desde Chile.

Jaime Trujillo Escobedo dice...

Hola gaxgax! que alegría me hizo leer tu comentario! me alegra que te haya gustado :-D y la verdad, yo tampoco quiero exagerar, pero un blog es un segundo hogar :-D un abrazo0 amigo! a descubrir nuevas cosas en este mundo de blogger! :-)

Anónimo dice...

oye amigo yo tambien tengo el boton de reply en mi blog, ¿como le hago para q este en el mismo lugar q el tuyo?
grax!

Jaime Trujillo Escobedo dice...

Anónimo, lo explicaré en el tutorial acerca del "reply" en los comentarios que tengo preparado desde que lo instalé en El Balcón (hace un par de meses).

Posiblemente antes de la semana que viene puedas verlo publicado.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo