10 ene. 2018

Cómo poner un buscador en el menú de inicio responsive en Blogger

  • 12:02
  • por
cómo poner un buscador en el menu de inicio responsive de mi blog en blogger tutorial fácil


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 blog hemos visto varias formas de crear un menú en nuestro blog, te dejo a continuación los diferentes artículos:





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.


RECUERDA: si quieres que me encargue del diseño de tu blog echa un ojo a mis servicios.


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. Hace poco mi compañera 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.

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 mi web


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. No podría ayudarte sin entrar en plantilla y eso requiere un servicio técnico. Prueba a intentarlo haciendo una copia de seguridad de plantilla antes que nada y luego si no funciona, puedes solicitar el servicio técnico para ver si puedo ayudarte.


Tutorial paso a paso para añadir buscador a tu menú en 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==&apos;Search&apos;)this.value=&apos;&apos;;' 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.


Mónica Lemos

Me apasiona la educación, en su sentido más amplio. Son muchos mis centros de interés, por ello creo que ser Blogger o Youtuber es una oportunidad de compartir lo mejor de cada persona al mundo. Mientras estoy intentando evolucionar 'educadamente' en esta 'loca' sociedad. Desde este rincón puedo ayudarte con asesorías y servicios ¿Te animas?

Comenta dudas, opiniones...



Ya han comentado 2 veces:

  1. Me encanta. A ver si tengo un ratito y pruebo el tuyo que me gusta mas. Me en cantan tus tutoriales. Saludos!

    ResponderEliminar
    Respuestas
    1. Genial Laura!! Muchas gracias!
      Ya nos contarás qué tal el tutorial!! Mucho ánimo

      Eliminar