.post-body:first-letter { float:left; color: #333333; font-size:100px; font-family:none; line-height:80px; padding-top:1px; padding-right:5px; } font-style: italic; } span.letracapital{ float: left; font-size: 40px; line-height: 35px; /* Dobla el alto de linea menos 1 pixel */ font-family: Georgia, "Times New Roman", Times, serif; color: #2583ad; /* Azul */ padding-right: 5px; } -->

Recent Posts

Cuadro de Búsqueda para mi blog

27 jun 2016

Vamos a poner un cuadro de búsqueda interna para nuestro blog.

Solo tenemos que irnos a Diseño - Plantilla- Añadir un gadget - HTML JavaScrip
y ponemos este código.

<form action="search/" id="ba-cuadrobusqueda" method="get">
<input id="ba-cadenabusqueda" name="q" />
<input id="ba-enviar" type="submit" value="Buscar" />
</form>
y esto es lo que veremos



Ahora vamos a poner otro donde podemos cambiar el color.
Solo tenemos que irnos a Diseño - Plantilla- Añadir un gadget - HTML JavaScrip
y ponemos este código.
<style>
#ba-cuadrobusq .ba-textobusq {
border: 1px solid #DDD;
box-sizing: border-box;
color: black;
font-family: 'Lora', serif;
font-size: 14px;
padding:9px;
width: 220px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
#ba-cuadrobusq .ba-textobusq:hover {
box-shadow:inset 1px 1px 8px gainsboro;
}
#ba-cuadrobusq .ba-textobusq:focus {
background-image: -webkit-linear-gradient(white,white);
background-image: -moz-linear-gradient(white,white);
background-image: -ms-linear-gradient(white,white);
background-image: -o-linear-gradient(white,white);
background-color:white;
outline:1px solid #E8550B;
color:black;
font-style:normal;
box-shadow:inset 1px 1px 8px gainsboro;
border:1px solid #E8550B;
}
#ba-cuadrobusq .ba-enviar {
background:#E8550B;
border: 1px solid #E3E3D9;
color: white;
cursor: pointer;
font-family: 'Droid Sans', sans-serif !important;
color: #fff;
cursor: pointer;
line-height: 19px;
padding: 8px 10px;
text-decoration: none;
}
#ba-cuadrobusq .ba-enviar:hover {
background:#e8320f;
}
</style>
<form action="search/" id="ba-cuadrobusq">
<input class="ba-textobusq" name="q" />
<input class="ba-enviar" type="submit" value="Buscar" />
</form>



Para cambiar el color de fondo del botón de enviar no iremos a esta parte del código background:#E8550B;


#ba-cuadrobusq .ba-enviar {
background:#E8550B;
border: 1px solid #E3E3D9;
color: white;

No hay comentarios:

Publicar un comentario

Deja tu comentario y en breve te contestaremos