;  MY LIFE: CUADROS DE BUSQUEDA PERSONALIZADOS EN BLOGGER

About

06 marzo 2015

CUADROS DE BUSQUEDA PERSONALIZADOS EN BLOGGER



Hola, hoy os traigo una manera muy rápida de colocar un cuadro de búsqueda personalizado en el blog. Tan rápida que es copiar y pegar un código en un gadget HTML. Problema: no recuerdo la fuente para darle los créditos, imagino que lo vi en Oloblogger, Ciudadblogger o no sé, así que si alguien lo reconoce como propio que me lo diga y así enlazamos su página. 

Bueno,como siempre, mi idea no es que os quedéis en el copio y pego, si no que veáis las opciones sencillas que nos harán personalizarlo a nuestro gusto. 
Es muy sencillo, vamos a ir por partes.


Primero que nada el código, si no lo tocáis el cuadro quedará así:












Por partes vamos a ir viendo que hay que ir modificando:

 En el primer tramo ya véis que tenemos que colocar la URL de nuestro blog y modificar a nuestro gusto la frase que irá dentro del cuadro de búsqueda y del botón BUSCAR.

Después llega la parte del formulario y ahí es donde podemos empezar a jugar a nuestro gusto.

Podemos cambiar el color al fondo (dándole otro valor al background-color). Podéis encontrar los códigos de los colores HTML en muchas páginas. Yo suelo utilizar ésta.

Pero también podemos poner una imagen de fondo. Simplemente cambiaremos el background-color por background y en lugar de valores pondremos url(URLDELAIMAGENOFONDO) y ya está.

Por ejemplo para obenter éste cuadro:



 Cambiaremos la línea de background-color por esta otra:

 background:url(https://dl.dropboxusercontent.com/u/26040166/0_73f9c_9316dfac_L.jpg);


Con el border-radius le vamos a dar más o menos redondez a los bordes. Por ejemplo, si cambiamos el valor 5px por 50px obtendremos ésto.




Ahora vamos a pasar a la parte en la que nuestros lectores escriben lo que quieren buscar. Aquí hacemos lo mismo. Cambiamos el color, la fuente del texto....Para ello vamos cambiando las variables y ya está, es lo mismo que arriba. Es seguir los mismos pasos que antes.


Para terminar de darle un toque propio pasamos al botón. Aquí hay que tener en cuenta que hay dos partes a retocar si decidimos hacerlo. Una parte es el botón y la otra es el pequeño triángulo que le acompaña. Si retocamos el color de uno, para que quede bien deberemos retocar el otro también.

Por ejemplo, yo he cambiado el color del botón (y el del triángulo) a naranja, dejando el negro cuando pasamos el cursor por encima. Además he redondeando para que tuviera el  mismo acabado que el fondo. Me ha quedado así:




Lo podéis ver funcionando en el blog.

Un pequeño esquema de esta parte que creo que es un poco más engorrosa:




Otras cositas que podemos modificar:

text-transform: hará que el texto se presente en mayúsculas, minúsculas o una mezcla de ambas.Valores que pueden darse:


  • lowercase: muestra todo el texto del elemento con letras minúsculas.
  • uppercase: muestra todo el texto del elemento con letras mayúsculas.
  • capitalize: muestra la primera letra de cada palabra en mayúscula y el resto de letras en minúsculas.
  • none: muestra el texto tal y como está escrito, respetando todas las mayúsculas y minúsculas.
text-shadow:La sintaxis de la propiedad text-shadow obliga a indicar dos medidas y permite establecer de forma opcional una tercera medida y un color. Las dos medidas obligatorias son respectivamente el desplazamiento horizontal y vertical de la sombra respecto del texto. La tercera medida opcional indica lo nítido o borroso que se ve la sombra y el color establece directamente el color de la sombra.


box-shadow: <medida> <medida> <medida>? <medida>? <color>
  • La primera medida es obligatoria e indica el desplazamiento horizontal de la sombra. Si el valor es positivo, la sombra se desplaza hacia la derecha y si es negativo, se desplaza hacia la izquierda.
  • La segunda medida también es obligatoria e indica el desplazamiento vertical de la sombra. Si el valor es positivo, la sombra se desplaza hacia abajo y si es negativo, se desplaza hacia arriba.
  • La tercera medida es opcional e indica el radio utilizado para difuminar la sombra. Cuanto más grande sea su valor, más borrosa aparece la sombra. Si se utiliza el valor 0, la sombra se muestra como un color sólido.
  • La cuarta medida también es opcional e indica el radio con el que se expande la sombra. Si se establece un valor positivo, la sombra se expande en todas direcciones. Si se utiliza un valor negativo, la sombra se comprime.
  • El color indicado es directamente el color de la sombra que se muestra.
float:propiedad CSS que permite posicionar de forma flotante una caja


Si se indica un valor left, la caja se desplaza hasta el punto más a la izquierda posible en esa misma línea (si no existe sitio en esa línea, la caja baja una línea y se muestra lo más a la izquierda posible en esa nueva línea). El resto de elementos adyacentes se adaptan y fluyen alrededor de la caja flotante.
El valor right tiene un funcionamiento idéntico, salvo que en este caso, la caja se desplaza hacia la derecha. El valor none permite anular el posicionamiento flotante de forma que el elemento se muestre en su posición original.

Y si te da pereza hacer todo ésto....puedes ir a Google CSE y seguir los pasos que te da para personalizar el gadget, una vez que hayas terminado te dará un código que pondrás en un gadget HTML y ya está. 

Postdata: ¿Recordáis como poner un texto largo en una caja como lo he hecho yo con el código?....no, pues pincha aquí.