3 maneras de personalizar tu menú en Blogger

3-maneras-de-personalizar-tu-menu-en-blogger

Hoy ando de estreno! si miras un poco hacia arriba, hay un nuevo menú superior, que ha hecho posible reducir elementos en el sidebar, porque cómo ya te comenté en esta entrada, el sidebar, cuanto más ligero mejor y a poder ser, exclusivamente con los elementos que más te interese potenciar.





He tardado un poquito más de la cuenta en publicar, porque tras estar trabajando intensamente durante más de mes y medio en la creación de un nuevo proyecto, no quería que mi empeño por cumplir las fechas, lo echara todo a perder. Así que, me he tenido que poner un freno mental, para publicar (por primera vez) un lunes y así poder presentarte todo el trabajo, como te mereces.



Te aviso que me he liado la manta a la cabeza y te traigo 3 tutoriales distintos para que puedas crear un menú personalizado en tu blog.

En la serie de tutoriales que he creado para personalizar tu blog con CSS, ya hemos visto:

 Cómo instalar iconos en tu blog para mostrar tus redes sociales

 Cómo poner imágenes o iconos en los botones de compartir el post

 Cómo instalar un botón de subir con imágenes o iconos

 Cómo sustituir entradas antiguas y recientes por iconos

 Cómo personalizar la caja final del post en Blogger

 Cómo personalizar el sidebar de Blogger con CSS


Así que el menú horizontal, ya tocaba, se ha hecho esperar, pero aquí está por fin. Y como te digo, no te traigo una, te traigo 3 maneras distintas de personalizar tu menú en Blogger.

¿Te gusta la idea? pues no perdamos más tiempo:

OPCIÓN 1: MENÚ PERSONALIZABLE DE BLOGGER



menu-personalizado-para-blogger




Blogger cuenta con un gadget de páginas para crearte un menú horizontal, al que se le puede sacar bastante partido con ayuda de CSS, porque el que muestra una vez que configuras el gadget, es más feo que un frigorífico por detrás.


menu-de-blogger-sin-personalizar




Vamos a ver cómo ponerlo requetebonito:


 Lo primero que tienes que tener claro es qué paginas quieres que conformen tu menú y crearlas si aún no lo has hecho. Para crear páginas en Blogger, tan sólo tienes que ir al apartado Paginas y pulsar en Página nueva. Elígelas bien, ya que Blogger sólo te permite crear 20 páginas.

No hace falta que las rellenes, si aún no las tenías creadas. Con ponerle un título y darle a publicar, tienes bastante, ya las editarás más tarde.


 Una vez, tienes creadas todas tus páginas, dirígete al apartado Diseño y verás que bajo la cabecera (header), te aparece un elemento llamado crosscol o Cross-Column que te da la opción de Añadir un gadget. Púlsalo y elige la opción Páginas entre todos los elementos que te muestra.

Cuando le des, verás que aparecen todas las páginas que hayas creado en tu blog y además una opción para Añadir enlace externo, que resulta muy útil cuando necesitas enlazar a algún sitio externo de tu blog, como por ejemplo, una tienda online, que tengas en otro dominio. Marca todas las páginas que quieres que se muestren en tu menú, ordénalas según prefieras que aparezcan y guarda los cambios.

Ahora verás que bajo la cabecera te aparece el menú sosete que te mostré antes, con las páginas que has elegido. ¿Queda raro, verdad? menos mal que existe el CSS, venga, vamos a hacer milagros con esto!

 Dirígete a la Plantilla>Editar HTML (recuerda hacer una copia de seguridad antes de meterte a toquetear) y haz clic en cualquier sitio dentro de la plantilla para pulsar Ctrl+F y que te salga la caja de búsqueda,  pega: <b:skin> y pulsa intro.

Aquí comienzan las hojas de estilo de tu blog, divididas por secciones, así que iremos bajando, hasta encontrar la que necesitamos que es Tabs (mira el vídeo que tienes más abajo para no liarte)

Justo debajo verás que te aparece algo parecido a esto:

.tabs-inner .section:first-child {$(header.bottom.border.size) solid $(tabs.border.color);}



.tabs-inner .section:first-child ul {

  margin-top: -$(header.border.size);

  border-top: $(header.border.size) solid $(tabs.border.color);

  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);

  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);

}



.tabs-inner .widget ul {

  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;

  _background-image: none;

  border-bottom: $(tabs.border.width) solid $(tabs.border.color);



  margin-top: $(tabs.margin.top);

  margin-left: -$(tabs.margin.side);

  margin-right: -$(tabs.margin.side);

}



.tabs-inner .widget li a {

  display: inline-block;



  padding: .6em 1em;



  font: $(tabs.font);

  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);

  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);

}



.tabs-inner .widget li:first-child a {

  border-$startSide: none;

}



.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

  color: $(tabs.selected.text.color);

  background-color: $(tabs.selected.background.color);

  text-decoration: none;


}




Pues eso es precisamente lo que vamos a personalizar. Ve mirando el vídeo, para que lo veas todo con detalle y no te equivoques. Aquí te dejo mi opción de personalización, pero en el vídeo que encontrarás debajo, te cuento cómo ponerlo totalmente a tu gusto:

.tabs-inner .section:first-child {border: 0px solid #a5a5a5;}



.tabs-inner .section:first-child ul {

  margin-top: 0;

  border: 2px solid #becfe7;

  border-radius: 50px;

}



.tabs-inner .widget ul {

  background: transparent;

  margin-top: $(tabs.margin.top);

  margin-left: -30px;

  margin-right: -30px;

}



.tabs-inner .widget li a {

  display: inline-block;

  padding: 15px 122px;

  font: 16px;

  text-transform: uppercase;

  color: #becfe7;

  border-$startSide: 0px solid #becfe7;

  border-$endSide: 0px solid #becfe7;

}



.tabs-inner .widget li:first-child a {

  border-$startSide: none;

}



.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

  color: #ffffff;

  background-color: #becfe7;

  text-decoration: none;


}




No te líes, mira el paso a paso del vídeo:




OPCIÓN 2: MENÚ SUPERIOR CON BUSCADOR Y REDES SOCIALES




Vamos a ver ahora, cómo crear un menú superior con buscador y redes sociales.

Antes de nada. si ya tenías alguno creado, te aconsejo que lo elimines para que no interfiera con el nuevo que vas a instalar.

Si aún no has instalado la cartera de iconos de Font Awesome, ahora es el momento de hacerlo.

Busca <head> y justo debajo, añade este código: <link href=’//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.css’ rel=’stylesheet’/>

Guarda los cambios y busca este código: <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>


Justo debajo, pega lo siguiente:

<div id='menu-superior'>
<div id='menu'>
<ul>
<li><a href='URL PAG1'>PAGINA 1</a></li>
<li><a href='URL PAG2'>PAGINA 2</a></li>
<li><a href='URL PAG3'>PAGINA 3</a></li>
<li><a href='URL PAG4'>PAGINA 4</a></li>
<li><a href='URL PAGINA FACEBOOK'><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA TWITTER'><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA GOOGLE+'><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA INSTAGRAM'><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA PINTEREST'><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
<li><div id='buscador'><form action='/search' id='searchthis' method='get' style='display: inline;'>
<input class='search-box' name='q' placeholder='BUSCAR' size='30' type='text'/>
</form></div></li>
</ul>
</div>

</div>



Una vez que has configurado correctamente tu menú (te aconsejo que uses primero el bloc de notas y después lo pases a la plantilla), llega el momento de añadirle los estilos necesarios, para que quede completamente a tu gusto.

Si te cuesta dar con la sección <b:skin> de tu plantilla, pega el código directamente en la caja de búsqueda y una vez localizado, busca el apartado Tabs, para pegar este código, justo al final (mira el vídeo, para configurar los estilos paso a paso):

#menu-superior {

background: #B7CDC0;

width:100%;

height:60px;

margin:0;

box-shadow: 0px 2px 6px #333333;

position:fixed;

z-index:101;

}



#menu{

margin:0 auto;

width:1250px;

}



#menu ul{

float:left;

margin:0px;

padding:0;

list-style-type:none;

height:25px;

}



#menu ul li{

display:block;

float:left;

height:30px;

}



#menu ul li a{

display:block;

float:left;

color:#ffffff;

font: 16px 'Open Sans';

text-decoration:none;

padding:20px 25px 0 ;

}



#menu ul li a:hover{

color:#727272;

height:20px;

}



#menu ul li i:hover{

border: 2px solid #727272;

border-radius: 50px;

padding: 10px;

margin-top: -12px;

}



.search-box{

width:75%;

text-align:center;

padding:10px 0;

color:#727272;

border:1px solid #cccccc;

background:#ffffff;

font: 11px ;

border-radius:5px;

}



#buscador{

margin-top:10px;

}



#menu ul li #buscador{

padding-left: 150px;

}


Aquí tienes el vídeo en el que te cuento paso a paso, cómo personalizarlo:







OPCIÓN 3: MENÚ SUPERIOR DESPLEGABLE CON BUSCADOR Y REDES SOCIALES




Ultima opción, para ajustar tu menú aún más a tus necesidades. ¿Quieres incluir las categorías y así quitarlas del sidebar? eso está hecho en un momentín!

Antes de nada. si ya tenías alguno creado, te aconsejo que lo elimines para que no interfiera con el nuevo que vas a instalar.

Si aún no has instalado la cartera de iconos de Font Awesome, ahora es el momento de hacerlo.

Busca <head> y justo debajo, añade este código: <link href=’//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.css’ rel=’stylesheet’/>

Guarda los cambios y busca este código: <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>


Justo debajo, pega lo siguiente:

<div id='menu-superior'>
<div id='menu'>
<ul id='nav'>
<li><a href='URL PAG1'>PAGINA 1</a></li>
<li><a href='URL PAG2'>PAGINA 2</a></li>
<li>
<a href='#'>DESPLEGABLE<i class="fa fa-angle-down"></i></a>
<ul>
<li><a href='URL CAT1'>CATEGORIA 1</a></li>
<li><a href='URL CAT2'>CATEGORIA 2</a></li>
<li><a href='URL CAT3'>CATEGORIA 3</a></li>
<li><a href='URL CAT4'>CATEGORIA 4</a></li>
<li><a href='URL CAT5'>CATEGORIA 5</a></li>
</ul>
</li>
<li><a href='URL PAG4'>PAGINA 4</a></li>
<li><a href='URL PAGINA FACEBOOK'><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA TWITTER'><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA GOOGLE+'><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA INSTAGRAM'><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href='URL PAGINA PINTEREST'><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
<li><div id='buscador'><form action='/search' id='searchthis' method='get' style='display: inline;'>
<input class='search-box' name='q' placeholder='BUSCAR' size='30' type='text'/>
</form></div></li>
</ul>
</div>
</div>




Una vez que has configurado correctamente tu menú (te aconsejo que uses primero el bloc de notas y después lo pases a la plantilla), llega el momento de añadirle los estilos necesarios, para que quede completamente a tu gusto.

Si te cuesta dar con la sección <b:skin> de tu plantilla, pega el código directamente en la caja de búsqueda y una vez localizado, busca el apartado Tabs, para pegar este código, justo al final (mira el vídeo, para configurar los estilos paso a paso):

#menu-superior {
background: #C38AA3; 
width:100%;
height:60px;
margin:0;
box-shadow: 0px 2px 6px #333333;
position:fixed;
z-index:101;
}

#menu{
margin:0 auto;
width:1400px;
}

#nav {margin: 0 auto; padding: 0; background:transparent;}

#nav ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}

#nav li a, #nav li a:link, #nav li a:visited {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
color: #ffffff;
display: block;
margin: 0;
padding: 20px 29px 10px;
}
#nav li a:hover, #nav li a:active {
color: #727272;
margin: 0;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
background: #C38AA3;
width: 150px;
color: #ffffff;
float: none;
margin-top: 5px;
padding: 17px 15px;
}

#nav li li a:hover, #nav li li a:active {
background: #E6B6C9;
color: #ffffff;
}

#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}

#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px;  margin: 0; padding: 0; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}

.search-box{
width:75%;
text-align:center;
padding:10px 0;
color:#727272;
border:1px solid #cccccc;
background:#ffffff;
font-size: 11px;
border-radius:5px;
}

#buscador{
margin-top:10px;
}

#menu ul li #buscador{
padding-left: 150px;
}


Aquí tienes el vídeo en el que te cuento paso a paso, cómo personalizarlo:


Aquí te dejo el post de mi amiga Laura de Redhead Sense , del que te he hablado en el post, para que personalices las fuentes de tu blog con Google Fonts.



HACER QUE LOS ENLACES SE ABRAN EN OTRA VENTANA

 Para terminar, un truco para que los enlaces que pongas en tu menú, se abran en una nueva pestaña. Esto tiene sentido, cuando se trata de un enlace externo, como puede ser una tienda online o las mismas redes sociales.

 En el enlace que quieras que se abra en otra pestaña, coloca esto al final: target=’_blank’ 

Quedaría de esta manera:

<li><a href=’URL ENLACE’ target=’_blank’>NOMBRE</a></li>



Y con esto me despido, ¿te ha gustado la idea de personalizar el menú? ¿con cuál te has quedado? ¿qué tipo de contenidos, estás esperando ver en este blog? cuéntamelo todo, que estoy deseando de leerte 🙂


 Que tengas un gran día!

Comentarios

  1. ¡Hola guapa!
    Sin duda un tutorial que me va a venir de perlas a la hora de renovar mi blog.
    Aunque ya tengo instalado el menú desplegable en mi actual blog, como quiero rehacer (si lo consigo)toda la plantilla y claro está, no sé qué tutoriales seguí para tener lo que tengo ahora en el blog (lo sé soy un desastre), sin duda voy a atiborrarme de todos los tutoriales que vas haciendo.
    Así que una vez más, gracias por todo lo que nos vas enseñando.
    Por cierto el menú superior te ha quedado de escándalo. Y contentísima de que estrenes curso. Seguro que es un éxito.
    Besos

    ResponderEliminar
    Respuestas
    1. Muchas gracias Carolina, ojalá. Ya tenía ganas de cambiar el menú y reestructurar un poco el blog antes de pasar a WordPress. Estoy segura de que cuando te decidas a cambiar la estética del blog, lo vas a hacer genial. Tú sí que me ayudas con tus contenidos, el de la media naranja me ha encantado, besotes!

      Eliminar
  2. Mira si estoy dormida y despistada en verano que estaba convencidísima que el post era para wordpress (será porque no lo pone clarito en el título) habrás pensado por mi anterior comentario que no estoy muy normal jejeje, me guardo el código porque lo aplicaré seguro ;)

    ResponderEliminar
    Respuestas
    1. Jjajaa, Wordpress ya llegará con el tiempo! desde luego, cuando me haga con él no me lo voy a creer, jejeje.. un beso Mónica!

      Eliminar
  3. Es una buena opción la que muestras. Yo suelo crear mi menú en html. Creo una tabla y luego le doy estilos en css. Es algo más complicado si no se controla la programación en código pero a mi me gusta más. Siempre que puedo intento hacer las cosas por mi misma y no tirar de gadget. De esta forma no pierdo los conocimientos de programación y voy practicando. ¡Un besito!

    ResponderEliminar
  4. La verdad es que sí Vanessa, queda práctico y más vistoso, pero adaptarlo a vista móvil también es más complicado, jeje. Pero bueno, si sabes hacerlo, merece la pena. Un beso!

    ResponderEliminar
  5. Holaaaaa, me ha encantado tu blog,e fasssCINAAAAAA pero tengo una duda q es eso del css?! Yo he creado mi blog solita y le he hecho modificaciones y pars mi obtener mi blog bonito bonito ha sido muy complicado, y hay cosas q me son difíciles de entender y mr costo un error fatal entender que el html es de cuidado...
    Así q me podrías explicar q es css!? Ya me he SUSCRITO y he descargado el e book!! Interesante saludos!!

    ResponderEliminar
  6. Holaaaaa, me ha encantado tu blog,e fasssCINAAAAAA pero tengo una duda q es eso del css?! Yo he creado mi blog solita y le he hecho modificaciones y pars mi obtener mi blog bonito bonito ha sido muy complicado, y hay cosas q me son difíciles de entender y mr costo un error fatal entender que el html es de cuidado...
    Así q me podrías explicar q es css!? Ya me he SUSCRITO y he descargado el e book!! Interesante saludos!!

    ResponderEliminar
    Respuestas
    1. Hola Isabel, bienvenida a la comunidad me alegro que te haya gustado el blog y que te resulte útil la guía gratuita para usar imágenes en la red. Te explico, el html es código que creas para un fin determinado, como puede ser por ejemplo un botón, una caja para enmarcar textos, un buscador etc... y el css es la parte estética de ese elemento que has creado. Cuando tu creas un elemento, normalmente necesitas darle chapa y pintura jeje, ponerlo bonito y esa es la parte que corresponde al CSS, por ejemplo, darle un color o un fondo determinado, hacer que las letras se vean en mayúscula o con un tipo de fuente o tamaño concreto. En definitiva, darle un estética al elemento que creas con HTML. Espero que esta explicación te sirva para entender mejor lo que es el CSS. De todas maneras en el indice del blog, en el apartado Blogging, tienes todos los tutoriales que he creado en los que puedes incluir código HTML y personalizarlos a tu gusto con CSS. Puede que así como te lo cuento, te parezca un poco complicado, pero ya verás que siguiendo los tutoriales te va a resultar muy sencillo y te vas a hacer una experta. Un beso!

      Eliminar

Publicar un comentario