Cuando nuestro blog comienza a crecer a través
de las continuas publicaciones se hace necesario instalar un buscador interno.
Nuestro blog crece cada vez que publicamos nuevas entradas, pero también crecen las visitas al mismo, y eso es bueno. Es entonces cuando a los visitantes se les hace una tarea casi imposible de encontrar alguna entrada de su interés.
Es por eso que Planeta Blogger, nos presenta este tutorial en el cual nos explica cómo poner un cuadro de búsqueda personalizado y gracias a Blogger Ayuda.
Para comenzar la instalación, nos vamos
a Diseño / Añadir un Gadget:
Nos lleva a la opción HTML/JavaScript:
En la ventana que nos presenta, ponemos
un título y pegamos el siguiente 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:# 1916BF;
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>
Aquí lo vemos:
Ahora bien, para darle una mejor personalización,
vamos a cambiar lo que está en Verde para aumentar el grosor de la línea que
forma el cuadro. Además también podemos cambiarle el color a esta, poniendo otro
valor en donde está en Azul.
Para alargar la caja de búsqueda,
cambiar el valor Width en Café. El color
correspondiente al fondo del botón de Enviar se puede cambiar en donde está en Rojo.
Para ver el demo pulse Aquí.
Eso es todo y gracias por entrar.
