【Tutoriales】Buscador con imágen

¡Hola a todos y bienvenidos una vez más a mi blog! Siento no haber publicado desde hace muchos días pero he tenido muchos problemas personales de gran importancia y la verdad es que no he tenido ganas de nada. Pero bueno, lo importante es que ya estoy aquí y hoy os traigo un tutorial, y es para poner un buscador con imagen que tengo en mi gadget de "Welcome"

Diseño > Añadir un gadget > html

<center><img src=“Url de la imagen"/></center><style>#search-box { position: relative; width: 100%; margin: 0; } #search-form { height: 30px; border: 1px solid #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #fff; overflow: hidden; } #search-text { font-size: 14px; color: #ddd; border-width: 0; background: transparent; } #search-box input[type="text"] { width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none; } #search-button { position: absolute; top: 0; right: 0; height: 32px; width: 60px; font-size: 14px; color: #fff; text-align: center; line-height: 32px; border-width: 0; background-color: #B3A0D8; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; cursor: pointer; } </style><div id='search-box'> <form action='/search' id='search-form' method='get' target='_top'> <input id='search-text' name='q' placeholder='' type='text'/> <button id='search-button' type='submit'><span>Buscar</span></button> </form></div>

#B3A0D8: En este código podréis cambiar el color del botón de "buscar". En esta página encontraréis los códigos de los colores que queráis.

Url de la imagen: Aquí pegaréis el link de la imagen que queráis que esté encima del buscador. La medida de mi imagen es de 216x130.

Y nada, espero que os haya servido de utilidad este tutorial. Nos vemos en la próxima entrada :')