Dar estilo individual a las pestañas del menú en Blogger

Ya he visto la forma de dar estilo a la barra de menú en Blogger, no resulta complicado, pero los cambios se aplicarán a todas las pestañas.

Si tenemos la necesidad de resaltar alguna pestaña o bien queremos diferenciar unas de otras necesitamos dar estilo de forma individual y no general a las pestañas de la barra de menú Páginas.

Tras lograr que la pestaña Inicio se muestre con el mismo aspecto que el resto de pestañas de la barra del menú ,voy en esta entrada a dar estilo a la pestaña Inicio para que se distinga del resto y destaque sobre las demás.

Como siempre en estos casos que vamos a modificar la plantilla del blog, tenemos que editarla y para eso vamos a Plantilla-Editar HTML. Importante recordar de nuevo que siempre que modifiquemos la plantilla debemos realizar una copia de seguridad del blog.

Para identificar cada una de las pestañas de la barra de páginas tengo que asignarles un nombre, así que debo editar el HTML del gadget Páginas dentro de la plantilla. Cada pestaña tiene que tener un identificador y tiene que ser único y distinto. Una vez que las pestañas de la barra de menú estén identificadas, podré aplicar estilo a cada una de ellas de forma individual mediante CSS.

1. Editar HTML del gadget Páginas

Dentro de la ventana que contiene el código de la plantilla del blog me sitúo en las líneas de código referente al gadget de Páginas.

 <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>

Activo el buscador con CTRL+F y escribo,

<li><a expr:href='data:link.href'><data:link.title/></a></li>

Encuentro esta línea en,
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>

y la cambio por,
 <li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>

De esta forma se toma el título de cada pestaña que hayamos creado, y esté en la barra de menú, como nombre de clase de la pestaña. Es decir, se agrega el título de cada pestaña al nombre de clase de la pestaña, permitiendo así que cada pestaña sea referenciada por su título (nombre) más tarde.

 
 <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>

2. Aplicación de estilo CSS a las pestañas

Solo resta aplicar el estilo CSS a la pestaña o pestañas que deseo diferenciar.

 Busco el código CSS de la plantilla que son las líneas que están entre <b:skin>... y ... </b:skin>. Si solo se muestra  <b:skin>.... </b:skin> y el número de línea está acompañado de ➤ significa que el código está oculto. Expandiremos el código haciendo clic sobre ➤.

 Localizo los códigos CSS dedicados a las pestañas (Tabs) con CTRL+F y escribo /* Tabs.

 Una vez que estoy en el código CSS de Tabs, me voy al final donde me aparece,

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

 y escribo a continuación el siguiente formato
.PageList li.nombre_pestaña a {..estilos CSS..}
 

◾ nombre_pestaña es el nombre / título de la pestaña a diseñar de forma diferente. Los nombres de clase son sensibles a mayúsculas y minúsculas, así que es importante escribir el nombre que se dio a las paginas cuando se crearon.

◾ estilos CSS son cualquier propiedad, como color de fondo, imagen de fondo, color de texto, fuente, etc

Por ejemplo, voy a dar estilo solo a la pestaña con el nombre CSS. Debo escribirlo exactamente igual, las tres letras en mayúsculas. Se verá la pestaña en fondo blanco.

.PageList li.CSS a {background-color: #FFFFFF;}

Si quiero cambiar el estilo de otras pestañas solo tengo que añadir una nueva línea con el nombre de la nueva pestaña a modificar.

Otro ejemplo, en este caso voy a modificar también la pestaña Blogger para que el fondo sea amarillo, la letra cursiva, en azul y fuente Droid Sans.

.PageList li.CSS a {background-color: #FFFFFF;}
.PageList li.Blogger a {background-color: #FFFF00; font-style:italic; font-family: 'Droid Sans'; color:blue;}

 

Dar estilo solo a la pestaña Inicio 

Si queremos dar estilo a la pestaña Inicio, y como se vio en la entrada anterior "Evitar que la pestaña Inicio se muestre como seleccionada", tenemos que modificar el código HTML del gadget de páginas descrito en la entrada mencionada antes de aplicar el estilo CSS.

Entradas relacionadas

•  Personalizar la disposición y letra del menú de páginas en un blog
•  Personalizar el fondo del menú horizontal de páginas en el blog
•  Personalizar pestaña seleccionada del menú páginas de un blog
•  Evitar que la pestaña Inicio se muestre como seleccionada