Plantilla Fashionista para Blogger

He indagado en varias páginas gratuitas de plantillas para Blogger y una que más me llama la atención es Comparadísimo.

VER DEMO

En este página podemos encontrar multitud de plantillas, con diferentes estilos y muchas clases de recursos.

Además tienen un tutorial en Español para instalar las plantillas facilmente.

Características

Plantilla de cuatro columnas (tres de los posts, y una lateral adicional para agregar gadgets)

Iconos sociales en la parte superior

Menú desplegable adicional

Menú en la parte superior izquierda que son los títulos de las páginas estáticas

Resumen automático en las entradas. 

Carrusel de imágenes para que puedas destacar algunos posts

Cuatro columnas adicionales en el footer

Los resúmenes de las entradas son automáticas, aunque se pueden mostrar solo las imágenes si lo deseamos, con solo poner la imagen como el primer elemento de el post.

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:

Para agregar o quitar los iconos de las redes sociales:

Tenemos que ir a Diseño>y en el gadget superior derecho ( iconos sociales ) damos a editar y ponemos 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 según corresponda.

Para agregar o quitar el menú desplegable:

Tenemos que ir 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>

   <li><a href="#">Salud 2</a></li>
</ul>
 <li>

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

   <li><a href="#">Belleza 1</a></li>
</ul>
 </li>
 <li>
  <a class="inicial" href="#">Belleza</a>
  <ul>

 </li>
<li><a href="#">Belleza 2</a></li>
   <li><a href="#">Belleza 3</a></li>
     </ul>
 <li>

   <li><a href="#">Moda 2</a></li>
<a class="inicial" href="#">Moda</a>
  <ul>
   <li><a href="#">Moda 1</a></li>
   <li><a href="#">Moda 3</a></li>

   <li><a href="#">Recetas 1</a></li>
<li><a href="#">Moda 4</a></li>
   
        </ul>
 </li>
 <li>
  <a class="inicial" href="#">Recetas</a>
  <ul>

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

   </li>

Ahora tenemos que sustituir las almohadillas por 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. Claro que, con tus respectivos textos y direcciones web de las páginas que editarás en el código.

Para agregar el carrusel:

Tenemos que ir a Diseño>y en el gadget arriba de las entradas de blog, agrega el siguiente código:

     <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>

Para agregar el carrusel:

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 más 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: