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 les guste.
DEMO BAJARLA
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.
Si vas a la demostración de la plantilla, y navegas por los enlaces del menú de navegación, podrás ver que en el link seleccionado se abre la pestaña, tenia idea de crear este efecto y gracias al genial JMiur de Vagabundia, lo logré, es muy buena onda, y tiene mucha experiencia y conocimiento, lo recomiendo ampliamente, bueno, volviendo a lo de los los enlaces del Menú de Navegación, estos están creados para hacer 4 categorías base en tus recetas, mas el de Inicio por supuesto.
Como 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 mas 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 tu no quieres estas categorías, las puedes cambiar, por las que tu decidas más convenientes para tu blog, yo me base en un libro de recetas que tengo, que las muestra de ese modo y me pareció muy fácil y ordenado, pero tu 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/AVvXsEhICrhb6BFEKaaNTQo1NcAKCFntCFyS3XK7TD_Eb_kvy2Yl7aEyYTDsItxijWxZYV_vqRNichwZLFKxABXpOU1oWRH5jfY8nWbpIB4wpEwIZ9AdPXWk2hRns3tW00rh81E8e-haemj8Toc/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/AVvXsEh757lZ8XpfimLYkPYzJBqRgJ_6hx8qOaDfSXv5XeGZcZ_BDkhyqHYBXJRUqz9p3l3wYCZVlAq8pfUpFMMLbU00JRmqWSF890dIr22pMQNXgQ0VYqQGzmH0lboPa6tlBkeKZMztRXKWZqs/s800/platillos.jpg);
}
a#menuPlatillos {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 == "Postres"'>
<style>
#header-wrapper {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLMvw0tsst0vatTz943FE7HO2mmjK58fS4eV4hAkifl1f7W1gwpHqvLrZyQtsR9J-ey1k_m8EdPTAcQbQ91fMpXDT6B4M5bz3p7psaVB3EUl48WMZRXalddqUENTD_Bh8sFfbFgZ_Zeio/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/AVvXsEi5brQnQJIwMmzcM_uCS9g-Did7JWUcBW8PVkvq94DeolUl0U8TBV_mYJLUtBsb3YIRXqiVgMUQQoCcZmDKluJ8dkRi1fvsclweFDfy6FzgwNwpKwTdOS95dGgDbIuVcBojjBJps8DXVYA/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 -->
<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 –>
Tienes que sustituir los gatitos # por los enlaces que se muestran al ir a cada etiqueta respectivamente (Entradas, Platillos, Postres y Favoritos) o como los hayas nombrado, si te decidiste por otros.
El enlace sería algo como esto:
http://cocinandoconblogger.blogspot.com/search/label/Postres
Hecho lo anterior, ya funcionarán, los dos truquillos respectivamente, si tienes dudas no dudes en preguntrar .
Como 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.
Como lograr el efecto del cambio de estilos al estar en el link sobre mi:
Para que se vea el cambio en los estilos, cuando entras al link de Sobre mi, en la plantilla, tiene 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"'>
<style>
#header-wrapper {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrr6sMrPsWFw-feGOrCgwV_QKTp_e5g1R5Biuw31nx4GftBfVBfUm5VknEx_aVFX-x_zE0HyPsp012UXQIuLck2ykhGdpEJsBQRBO-wICXntcZcuZCf1ytxeFfk-LaJBxVvpkjsJk-kL0/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>
Vas a crear un post con tus datos, puedes agregar una foto si quieres, poner mas 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:
http://cocinandoconblogger.blogspot.com/2010/08/sobre-mi.html
Luego vas a sustituir tu enlace por el que tengo marcado de rojo.
Nota: También puedes hacer lo mismo, con el link 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.
Parece mucho por hacer, pero no es tanto, practicamente es copiar y pegar, además vale la pena, tu plantilla se verá organizada y muy mona, ¿no lo crees?
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 :-)
;%7D){kind=link}
No hay comentarios:
Publicar un comentario