Introduciendo la plantilla para Blogger: Mis Recetas Secretas
Hola que tal, aquí les tengo una nueva propuesta para vestir a su blog, ideal para un blog de cocina, esta es mi primer plantilla que hago con el diseño específicamente para este tipo de blogs, en donde podrás compartir tus deliciosas recetas :) espero que te guste.
Demostración Descargarla
Características:
- Plantillas de 2 columnas
- 3 columnas adicionales en el footer
- Menú de Navegación que puedes configurar
- Menú en el top que también puedes configurar
- Icono de RSS integrado el header
- Buscador Interno
- Resumen automático en las entradas
- Tabla con pestañas para poner 3 widgets
- Comentarios Personalizados, destacando el comentario del Autor.
Cómo lograr el efecto de la pestaña abierta y mostrar las entradas sin la columna lateral.
Para que funcione el truco de la "pestaña abierta" en el link seleccionado, y se muestren “solo las entradas sin la columna lateral”, tienes que poner etiquetas a tus recetas, nombrándolas con una o más de esas categorías,(Entradas, Platillos, Postres y Favoritos).
- Entradas ( que pueden ser caldillos, sopas, ensaladas)
- Platillos (que serian Guisados, horneados etc.)
- Postres (pasteles, panes etc..)
- Favoritos (las recetas favoritas)
¿Si me explico? tienes que poner las etiquetas: - Entradas, platillos postres o Favoritos- (según la receta) a todas tus recetas.
Nota: Si no quieres estas categorías, las puedes cambiar por las que tú decidas más convenientes para tu blog. Para crear las categorías, yo me basé en un libro de recetas que tengo y que las muestra de ese modo y me pareció muy fácil y ordenado, pero tú decides.
Los efectos se logran por medio de condicionales, y éste es el código:
<!-- Estilos para MENU de NAVEGACION -->
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageName == "Entradas"'>
<style>
#header-wrapper {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijmMQoUFGeO5TFAcL0BsbjMK8HjE1Y6FNeASiJjre3TKKRyKNtvpWNgxCOfq_VIRMBxdpXoSofL3o1IL9ETAEbYcgCkI4towW4da1E2Rt0fDXXR2cuulGbhKcynK98nf-ygiEZ4Szp72Y/s800/entradas.jpg);
}
a#menuEntradas {color:#d78306 !important; font-weight:bold;!important}
#main{
width:700px;
padding:0 15px 0 20px;
}
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
</style></b:if>
<b:if cond='data:blog.pageName == "Platillos"'>
<style>
#header-wrapper {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihE-mD0oEKztwMZtSP3He_XHLd8WULpsFcrbq0zk49qpwEPWpQ8Le1hrnsYfA64pLSUdgCIX5h-QqJ_dAD3ZJpKCmPM63V7d3UNU20HHSLVWux9kP_5D4xS7rA4wX2LCvN_cRvUpRSEYA/s800/platillos.jpg);
}
a#menuPlatillos {color:#d78306 !important; font-weight:bold!important;}
#main{
width:700px;
padding:0 15px 0 20px;
}
#sidebar-wrapper {
width:0;
visibility:hidden;
display:none;
}
</style></b:if>
<b:if cond='data:blog.pageName == "Postres"'>
<style>
#header-wrapper {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih-abNicOElu7ffX3-GP5NFG7Yt940v4tzL1qaMTJ1gqFy0_avB6cgVqgTa3CwFa7Pu73Kq_Y2pSUklLD1bEwhyPnEDxAywazy9fpl1jsDLDBDRRdb0pzYCifnBXvJI9gtb1_5HL8GQwA/s800/postres.jpg);
}
a#menuPostres {color:#d78306 !important; font-weight:bold !important;}
#main{
width:700px;
padding:0 15px 0 20px;
}
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
</style></b:if>
<b:if cond='data:blog.pageName == "Favoritos"'>
<style>
#header-wrapper {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhacC1IiPS4WpKEShRBJL8buFKEUA55FOX9c37GS4Y47asZEBZCWcLp3MKpw5Nb_tiCNZg4qmeQgSZ3XoE20k9d2D-mlt7TZaEZH5zDLmmzlzyHbIVMi2QhRHjWmLxDTHmZXI51O0Uc6k4/s800/favs.jpg);
}
a#menuFavs {color:#d78306 !important; font-weight:bold!important;}
#main{
width:700px;
padding:0 15px 0 20px;
}
#sidebar-wrapper {
width:0px;
visibility:hidden;
display:none;
}
</style></b:if></b:if>
<!-- FIN Estilos para MENU de NAVEGACION –>
Si te fijas dentro del código están nombradas las categorías o etiquetas ( Entradas, Platillos, Postres, Favoritos) , si los dejas con ese nombre, lo único que tienes que hacer es poner esas etiquetas respectivamente a tus recetas, como ya lo dije anteriormente.
Si los nombras de otro modo, tienes que sustituir esas categorias, al igual que en el Menú de Navegación, respectivamente.
Nota: Es necesario escribir las etiquetas igual para que funcione, (tanto en el código como en las etiquetas de la entradas) ya que se identifican mayúsculas de minúsculas.
Como activar los Enlaces del menú de Navegación
Para que funcione el Menú de navegación, tienes que editar el siguiente código:
<!-- MENU DE NAVEGACION -->Tienes que sustituir las almohadillas, llamadas coloquialmente como gatitos [#] por las URLs que se muestran al ir a cada página de etiqueta respectivamente (Entradas, Platillos, Postres y Favoritos) o como los hayas nombrado, si te decidiste por otros.
<div id='menu'>
<ul> <li><a expr:href='data:blog.homepageUrl'>Inicio</a></li>
<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></ul>
</div>
<!-- FIN MENU DE NAVEGACION –>
La URL sería algo como ésto:
http://cocinandoconblogger.blogspot.com/search/label/Postres
Hecho lo anterior, ya funcionarán los dos truquillos respectivamente, si tienes dudas no dudes en preguntar.
Cómo instalar el buscador Interno
Ahora te diré como instalar el Buscador Interno:
Solo tienes que pegar en la columna lateral en la parte que mas te guste el siguiente código:
<form action='TU_URL_AQUI/search' method='get'>
<input type="text" class="searchbox" name="q" value="Buscar" onfocus="if (this.value == "Buscar") this.value = "";" value="Buscar" name="as_q" onblur="if (this.value == "") this.value = "Buscar";" />
</form>
Luego, sustituir donde dice TU_URL_AQUI , por la URL de tu blog, guardas los cambios y listo.
:-) Lo hice de este modo para que tu decidas donde ponerlo.
Cómo lograr el efecto del cambio de estilo al estar en el link sobre mi:
Para que se vea el cambio en los estilo cuando entras al link de Sobre mi, en la plantilla, tienes que agregar el siguiente código, después de: ]]></b:skin> (lo puedes poner después de que terminan los estilos para el truco del menú de navegación, que explique anteriormente)
<b:if cond='data:blog.url == "http://cocinandoconblogger.blogspot.com/2010/08/sobre-mi.html"'>Vas a crear un post con tus datos, puedes agregar una foto si quieres, poner más estilos etc., y vas a copiar el enlace que aparece en la barra de direcciones al entrar al post, el enlace de la plantilla del DEMO es este:
<style>
#header-wrapper {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEievmCelGOkcu4M1zuUhN1CUu_D09g4jfEjyk_JpFYl6IGPTW6iA3WneLmA4l9HL7g5w9GWvFk4x-RovIToCBJ6DbAG0W9fmqMbtut6u1c5KXn8WEMJXKP9htbjAB6vRs-58wjIuFx7jIo/s800/sop.jpg);}
#sidebar-wrapper {
width: 0px;
visibility: hidden;
display:none;}
#main {
width:700px;
padding:0 15px 0 15px;
}
#menu{
width: 0px;
visibility: hidden;
display: none;
}
#menu li a{
display: none !important;
visibility:hidden;
width:0px;
}
</style>
</b:if>
;%7D){kind=link}
http://cocinandoconblogger.blogspot.com/2010/08/sobre-mi.html
Luego vas a sustituir tu enlace por el que tengo resaltado de rojo.
Nota: También puedes hacer lo mismo, con el enlace de contacto.
Para personalizar los enlaces del top por los propios, puedes seguir las instrucciones de la plantilla Fantasía Nocturna, específicamente donde dice: instrucciones para personalizar el menú de navegación.
Tabla de Pestañas
La tabla de pestañas que puedes ver, es muy útil ya que ahorra espacio, y puedes mostrar tres widgets de tu preferencia, esos son los últimos tres widgets que aparecen en el diseño de la plantilla de la columna lateral.
Compatibilidad
Probado en: IE6, IE7, IE8, Firefox, Google Chrome.
Créditos:
Imágenes de cocina: MDesings.
Brushes Florales: Yasny Chan.
Importante: Hacer esta plantilla, representa horas de trabajo, por favor respeta los créditos, recuerda que es una plantilla gratuita.
Recuerda que puedes criticar o comentar. Me gustan los comentarios :-)
Etiquetas:Plantillas