Hoy mostramos una nueva plantilla que podemos encontrar en uno de mis blogs favoritos, http://www.compartidisimo.com/.
Esta plantilla es perfecta para un blog de cocina, donde podrás compartir todas tus recetas.
Es una plantilla de dos columnas, y incluye tres columnas en el pie del blog, (footer).
La columna principal mide 540 Pixeles.
Además dispone de un menú top, que podemos configurar fácilmente.ya que son los enlaces de nuestras paginas estáticas.
También tiene iconos RSS integrados en el Header y buscador interno.
Las entradas aparecen resumidas.
Aquí podrás ver la demo o descargarte la plantilla.
 |
| Ver Demo Descarga Plantilla |
Para crear el efecto de la pestaña abierta cuando se usan las categorías usando las etiquetas es el mismo, y el código del efecto es este:
<!-- Estilos menu de navegacion de pestañas -->
<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/AVvXsEh9VF86Abwiis9kn3bATRUL8F9zIRuRmtOxxe634TZYfCjgXDk7sEJE2PtyWiPa8TjKtAy9NAZmK5tdzRwxVN81bjZH8s3HzYF01g-u5X2_HCmFOHUhT22GEJr_MyVYJTYSnIsbjFu_Z6Y/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 == "Platillos"'>
<style>
#header-wrapper {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAk8eclwqIZV-INovyWyNdz4ETZqDYaS4DUZDlewSscp3fSsEe9e3FWdP51L1wV6Gdow0wKlYOIEIfwjgtJ_-NRJJRZIHEMGL7aK0ncutKkzDEV9pTCjQuBDIce7QlP28vJWGFjMiyA5c/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 == "Postres"'>
<style>
#header-wrapper {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyY7aRnwU6sS7nQJbsHjZFHB5W16YLpNMI-czdZRhSx6O_viLLurSiROSlhMY9D8SC3WWpQVeY3eEytOshjEIG7U60u_GfkGBuVufcI1F1773zlIpFvFsiPiijPYTpt-kc9kgNjrEqgFg/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 == "Favoritos"'>
<style>
#header-wrapper {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJDZ3QWGeYN8ozsxhAsuLctCFKkkCPMTtF8FbjDXl_S5wzeXdDEeMVdseF1LzbmYhr4Z7RVNPwvVxut3DE3OV6u_DHxkHkUZhDpMTMFWogB4AhjwWSS362g2C_IXHuHafsgjeavhcl_tg/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 los nuestros:
Primero debemos de ir a :
Plantilla > Editar HTML
Yo como siempre digo debemos de hacer una copia de seguridad de nuestra plantilla por si nos equivocamos o simplemente no nos gusta como nos queda.
Para descargar la plantilla completa.
Lo primero que tenemos que hacer es y se nos descargará la plantilla antigua, que la debamos de guardar en nuestro disco duro.
Como ya he comentado en varias ocasiones, es posible que no se cree una copia de seguridad de algunos gadgets , lo cuales perderás.
Para ello nos vamos a :
Plantilla › Crear/Restablecer/copia de seguridad
Descarga una copia de seguridad de la plantilla.
Es posible que no se cree una copia de seguridad de algunos gadgets.
Ahora nos vamos a editar HTML.
Primero debemos de ir a :
Plantilla > Editar HTML.
Con la ayuda de Ctrl + F buscamos:
<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>
Ahora debemos de sustituir las '#' por las URLs de las páginas de las categorías que has creado por medio del uso de la etiquetas en tus entradas, los nombres que hemos marcado en azul por los nombres de las páginas.
0 Comentarios
En breve revisaremos tu comentario para poder publicarlo.
Muchas gracias