09 noviembre 2010

Plantilla "Mis Recetas Secretas" más amplia

Plantilla Mis Recetas Secretas


Hoy les tengo la versión más amplia de la plantilla Mis Recetas Secretas, ya me lo había pedido, también aproveché para hacer otros cambios, tales como:

  • El menú de navegación superior (en el top) son los enlaces de las páginas estáticas.
  • El menú de pestañas soporta páginas, por lo que si te decides por poner los enlaces de las páginas estáticas, en lugar de categorizar las entradas con las etiquetas, como en la plantilla original, los enlaces de las páginas (y el efecto de pestaña abierta) se agregarán de forma automática.
  • Debido a que creé estilos individuales para las pestañas, cuando entres a una entrada en particular, se cerrarán todas las pestañas del menú de navegación, cosa que no sucedía en la plantilla original.
  • La columna principal ahora mide 540 pixeles, anteriormente era de 430 pixeles.

La mecánica para crear el efecto de pestaña abierta cuando se usan las categorías usando las etiquetas es el mismo, el código que hace que se cree el efecto es éste:

<!-- Estilos menu de navegacion de pestañas -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.pageName == &quot;Entradas&quot;'>
<style>
#header-wrapper {
background-image: url(http://4.bp.blogspot.com/_yCA1gGtzYzo/TNhKwW_5XwI/AAAAAAAAEAQ/mJSTd_j-b0s/s1200/header-w-entradas.png);}
a#menuEntradas {color:#d78306 !important;font-weight:bold;}
#main{
width:800px;
padding:0 5px 0 10px;}
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;}
#menu li a {
background: none !important;}
</style>
</b:if>
<b:if cond='data:blog.pageName == &quot;Platillos&quot;'>
<style>
#header-wrapper {background-image: url(http://3.bp.blogspot.com/_yCA1gGtzYzo/TNhKy6NnIBI/AAAAAAAAEAU/ILwU2YqdAvE/s1200/header-w-Platillos.png);}
a#menuPlatillos {color:#d78306 !important;font-weight:bold;}
#main{
width:800px;
padding:0 5px 0 10px;}
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;}
#menu li a {
background: none !important;}
</style>
</b:if>
<b:if cond='data:blog.pageName == &quot;Postres&quot;'>
<style>
#header-wrapper {background-image: url(http://1.bp.blogspot.com/_yCA1gGtzYzo/TNhK2juzAzI/AAAAAAAAEAY/7RVIzzms_s4/s1200/header-w-postres.png);
}
a#menuPostres {color:#d78306 !important;font-weight:bold;}
#main{
width:800px;
padding:0 5px 0 10px;}
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;}
#menu li a {
background: none !important;}
</style>
</b:if>
<b:if cond='data:blog.pageName == &quot;Favoritos&quot;'>
 <style>
#header-wrapper {background-image: url(http://4.bp.blogspot.com/_yCA1gGtzYzo/TNhK6UXV-yI/AAAAAAAAEAc/rDhCAhuW_4Q/s1200/header-wn-postre.png) ;}
a#menuFavs {color:#d78306 !important;font-weight:bold;}
#main{
width:800px;
padding:0 5px 0 10px;}
#sidebar-wrapper {
width:0px;
visibility:hidden;
display:none;}
#menu li a {
background: none !important;}
</style></b:if></b:if>
Instrucciones para personalizar los enlaces de las pestañas por lo propios

Para personalizar los enlaces de  Entradas, Platillos, Postres y Favoritos deberás hacer los siguiente:

Paso 1. Ir a diseño►edición HTML de tu plantilla y selecciona expandir plantillas de artilugios.


Paso 2. Con la ayuda de CTRL F, busca:

<li><a href='#' id='menuEntradas'>Entradas</a></li>
<li><a href='#'  id='menuPlatillos'>Platillos</a></li>
<li><a href='#' id='menuPostres'>Postres</a></li>
<li><a href='#' id='menuFavs'>Favoritos</a></li>
 
Paso 3. Sustituye las almohadillas: #, por las URLs de las páginas de las categorías que has creado por medio del uso de la etiquetas en tus entradas. La URL siempre se verá así:

http://nombre_detublog.blogspot.com/search/label/NOMBRE_DE_ LA_ ETIQUETA

Puedes cambiar los títulos de las categorías como en la plantilla original, siguiendo los mismos pasos.


IMPORTANTE:
Cuando descargas la plantilla y la instales por primera vez el inicio dirá "PAGINA PRINCIPAL", esto es porque soporta páginas, sin embargo, puedes cambiar el título a "Inicio" (para que el texto sea más corto). También debes ingresar a editar páginas en el diseño de tu plantilla, en la sección de pestañas y "quita la selección" que dice:

Añadir nuevas páginas automáticamente cuando se publiquen

Recuerda, no marques la casilla. El menú de pestañas soporta páginas, si la marcas se agregarán las nuevas páginas que crees a esta sección, y una pestaña más, supera el ancho que le he dado al contenedor, por eso, la pestaña se irá para abajo. Si quieres agregar una pestaña mas tendrías que editar el ancho asignado para el menú.

Para agregar el buscador interno a la columna lateral, sigue las instrucciones que indico en la plantilla: "Mis recetas secretas".

Demostración  Descargar


Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.