En muchas ocasiones queremos tener muchas personalizaciones en una parte concreta de nuestro blog, como puede ser el menú, pero no encontramos un tutorial que se adapte realmente a lo que buscamos. En este vamos a añadir un buscador en el menú.
En este blog hemos visto varias formas de crear un menú en nuestro blog, te dejo a continuación los diferentes artículos:
- Menu sencillo de Blogger con pestañas (aquí para personalizarlo)
- Menú responsive con iconos de redes sociales
En esta ocasión quiero que , aunque tengas un menú (que debería ser responsive), le puedas añadir un buscador personalizado a tu gusto.
El buscador es algo que siempre queremos tener en nuestro menú pero realmente existen pocos tutoriales que de verdad funcionen, o por lo menos sean sencillos de implementar. Minerva Aurora publicó un post para añadir un menú responsive con redes sociales y buscador, que deberías conocer también para dar con aquel estilo que más te guste.
La diferencia del menú con buscador de Minerva es que su buscador se despliega y aparece la cajita para escribir debajo, sin embargo en este buscador no se despliega nada, se escribe directamente en donde aparece la lupa.
Buscador del tutorial de Minerva Aurora
Pero en este caso lo que haremos será añadir un buscador sencillo, minimalista, que simplemente haciendo clic se puede escribir lo que buscamos y con clicar enter buscarlo.
Aquí tienes la vista previa, de mi blog, este mismo, y del blog de pruebas:
Buscador en blog de pruebas
Esto significa que lo puedes añadir, en un principio, a cualquier menú que tengas instalado y no debería darte problemas.
Si aparecen problemas es que en tu plantilla existen factores que afectan a ese elemento. Necesitarás ayuda profesional.
Prueba a intentarlo haciendo una copia de seguridad de plantilla antes que nada y luego si no funciona.
Tutorial paso a paso para añadir buscador en el menú de Blogger
- Vamos a nuestro Panel de Control en Blogger y le damos a Tema en el menú.
- Hacemos una copia de seguridad -por si las moscas- (si no sabes cómo mira este vídeo).
- Le damos a Editar HTML.
- Buscamos el siguiente código (si no sabes cómo mira este vídeo)
</b:skin>
- Vamos a pegar el código CSS que le dará estilo a nuestro menú, justo antes de
]]></b:skin>
- Pegamos el siguiente código:
.searchbox{display:inline-block;text-align:right;margin:5px auto 0;}
.search-form{background:transparent;color:#333 !important}
.searchbox-mobile .search-form{background:transparent;border-left:none;border-right:none;height:auto}
#searchform fieldset{background:transparent;border:none;transition:all .6s ease-out;-o-transition:all .6s ease-out;-moz-transition:all .6s ease-out;-webkit-transition:all .6s ease-out;padding:0 0 0 10px;margin:0}
#search{background:transparent !important;color:#333 !important;border:0;margin:0;padding:0 0 0 5px;font-family:'Montserrat',sans-serif;width:75px}
.searchbox-mobile #search{font-family:'Montserrat',sans-serif;color:#333 !important;width:85%}
.search-form input{color:#333 !important;display:inline !important}
.search-form fieldset:before{content:"f002";font-family:FontAwesome;color#333;font-size:12px}
.searchbox-mobile .search-form fieldset:before{font-size:16px}
.search-form input::-webkit-input-placeholder{color:#333;letter-spacing:3px;font-family:'Montserrat',sans-serif;}
.searchbox-mobile .search-form input::-webkit-input-placeholder{font-family:'Montserrat',sans-serif;letter-spacing:1px}
.search-form input:-moz-placeholder{color:#333;letter-spacing:3px;font:$(tabs.font)}
.searchbox-mobile .search-form input:-moz-placeholder{font-family:'Montserrat',sans-serif;letter-spacing:1px}
.search-form input::-moz-placeholder{color:#333;letter-spacing:3px;font-family:'Montserrat',sans-serif;}
.searchbox-mobile .search-form input::-moz-placeholder{font-family:'Montserrat',sans-serif;letter-spacing:1px}
.search-form input:-ms-input-placeholder{color:#333;letter-spacing:3px;font-family:'Montserrat',sans-serif;}
.searchbox-mobile .search-form input:-ms-input-placeholder{font-family:'Montserrat',sans-serif;letter-spacing:1px}
#sticky-wrapper.sticky-wrapper.is-sticky .nav .search-form input{color:#333}
#sticky-wrapper.sticky-wrapper.is-sticky .nav::-moz-placeholder{color:#333}
#sticky-wrapper.sticky-wrapper.is-sticky .nav::-webkit-input-placeholder{color:#333}
#sticky-wrapper.sticky-wrapper.is-sticky .nav .search-form fieldset:before{color:#333;padding:5px;background:#f9f9f9; border-radius:50%}
#sticky-wrapper.sticky-wrapper.is-sticky .searchbox .search-form input::-webkit-input-placeholder{color:#333}
#sticky-wrapper.sticky-wrapper.is-sticky .searchbox .search-form input:-moz-placeholder{color:#333}
#sticky-wrapper.sticky-wrapper.is-sticky .searchbox .search-form input::-moz-placeholder{color:#333}
*::-webkit-input-placeholder {
/* Google Chrome y Safari */
font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:0.7px !important;color:#ddd
}
*:-moz-placeholder {
/* Firefox anterior a 19 */
font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:0.7px !important;color:#ddd
}
*::-moz-placeholder {
/* Firefox 19 y superior */
font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:0.7px !important;color:#ddd
}
*:-ms-input-placeholder {
/* Internet Explorer 10 y superior */
font-family:'Montserrat', sans-serif;
font-size:10px;letter-spacing:0.7px !important;color:#ddd
}
Este es el código que da forma y estilo al buscador. Puedes editar colores, fuentes, tamaños de fuentes… pero no te aconsejo tocar nada más si no manejas código.
- A continuación buscamos en plantilla el código de nuestro menú. Cada menú tiene su propio nombre de clase, que ha sido creado por la persona que ha desarrollado el menú, por lo tanto es imposible que sepa como se llama tu menú. No obstante te puedo enseñar a encontrar su nombre a través de este vídeo:
- Una vez que sepas como se llama vamos a buscarlo en nuestra plantilla (si no sabes cómo mira este vídeo). Entonces buscaremos el nombre de nuestro menú entrecomillado. En mi caso buscaré lo siguiente:
'menu'
y una vez encontrado tienes que entender que, probablemente sea un «id» que nombre todo el elemento, en este caso el menú. Pero quiero colocar el bucador en una parte del menú concreta. Recomiendo que sea al final, a la derecha, pero puedes probar a incluirlo donde quieras.
Para que quede bien deberías incluirlo dentro del elemento «menu» pero antes de que el «nav» se cierre. Obvio que tienes un «nav» pero puede que tengas otra etiqueta, con «<div…» y luego «<il>» para cada pestaña del menú.
De todas formas, si sigues el vídeo tutorial entenderás bien donde colocarlo para que se ajuste a tu menú.
- Después de la última pestaña y de su cierre, pegamos el siguiente código:
<div class='searchbox'> <form _lpchecked='1' action='/search' class='search-form' id='searchform' method='get'> <fieldset> <input id='search' name='q' onfocus='if(this.value=='Search')this.value='';' onwebkitspeechchange='transcribe(this.value)' placeholder=' BUSCAR' style='outline:none;' type='text' value='' x-webkit-speech=''/> </fieldset> </form> </div>
Donde pone BUSCAR puedes cambiarlo por lo que quieras. Es lo que aparece dentro del buscador. Si no tienes instalada la fuente de fontAwesome debes incluir el siguiente código justo antes del </head> de tu plantilla.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css' rel='stylesheet'/>
- Una vez hecho esto deberíamos tener ya nuestro buscador instalado. Guardamos y vamos a Ver blog a ver qué tal ha quedado.
Si tienes algún problema porque has instalado el menú de Minerva, por ejemplo, puedes arreglarlo de forma sencilla. Probablemente no te aparezca la zona de ‘buscar’. No que debes hacer es buscar en plantilla lo siguiente:
#menu input
y encontrarás dentro de ese CSS entre los corchetes, lo siguiente:
opacity:0;
Nada más tienes que eliminarlo y listo!
Vídeo tutorial para añadir un buscador a nuestro menú
Espero que te haya gustado y te haya servido de ayuda. Cualquier duda déjala en comentarios.
