Menú de Navegación con Pestañas estilo Google Play [Blogger] - Trucodigo

Menú de Navegación con Pestañas estilo Google Play [Blogger]



Importante: Antes de empezar a personalizar el gadget de las etiquetas, es necesario habilitar una sección en la cabecera, para poner ahí el gadget de las etiquetas, ya que la sección que está debajo de la cabecera llamada crosscol, está diseñada pensando en el menú de navegación que traen consigo las plantillas nuevas de Blogger, y el CSS que ya tienen estropeará el resultado. Otra opción seria quitar dicho CSS.

En este caso lo que haremos, es habilitar otra sección y para ello vas a la edición de HTML de la plantilla, y buscas esta linea de código:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


Luego, cambias "1" por "3", y "no" por "yes". Puse 3, para que se vea el area punteada en la sección, y puedas identificarla más fácilmente cuando estés en la sección de Diseño.

Luego, agregas el CSS yendo a Plantilla > Personalizar > Avanzado > Añadir CSS

#Label1 h2{display:none}

#Label1 ul {
overflow:hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 2px solid #3D3D3D;
}
#Label1 li {
float: left;
margin: 0 -15px -3px 0;
}
#Label1 li a {
float: left;
position: relative;
padding: 0 10px 0 14px;
height: 0;
line-height: 32px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
border-right: 30px solid transparent;
border-bottom: 30px solid #3D3D3D;
border-bottom-color: #777\9;
opacity: .3;
filter: alpha(opacity=30);
}
#Label1 li a:hover,
#Label1 li a:focus {
border-bottom-color: #2ac7e1;
opacity: 1;
filter: alpha(opacity=100);
}
#Label1 li a:focus {
outline: 0;
}
#Label1 li a.seleccionado {
z-index: 3;
border-bottom-color: #3d3d3d;
opacity: 1;
filter: alpha(opacity=100);
}


Nota: Las pestañas por defecto tienen transparencia, asi que puedes usar un fondo interesante y mejorar la presentación.

Después, vas a la edición de HTML de la la plantilla, expandes plantillas de artilugios y buscas el código del gadget de las etiquetas mismo que podrás identificar si lo buscas usando el título que le pusiste con la ayuda de Ctrl + F. Lo que nos interesa es esta parte:

<b:if cond='data:display == &quot;list&quot;'>    <ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>


y las cambias por éstas:

<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<li><a class='seleccionado' expr:href='data:blog.homepageUrl'>Inicio</a></li>
<b:else/>
<li><a expr:href='data:blog.homepageUrl'>Inicio</a></li>
</b:if>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:label.name == data:blog.searchLabel'><a class='seleccionado' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>


Con el código anterior, estamos agregando un enlace a la página principal (Inicio) y con una condicional de Blogger, destacamos dicho enlace cuando estemos en la página principal. Estamos agregando una clase que identificará al enlace seleccionado. Además, estamos cambiando la condicional en las páginas de etiquetas para que no se pierdan las propiedades declaradas en el CSS de la clase agregada para el enlace seleccionado. Puedes cambiar el texto "Inicio" de la página principal, por el que quieras.

Por último, verificas en vista previa que todo luzca bien, y si es así, guarda los cambios en Guardar plantilla.
Y ¡listo!, ya tienes un menú de navegación con pestañas usando el gadget de las etiquetas, al estilo Google Play ;D
Tags
Opciones
Estadísticas
Creado 27.12.2013 a las 01:08 hs
Categoría Blogger
  • 0
    Medallas
  • 0
    Favoritos
  • 1271
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Posts relacionados
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Patrocinador
Autor del post
Ver perfil de Omaredomex Omaredomex
Hombre Administrador  Mensaje
0 81 2
Medallas
No tiene medallas