¿Estáis preparados para aprender como tener una plantilla móvil molona y personalizada a vuestro gusto? Solo necesitáis un pc, vuestro móvil al lado y un poquito de paciencia. He estado investigando y probando varias semanas para hacer este curso que en su día empezó Miss Lavanda, y yo os muestro como seguir personalizando a partir de donde ella lo dejo, «a mi manera». Vamos a ir poco a poco con un post semanal para daros tiempo a aplicarlo y a consultar dudas en los comentarios que es la mejor manera para que todos se puedan aprovechar de las preguntas y la soluciones. Las contestaré en la medida de mis conocimientos y tiempo. ¿Empezamos?

Ahora ya estamos preparados para entrar en materia aprendiendo como añadir una barra fija superior que nos facilitará tener siempre visibles los links más importantes de nuestro blog. Seguro que algunos ya tenéis la barra fija superior en vuestra versión web pero adaptarla con tantos elementos a la versión móvil la dejaría prácticamente ilegible. La solución es crear una diferente solo para el móvil o única, si resulta que no la tenéis en la versión web.
Por si no has leído los posts de Miss Lavanda, recuerda que para personalizar tu plantilla debes asegurarte tener activa las opciones que te marco en la foto.

 

BARRA FIJA CON TEXTO

 

PASO 1.-Antes de todo, hacemos una copia de seguridad de nuestra plantilla por si las moscas. A continuación vamos a editar nuestra plantilla y buscar (Ctrl+F)  </head>. Aseguraros que después de </head> tenéis esta linea para que podáis personalizar vuestra plantilla móvil (si no la tenéis pues añadirla).

 

<body expr:class='»loading» + data:blog.mobileClass’>

 

Copiamos justo después:
(si tenemos instalada una barra fija superior, lo pegamos después del código de ésta)

 

<div id=’menu-movil’>
<a href=’URL DE FACEBOOK’>FACEBOOK</a>
<a href=’URL DE TWITTER’>TWITTER</a>
<a href=’URL DE GOGGLE+’>GOOGLE +</a>
<a href=’URL DE MI PAGINA DE CONTACTO’>CONTACTO</a>
</div>

 

Estos son los cuatro enlaces que yo añadí pero vosotros elegid los que más os gusten o convengan. Solo tener en cuenta no recargar ni complicar mucho la barra.
Seguimos en la plantilla y vamos añadir el CSS. Buscamos </b:skin> y nos aparecerá una línea así

 

<b:skin>…..skin>

 

Hacemos click donde están los puntos y se abrirá todo nuestro CSS. Bajamos hasta que encontremos la sección

 

/*Mobile
———————————————–*/

 

Añadimos el siguiente código antes de la siguiente sección para que este todo ordenado.

 

.mobile #menu-movil{
   background: #ecd1d0; /*Color de la barra*/
   padding: 5px;
   margin:0 auto;
   width:100%;
   position: fixed; /*para que la barra quede fija*/
   z-index:101; /*para que la barra quede fija*/
   text-transform:uppercase; /*Para que las letras se vean en mayúsculas, si las queréis en minúsculas quitad esta línea*/
   font: normal normal 12px Arial; /*tamaño y tipografía de las letras*/
   text-align:center; /*para que el texto esté centrado*/
   display: block;
}
.mobile #menu-movil a{
   padding:0px 5px; /* aumentar o disminuir el espacio entre los elementos del menú*/
   color:#fff; /*Color del texto*/
}

 

PASO 2.-Ahora tendremos que quitar esta nueva barra de nuestra versión Pc ya que solo le hemos puesto estilo para la versión móvil. Vamos al final de nuestro CSS y antes de  ]]></b:skin>, pegamos lo siguiente:

 

#menu-movil {display: none;} /*para que no aparezca en la versión web*/

 

Le damos a vista previa en el pc y si todo esta bien damos a guardar. A continuación nos queda comprobar como se ve directamente en nuestro móvil.

 

PASO 3.-Si tenéis un blog con fondo puede que se os vea entre la barra fija y la cabecera. Podéis reducir este espacio desde plantilla→personalizar→avanzado→añadir CSS, si no queréis volver a entrar en la plantilla:

 

  #header-inner{margin-top:-20px;} /*reducir (-) o ampliar espacio entre cabecera y elemento superior*/

 

Le damos a guardar plantilla y volvemos a comprobar el resultado tanto en pc como móvil.

 

 

BARRA FIJA CON ICONOS WEB

 

Si en vez de texto os apetece poner iconos web, por ejemplo para que os sigan en vuestras redes, debéis seguir los siguiente pasos.
Lo primero es tenerlos instalados y personalizados. Yo ya los tenía en mi barra superior, así que los aproveche. Aquí os dejo un tutorial de como instalarlos.

 

Ir a editar plantilla y seguir las instrucciones del PASO 1 pero con los siguiente códigos:

 

<div id=’menu-movil’>
<a href=»enlace-a-tu-red-social» target=»_blank»>AÑADE AQUÍ EL CÓDIGO DE TU ICONO</a>
<a href=»enlace-a-tu-red-social» target=»_blank»>AÑADE AQUÍ EL CÓDIGO DE TU ICONO</a>
<a href=»enlace-a-tu-red-social» target=»_blank»>AÑADE AQUÍ EL CÓDIGO DE TU ICONO</a>
<a href=»enlace-a-tu-página de contacto» target=»_blank»>AÑADE AQUÍ EL CÓDIGO DE TU ICONO</a>
</div>

 

Y para el CSS, copiamos este código en la misma sección que comentaba más arriba.

 

.mobile #menu-movil{
   background: #ecd1d0; /*Color de la barra*/
   padding-top:8px;
   padding-bottom:8px;
   margin:0 auto;
   width:100%;
   position: fixed;
   z-index:101;
   text-transform:uppercase; /*Para que las letras se vean en mayúsculas, si las queréis en minúsculas quitad esta línea*/
   font: normal normal 14px Arial; /*tamaño y tipografía de las letras*/
   text-align:center; /*para que el texto esté centrado*/
   display:block;
}
.mobile #menu-movil a{
   padding:0px 15px ; /*separación entre los elementos de la barra*/
   color:#fff; /*Color del texto*/
}

 

Los valores en rosa son los que podéis personalizar. Si os fijáis en el CSS he cambiado algunos tamaños porque mis iconos web eran más grandes y la barra tapaba media cabecera. Si os pasa lo mismo podéis disminuir directamente el tamaño de vuestros iconos o, al contrario del caso anterior, aumentar la distancia entre el menú y la cabecera. En mi caso, busque en la plantilla el código del PASO 3 y lo cambie por este:

 

#header-inner{ margin-top:8px; }/*aumentar el espacio entre cabecera y elemento superior*/
Comprobamos en la versión pc y móvil que todo este bien y a otra cosa mariposa.

 

A TENER EN CUENTA:

  • Recuerda hacer una copia de seguridad y guardar en sitio seguro antes de tocar la plantilla por si te equivocas y/o en algún momento quieres volver a tenerla como antes de hacer estos cambios.
  • Seguir con calma todos los pasos. Es muy fácil que al copiar y pegar os dejéis algún pequeño elemento y entonces no funcione. Si no te sale a la primera, repásalo o vuelve a empezar.
  • Podéis añadir los enlaces que queráis, teniendo en cuenta el reducido espacio del móvil. No os paséis sino no serán legibles.
  • Las variables en rosa son para que las adaptéis a vuestro gusto y diseño. Es cuestión de ir probando fuentes y tamaño y visualizarlo en el móvil para ver si os quedáis con ese resultado o seguís probando. Es muy normal que tengáis que cambiar los valores de padding o margin según el diseño de vuestro blog.
  • El CSS se podría añadir sin tocar la plantilla mediante Personalizar plantilla→avanzado→añadir CSS. Pero no siempre funciona. Por eso la forma más correcta de hacerlo es ir directamente a la plantilla y añadirlo en el sitio adecuado. No obstante si te da cosa tocar la plantilla, puedes optar por la opción más fácil si blogger te refleja los cambios al guardar plantilla.

Si te has perdido el primer post de presentación y primeros pasos, te aconsejo que te pases por aquí.

Ahora búscate un momento tranquilo y pon te a seguir poniendo bonita tu plantilla móvil. Y después me cuentas que tal te ha ido….ah y no te olvides de compartir esta entrada!!!
La semana que viene veremos cómo crear un menú tipo páginas solo para tu móvil y quitarnos de encima el que te da blogger con INICIO y su correspondiente desplegable.

 

 

¿Te ha sido de utilidad el artículo?
(Votos: 1 Promedio: 5)

¿Quieres descubrir las "7 Claves para tener un negocio online Rentable y Visible con menos de 200 visitas diarias?

Recuerda, el tamaño aquí tampoco importa...

The following two tabs change content below.

Ana María

Mamá, bloguera y emprendedora por sorpresa con alma inquieta. El diseño es mi pasión y la redes sociales mi hábitat preferida. Mi misión: ayudar a otros bloggers a crear su proyecto online de una manera creativa, personalizada y profesional.

BLACK WEEK PARA EMPRENDEDORES DIGITALES


Cada día es UNA OPORTUNIDAD para impulsar un áera concreta de TU NEGOCIO 

INSTAGRAM – ASESORÍAS ESTRATÉGICAS – DISEÑO WEB – TIKTOK PARA EMPRENDEDORES

Pin It on Pinterest