Menú en Blogger para Etiquetas


Ya vimos en una entrada anterior como poner en el blog un menú con las páginas que por defecto nos entrega Blogger.
Hoy veremos un nuevo menú, muy sencillo para poner en el blog con el link que nosotros queramos. Puede ser útil para las etiquetas o categorías por ejemplo, para darle un aspecto mas ordenado.
Lo primero que haremos es editar el código de mas abajo y agregarle nuestras url donde queremos que se dirija el lector. En donde dice TU URL, editas y pones las tuyas.
Luego copias todo el código vas a diseño | añadir un gadget | Html/javascript y lo pegas todo allí, por último lo arrastras donde quieres ponerlo. Y ya está el menú.

<style type='text/css'>
#menu {
background-color:#F5F5F5;
height:29px;
margin:3px auto 0;
width:900px;
}
#menu ul {
float:left;
font-family:'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', sans-serif;
list-style-type:none;
margin:0;
padding:0;
width:630px;
}
#menu ul li {
display:block;
float:left;
font-size:12px;
height:29px;
letter-spacing:1px;
line-height:18px;
margin-right:0;
padding:0;
text-transform:none;
}
#menu ul li:hover {
background-color:#DDDDDD;
}
#menu ul li a:link, #menu ul li a:visited, #menu ul li a:active {
color:#666666;
display:block;
float:left;
height:19px;
margin:0;
padding:5px 20px 0;
text-transform:none;
}
#menu ul li a:hover {
background: #fff;
height:25px;
text-decoration:none;
}
#menu ul li ul {
width:180px;
}
</style>
<div id='menu'>
  <ul>
<li><a href='TU URL'>Inicio</a></li>
<li><a href='TU URL'>Contacto</a></li>
<li><a href='TU URL'>Páginas Amigas</a></li>
<li><a href='TU URL'>Políticas</a></li>
</ul>
</div>

El diseño no es ninguna maravilla, pero es práctico y lo pueden editar totalmente a gusto. Si quieres mas pestañas copias <li><a href='TU URL'>Inicio</a></li>  tantas veces como sea necesario, cambiando los datos por los tuyos.


Si te gustó compártelo en tu red social o recomiéndalo en Google!!!

9 comentarios:

  1. Hola!
    Me encanta la idea. Pero, ¿cómo puedo personalizarla? Es que así se ve muy sosa.
    Un beso

    ResponderEliminar
    Respuestas
    1. Cambiando los estilos, background es el fondo, color es el color de la letra, etc. Saludos.

      Eliminar
  2. Hola!!¿ Y como puedo hacer que tengan submenús esas páginas?. Gracias

    ResponderEliminar
    Respuestas
    1. Para eso tienes que buscar algún menú dropdown, o asi mismo, menú con subpestañas.

      Eliminar
  3. hola como hago para que todo el menú este en una línea horizontal, porque dos de mis etiquetas se ponen abajo de otra...

    ResponderEliminar
  4. HOLA MUY BUENO TU BLOG, MI PREGUNTA ES POR EJEMPLO EN CONTACTOS COMO HAGO PARA Q APAREZCA COMO VOS TENES? GRACIAS.

    ResponderEliminar
    Respuestas
    1. Debes poner un formulario de contacto en la edición html de la página. Sldos.

      Eliminar
  5. como hago para que los enlaces se abran en una nueva pestaña

    ResponderEliminar
  6. me gustaría poder poner etiquetas que se generen por número de veces empleada la palabra, y que su tamaño guarde relación también con su uso.
    Ya si tienen movimiento y cambian con el cursor encima, lo bordamos

    ResponderEliminar

Tus comentarios ayudan a mejorar este Blog.