En algunos blogs, dependiendo de su template, a veces la barra de "Buscar" deja de funcionar. Esta opción les permite agregar una barra que si funcione. A la vez de que les enseño como se agrega, también les voy a decir a que se refiere cada cosa (lo que entienda)
Primero tendremos que agregar un widget para HTML/Javascript. Luego, copiaremos y pegaremos este código y listo, ya la barra funcionaría. Si quieres ver que estás añadiendo, más abajo te explico :)
<style type="text/css">#searchform{border:1px solid #D8D8D8;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirl7Jfqi6jxOliu1eYXyhONsq4nvcqwXJhT8haVh5rFPy0ikFddSqoiKSA6FRcXaEyEv2qpGNpXlJmLtQE3NxQzGW7XlwawO5f_SHlSFeP4w2UFT4wrFiCS8MUG9OizOWzZc3jGQC6N8UP/s1600/search.png) 99% 99% no-repeat;text-align:left;padding:6px 24px 6px 6px;}#searchform #s{background:none;color:#979797;border:0;width:100%;outline:none;margin:0;padding:0;}</style><form action='/search' id='searchform' method='get'> <input id='s' name='q' onblur='if (this.value == "") {this.value = "Buscar";}' onfocus='if (this.value == "Buscar") {this.value = "";}' type='text' value='Buscar'/> </form>
Al agregar esto a su blog, tendrían algo así (no se preocupen, el tamaño va a depender del lugar donde lo pongan, y como pueden ver, ya funciona :)
Ahora, vamos a ver que cosas tenemos que cambiar si lo queremos personalizar un poco.
El código comienza con <style type="text/css>, luego tiene un par de códigos y termina con un </style>. Ahora bien, estos códigos no los hemos visto hasta ahora, pero se los voy a explicar por arriba. Todo lo que coloquemos entre estos dos tags nos van a dar un estilo a algo, y la manera de codificarlo va a ser en css. Las templates utilizan algo similar para darle un estilo único a los blogs de cada uno. Por ejemplo, si los títulos de tu posts siempre aparecen en rojo, es porque hay un estilo en el template que le indica al blog que los títulos se deben ver en rojo. Ahora bien, ¿que hay dentro de estos tags? Hashtags, okno ._. XD, son estilos! Adivinaron. Cada "hashtag" es un id, todo lo que se vincule a ese id, tendrá ese el estilo que le dice en el código. De esa manera nos encontraremos con 2 códigos:
#searchform{border:1px solid #D8D8D8;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirl7Jfqi6jxOliu1eYXyhONsq4nvcqwXJhT8haVh5rFPy0ikFddSqoiKSA6FRcXaEyEv2qpGNpXlJmLtQE3NxQzGW7XlwawO5f_SHlSFeP4w2UFT4wrFiCS8MUG9OizOWzZc3jGQC6N8UP/s1600/search.png) 99% 99% no-repeat;text-align:left;padding:6px 24px 6px 6px;}Y
#searchform #s{background:none;color:#979797;border:0;width:100%;outline:none;margin:0;padding:0;}Genial. Vamos progresando XD. El primero, nos da el estilo "general" del cuadrado, podremos ver que dice: border:1px solid #D8D8D8; esto significa que el borde va a ser de 1px de ancho, solido (puede ser lineas, etc), y con el color hexagesimal #D8D8D8. Si le aumentáramos los pixeles se vería más ancho, si en cambio no queremos que tenga borde, borramos todo eso y listo (desde la b de border, hasta el punto y coma). En cuanto al color, pueden buscar en google COLOR HTML, y les saldrán miles de opciones, siempre recuerden que son 6 carácteres, y pueden mezclar números y letras. Básicamente los primeros dos colores corresponden al rojo, los siguientes dos al verde, y los últimos dos al azul (RGB- Red, Green, Blue), y dependiendo del valor, es la mezcla que se forma =). Si los dos dígitos primeros, se repiten, entonces se forman grises (D8D8D8 es gris, C8C8C8 es otro gris, etc) si todos los caracteres son 0, se forma negro, ya que el rojo está "apagado" y el verde y azul también. En cambio, si están todo en F (creo que significa FULL), se forma el Blanco :)
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirl7Jfqi6jxOliu1eYXyhONsq4nvcqwXJhT8haVh5rFPy0ikFddSqoiKSA6FRcXaEyEv2qpGNpXlJmLtQE3NxQzGW7XlwawO5f_SHlSFeP4w2UFT4wrFiCS8MUG9OizOWzZc3jGQC6N8UP/s1600/search.png) 99% 99% no-repeat;
Eso indica que el color de fondo es #FFF (Blanco), y que también tendrá la imagen del enlace (que es la lupa). no recomiendo cambiar colores de fondo cuando hay imágenes, en ciertos caso el fondo de la imagen no es transparente, entonces se vería mal.
text-align:left; eso es básicamente que el texto aparecerá a la izquierda. padding:6px 24px 6px 6px; un poco de margen entre el borde y las letras.
¡Pasemos al segundo!
#searchform #s{background:none;color:#979797;border:0;width:100%;outline:none;margin:0;padding:0;}
Eso simplemente muestra que no hay background (background:none;), que el color de la fuente va a ser #979797, que adivinaron: es gris (color:#979797;) sin borde (border:0;) que el ancho se va a adaptar a cada lugar donde se lo ponga al 100% (si el ancho es 100px, la barra de busqueda va a ser 100px, si es 350, va a ser 350, etc) con el código (width:100%;) luego de que no tenga un margen, ni nada similar (las últimas 3 cosas :P).
Y ahora, ¿¿Qué pasa si no quiero que diga "Buscar"?? ¡Tenemos que pasar a la barra!
<form action='/search' id='searchform' method='get'> <input id='s' name='q' onblur='if (this.value == "") {this.value = "Buscar";}' onfocus='if (this.value == "Buscar") {this.value = "";}' type='text' value='Buscar'/> </form>
Form es la manera de hacer formularios, y en este caso nos tiene que dejar escribir. action='/search' le dice al explorador, que luego de rellenarlo, tiene que ir al enlace del blog y agregarle /search al final, id='searchform' hace que se le agregue el estilo del que tanto hemos hablado antes =).
¿Qué es input? Básicamente lo que dice la barra antes de que la comencemos a usar. Ahora, si queremos que diga Search en vez de buscar, tendremos que cambiarlo en los 3 lugares donde voy a marcarlo ahora. Si no, no funcionará muy bien (al hacer click en la barra el texto no desaparecería):
<form action='/search' id='searchform' method='get'> <input id='s' name='q' onblur='if (this.value == "") {this.value = "Buscar";}' onfocus='if (this.value == "Buscar") {this.value = "";}' type='text' value='Buscar'/> </form>
¡Si necesitan ayuda en algo me avisan! Espero que hayan entendido todo!
0 comentarios:
Publicar un comentario