Una vez añadido, para poder ir comprobando los cambios que hagamos en nuestra plantilla, vamos a ver el estilo que aplicaremos:

El código que vamos a usar es éste:

#search { width: 228px; /* Ancho del buscador */ height: 25px; float: right; text-align: center; margin-top: 6px; margin-right: 6px; /* Imagen de fondo del buscador */ background: #8FE1D8 url(#) no-repeat; border-radius: 10px 10px 10px 10px; /* Borde del marco del buscador */ } #search-box { margin-top: 3px; border:0px; background: #FFFFFF; text-align:center; border-radius: 10px 10px 10px 10px; /* Borde del cuadro del buscador */ }

Si copiáis el código tal cual en vuestra plantilla HTML (ahora os digo donde) el resultado sería éste:




Pero si modificáis los campos que os he marcado en rojo por vuestros propios colores y efectos de redondeado, podéis dejarlo completamente integrado con la combinación de colores de vuestro Blog.

Ya os lo he comentado otras veces, pero la página que más me gusta para elegir códigos HTML es ESTA.

Es un código CSS así que para colocarlo en nuestra plantilla HTML, lo haremos antes de:

]]>

Si habéis instalado el menú personalizado que vimos en ésta entrada, podéis poner este nuevo código justamente debajo, dejando un par de espacios.

*Si no lo has instalado, te aconsejo que visites esa entrada para ver exactamente donde debería ir este nuevo código.

Y ahora sí, en Vista Previa, después de haber añadido los dos códigos (el primero en Diseño y el segundo en nuestra plantilla HTML), podéis empezar a jugar con los colores y redondeos.

¡Espero que os sea útil! A mí me encanta como queda.