Plantilla "Mis Recetas Secretas" más amplia

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 cree estilos individuales para las pestañas, cuando entres a una entrada en particular, se cerraran 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 este:

<!-- 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-H2ShUx1Px6lK9JL0BCBUWWyX9Y5Tap08HIGXzf_DGRhpsa7OlZqHIxjW7rtNFs3_YQ6Q542F5rE3a-l5AYOPmBSbVtWiV4S-ujFUzZtYHA8sd7jcBP6HOhyq0MOpK5LbmxO9r-W2t4/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5IFY1XJ-szemsXfnusM4Uxmx51i832VT63TERbXt2GH7sqek2zHuwqqmFSBkudvaKJfrL9mMEJGDkfOZMH_kepbFlTHA35-tV_bDXV5pmc0px1GLrD28wL1z4fZi1sy7hJ0EwtNKDZFM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2Lv4NNB86GWds8U5Fye_i0zsrH9vcBixltEGdJjbh3mV5ztTfdAaCPWgjfykevWowK2l0OA5Yok6s3BiDQKY05hZjqUxQRTHAOesw2fsR06U8o6AbCjQr51DoK7p5EkusqkKIel-ioo/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSeaIisaxxpDT_flatZh74U9qVdC6tUZI03OPLK16tY-ioUShtz9SHMix65c165vl8UoJnU3q_00ylu3Dfst6dvtHyCGy8LYHr558ulyHNgTSp9m2fykZoq6sFSoJ3DtsMJ6XeGBuGu3Y/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. Sustutuye los gatitos # , por los enlaces de las categorías, que deberás usar por medio de las etiquetas, el enlace siempre se verá así:



http://URL_DE_TU_BLOG/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 bajas la plantilla y la instalanles por primera vez el inicio dirá "PAGINA PRINCIPAL", esto es por que soporta páginas, sin embargo,  puedes cambiar el título a Inicio (para que 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 la selecciones,  ya que como el menú de pestañas soporta páginas, si la tienes seleccionado 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 para que contenga solo 5 pestañas, 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, harás lo mismo que en la entrada de "Mis recetas secretas".



Demo | Descargar