sábado, 30 de marzo de 2013

Como poner un buscador en la cabecera del blog

Hola chicas, como estan? espero que super bien, yo estoy con visitas en mi casa asi que estoy un poco ocupada, ah tambien ando super preocupada por lo que esta pasando con las Corea la verdad me pone triste pensar en alguna guerra  
Bueno a lo que vine, hoy les traigo un nuevo tutorial, super facil 

[Preview]


Vamos a nuestra Plantilla [template] y clickeamos en Editar HTML. Presionamos el botón F3 y escribimos ]]></b:skin>

Sobre ]]></b:skin> pegamos el siguiente código:

#buscador {
  position: absolute;
  top: 100px; /* distancia de buscador margen superior */
  margin-left: 350px; /* distancia de buscador margen izquierdo*/
}
Volvemos a  usar el botón F3 y escribimos este vez </body>

Sobre </body> pegamos este otro código:


<div id='buscador'>
<form action='/search' method='get'>
<input name='q' style='width:140px; height:18px; background-color:#FFF; color:#F5A9F2; font-size: 13px; border: 1px double #F5A9F2;border-radius:5px; box-shadow: 0 0 0.4em #F5A9F2, 0 0 0.4em #F5A9F2;' type='text' value=''/><input style=' font-size: 13px; background-color:#F5A9F2; color:#FFF; border: 1px #F5A9F2; border-radius:5px; box-shadow: 0 0 0.4em #F5A9F2, 0 0 0.4em #F5A9F2;' type='submit' value='Buscar'/></form>
</div>
Dale a Vista previa y si te gusta lo que vez, dale a Guardar plantilla. Si te gustaría personalizar su color solo modifica el código del cuarto *4TO* paso, cambia que eh resaltado de color verde por otro.

Bueno eso seria todo, bay espero les haya gustado >///<

9 comentarios:

  1. Hermoso tuto ^u^
    gracias por compartirlo!

    ResponderEliminar
  2. Me ha encantado pero no sé por qué, no me funciona. Me refiero a que le hago click para escribir una palabra y nada. =/ ¿Alguna idea de por qué?

    ResponderEliminar
    Respuestas
    1. Bueno pues Diana seguro has de tener agregado algun plugin o algo asi de otra cosa reviisa bien tu codigo, talves tambien sea que alguna partesita este mal ubiicada, te aconsejo que revises bien el codigo :)

      Eliminar
  3. Es muy útil, gracias por compartirlo.

    ResponderEliminar

Gracias por dejar tu lindo comentario, seguro que te lo devuelvo n.n