02 mayo 2011

Introduciendo la plantilla para Blogger Minimalista

Plantilla minimalista


Hoy tengo una nueva plantilla para compartir con ustedes, es un diseño minimalista, en tonos gris claro pretendiendo emular el plateado y gris obscuro para darle contraste y elegancia.

Es una plantilla que puede adaptarse a cualquier blog, ya que no tiene elementos gráficos que insinúen un tema específico.

Cuando se exponen gráficos, como en el caso de blogs de ilustradores, blogs de diseño gráfico, etc, siempre viene bien un diseño de este estilo, para no pertubar o causar distracción con elementos que pudiera tener el  diseño de la plantilla.

¿Te gusta el estilo minimalista? ¡A mi me encanta! De hecho mi casa está decorada siguiendo este estilo, sin hacer un lado el color y el contraste.


Características:
  • Plantilla de tres columnas
  • Tres columnas adicionales en el footer
  • Menú superior que son los títulos de las páginas estáticas
  • Menú horizontal con efecto slide creación de Leigeberg  de scriptiny.com y que conocí gracias a JMiur
  • Resumen automático en las entradas
  • Buscador de google integrado 



Los elementos del diseño de la plantilla lucen así:
Layout Plantilla minimalista


Tú solo necesitarás personalizar el menú horizontal (no el de arriba que son los títulos de las páginas estáticas) y estas son las instrucciones:

Agregar los enlaces al menú (arriba de las entradas y columna lateral)


Paso 1. Ve a Plantilla ► Editar HTML. Estando en el editor, haz click en el botón que dice: "Plantilla de formato", luego pulsa las teclas Ctrl + F  simultáneamente para que se active el buscador que trae el editor. Una vez que se active el buscador pon en el campo: ul id='menu' para encontrar el código HTML del menú, y que puedes ver a continuación:


 <ul id='menu'>
    <li value='1'><a expr:href='data:blog.homepageUrl' title='Inicio'>Inicio</a></li>
    <li><a href='#'>Editar</a></li>
    <li><a href='#'>Editar</a></li>
    <li><a href='#'>Editar</a></li>
    <li><a href='#'>Editar</a></li>
 </ul>


El código anterior, permite que se puedan mostrar cinco enlaces, incluyendo el de la página de Inicio. Si te fijas bien en el código anterior, verás lineas que se repiten, me refiero a esta:

<li><a href='#'>Editar</a></li>

Cada una de esas lineas, es un enlace en el menú. Ésas son las que tendrás que editar, para poner ahí las URLs de las páginas que necesites enlazar.

Paso 2. Sustituye la almohadilla: "#", por la URL de la página que quieres enlazar, y sustituye el texto "Editar" por el texto que quieres que aparezca en el enlace, en cada linea de código y que anteriormente te mencionaba.

Por ejemplo, si yo quisiera poner un enlace a la página que muestra las plantillas que ofrezco en el blog, la linea me quedaría así:

<li><a href='http://www.compartidisimo.com/p/plantillas.html'>Plantillas</a></li>

Y en el blog el enlace se vería y funcionaría así:

Plantillas

Si quieres mostrar más enlaces, tendrás que agregar esta linea:

<li><a href='#'>Editar</a></li>

Antes de </ul> en el código que te mencionaba en el paso 1, para cada enlace que quieras agregar.


Paso 3. Una vez editado el código del menú, verifica que todo luzca bien en "Vista previa de la plantilla" y si es así, guarda los cambios en "Guardar plantilla".


Cuadro de búsqueda


El Buscador o cuadro de búsqueda puedes configurarlo según las opciones que presenta el gadget para configurarlo, y eso lo haces lendo a "Diseño" o bien  estando en tu blog si ya has ingresado a tu cuenta, haciendo click en el icono de herramienta que aparece debajo del widget.

Siéntete libre de comentar o sugerir algún tema de tu interés.

Artículos recomendados:

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