Introduciendo la plantilla para Blogger: Fashionista

¡Hola qué tal!, ya tengo lista para compartirte la plantilla que ya te había mencionado antes desde Google+, es una plantilla minimalista altamente personalizable, y lo mejor de todo es que le puedes dar un look diferente desde el Diseñador de Plantillas  ;)

Esta plantilla puede adaptarse a varias temáticas, como blogs de moda, decoración, etc. Guarda un orden perfecto en las separaciones de los posts y la columna lateral, y usa colores sólidos (sin texturas). Utiliza masonry, un plugin de jQuery que permite que los posts que flotan de este modo, no necesariamente tengan que tener la misma altura, de ese modo podemos crear el efecto de mosaico sin problemas.

Olvídate de ingresar a la edición de HTML de la plantilla para editar los elementos como el menú desplegable, los iconos sociales y el carrusel, ya que estos los agregarás/editarás desde un gadget con la opción HTML/Javascript, así evitarás dolores de cabeza, o perderte entre el código de la plantilla. Aunque si eres usuario avanzado, desde luego puedes hacer cambios desde la edición de HTML de la plantilla.

Demostración

Características

• Plantilla de cuatro columnas (tres de los posts, y una lateral adicional para agregar gadgets)
• Iconos sociales en la parte superior
• Menú en la parte superior izquierda que son los títulos de las páginas estáticas
• Menú desplegable adicional
• Carrusel de imágenes para que puedas destacar algunos posts
• Cuatro columnas adicionales en el footer
• Resumen automático en las entradas

El resumen de las entradas es automático, aunque si lo quieres, puedes mostrar sólo la imagen en la página principal, y para ello, necesitas poner la imagen como primer elemento en el post, desde el panel de edición de entradas, y poner el salto de linea debajo de ésta, como se muestra en la imagen, puedes ver el resultado en la plantilla de demostración.

Así es como se muestra el layout o Diseño, en la imagen puedes ver la ubicación de cada elemento de la plantilla , ya que todos los elementos han sido colocados en secciones, de ese modo, puedes editar los elementos desde la sección de Diseño:

Click para ampliar

Cómo Agregar y Editar los Iconos de Redes Sociales

Ve a Diseño y en el gadget superior derecho (ver imagen arriba del diseño donde dice iconos sociales) haz click en "Editar" y agrega el siguiente código:

<ul id="m-soc2">
<li><a class="twitter" href="#"></a></li>
<li><a class="facebook" href="#"></a></li>
<li><a class="google" href="#"></a></li>
<li><a class="pinterest" href="#"></a></li>
<li><a class="rss" href="#"></a></li>
</ul>

Luego, sustituye las almohadillas "#" por la dirección web de cada página respectivamente. Es fácil saber a que página corresponde cada enlace, ya que la clase (class) lleva el nombre de cada red social.

Cómo Agregar y Editar el menú desplegable

Ve a Diseño y en el gadget del lado derecho de la cabecera, agrega el siguiente código:

<ul id="nav">
<li>
<a class="inicial" href="#">Salud</a>
<ul>
<li><a href="#">Salud 1</a></li>
<li><a href="#">Salud 2</a></li>
</ul>
</li>
<li>
<a class="inicial" href="#">Amore</a>
<ul>
<li><a href="#">Amore 1</a></li>
<li><a href="#">Amore 2</a></li>
</ul>
</li>
<li>
<a class="inicial" href="#">Belleza</a>
<ul>
<li><a href="#">Belleza 1</a></li>
<li><a href="#">Belleza 2</a></li>
<li><a href="#">Belleza 3</a></li>
</ul>
</li>
<li>
<a class="inicial" href="#">Moda</a>
<ul>
<li><a href="#">Moda 1</a></li>
<li><a href="#">Moda 2</a></li>
<li><a href="#">Moda 3</a></li>
<li><a href="#">Moda 4</a></li>

</ul>
</li>
<li>
<a class="inicial" href="#">Recetas</a>
<ul>
<li><a href="#">Recetas 1</a></li>
<li><a href="#">Recetas 2</a></li>
</ul>
</li>
<li>
<a class="inicial" href="#">Viajes</a>
</li>

</ul>

Luego, edita lo que esta resaltado de rojo, guíate por cada linea de código, en donde están las almohadillas "#", pones la dirección de la página a donde quieres que te dirija, y enseguida está el texto que corresponde a cada enlace respectivamente.

Puedes agregar más enlaces dentro de cada sección con enlaces, o bien puedes quitarlos. Por ejemplo, vamos a suponer que quieres quitar el último enlace de Moda, entonces, quitarías esta linea:

<li><a href="#">Moda 4</a></li>

Si por lo contrario quisieras agregar otro enlace en Recetas, entonces colocarías una linea de código debajo de la última que haya, es decir, debajo de:

<li><a href="#">Recetas 2</a></li> pondrías:

<li><a href="#">Recetas 3</a></li>

...y así sucesivamente, por supuesto, con tus respectivos textos y direcciones de las páginas que editarás en el código.

Cómo Agregar y Editar el carrusel

Desde Diseño, identifica el gadget donde colocarás el HTML del carrusel (ver imagen arriba del diseño) y agregas esto:

     <div class="infiniteCarousel">
<div class="wrapper" style="overflow-x: hidden; overflow-y: hidden; ">
<ul>
      <li><a href="#"><img alt="" src="URL DE LA IMAGEN" /><span>Texto que se muestra</span></a></li>
                                                      <li> <a href="#"> <img alt="" src="URL DE LA IMAGEN" /><span >Texto que se muestra</span></a></li>
                                                      <li><a href="#"><img alt="" src="URL DE LA IMAGEN" /><span>Texto que se muestra</span></a></li>
                                                       <li><a href="#"><img alt="" src="URL DE LA IMAGEN" /><span>Texto que se muestra</span></a></li>
                                                      <li><a href="#"><img alt="" src="URL DE LA IMAGEN"/><span>Texto que se muestra</span></a></li>
                                                      <li><a href="#"><img alt="" src="URL DE LA IMAGEN"/><span>Texto que se muestra</span></a></li>
                                                     </ul>    
      </div>        
         </div>

Cada imagen con su enlace y texto que se mostrará al poner el puntero del ratón sobre la imagen, viene resaltado de rojo, y cada uno está dentro de un elemento de lista, es decir dentro de <li>...</li>, así que si necesitas mas imágenes, tendrás que repetir todo esto:

<li><a href="#"><img alt="" src="URL DE LA IMAGEN"/><span>Texto que se muestra</span></a></li>

...antes de </ul> de ese código.

Donde esta la almohadilla, pones la dirección de la página a donde se va a dirigir, y el resto es para la URL de la imagen, y para el texto que se muestra al poner el puntero del ratón sobre la imagen. La medida recomendada para la imagen es de 175 pixeles de ancho x 155 pixeles de alto.

Puedes usar otro efecto en las imágenes del carrusel, si ya estas familiarizado con la Edición de HTML de la plantilla y para ello deberás buscar estas lineas de código:

.infiniteCarousel ul li a:hover span{height:90px; padding-top:80px;

Luego, lo que resalte de rojo, lo eliminas o bien, lo vuelves comentario poniendo una barra-asterisco al principio y asterisco barra al final, como se muestra abajo, para que no se interpreten esas propiedades, de ese modo, puedes usar los dos estilos cuando quieras,  poniéndolo y quitándolo ¿me explico? Entonces  quedaría así:

.infiniteCarousel ul li a:hover span{/*height:90px; padding-top:80px;*/...el resto de las propiedades


Enseguida de eso, están el resto de las propiedades para la capa con el texto que se muestra en el evento hover (al poner el puntero del ratón sobre la imagen). Y el resultado sería este:

Ahh, pero, ¿buscas un look, con menos dramatismo?, entonces ¡ve al Diseñador de plantillas y consíguelo!

¿Todavía más claridad?, no hay problema, puedes conseguirlo fácilmente cambiando los colores...  

Bordes con un tono más fuerte, fuentes distintas, colores brillantes, en fin todo lo que buscas lo conseguirás muy fácilmente gracias a las bondades del Diseñador de plantillas ;)


¡Así que, ve a jugar al Diseñador de plantillas y diviértete creando tu propio look...!

Descargar

Temporalmente suspendida la descarga por actualizaciones, avisaré cuando este lista para la descarga