Introduciendo la plantilla para Blogger: Fashionista

 Esta es una plantilla muy fácil de realizar, con un buén diseño y que puede quedar genial para nuestra pequeña tienda o negocio, además viene con instrucciones.
La he probado y funciona muy bién.

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, es decir, no mostrar ningún texto como resumén, 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-plus" 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 cada linea  lleva el nombre de la red social respectivamente en el atributo: "class".

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. Claro que, con tus respectivos textos y direcciones  web 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 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:

¡Ah!, pero, ¿quieres crear tu propio look?, 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!


ACTUALIZACIÓN. He agregado iconos sociales de Twitter, Pinterest, Facebook, y Google+ al perfil del autor que aparece debajo de las entradas, para que puedan seguirte.

Para que aparezca debajo de cada entrada, tienes que ir a Diseño, luego hacer click en Editar, en la sección que corresponde a las entradas, que reconoces por que dice "Entradas del blog".

Una vez que se abra la ventanita con las opciones de configuración de las entradas, marca la casilla que dice: Mostrar el perfil del autor debajo de la entrada, tal y como puedes apreciar el la siguiente imagen.

Luego tendrás que agregar la dirección web de cada red social respectivamente.

Para lograrlo, ve a Plantilla > Editar HTML, y busca, con la ayuda del buscador del editor que activas si haces click dentro del editor, luego, pulsas CTRL + F: <ul class='so-perfil'>

<ul class='so-perfil'>
<li><a class='twitter' href='#URL_DE_PAGINA_DE_TWITTER'><span>Sígueme en Twitter</span></a></li>
<li><a class='facebook' href='#URL_DE_PAGINA_DE_FACEBOOK'><span>Sígueme en Facebook</span></a></li>
<li><a class='googlep' href='#URL_DE_PAGINA_DE_GOOGLE_PLUS'><span>Sígueme en Google+</span></a></li> 
<li><a class='pinterest' href='#URL_DE_PAGINA_DE_PINTEREST'><span>Sígueme en Pinterest</span></a></li>
</ul>


Debajo, viene el código de cada elemento (el icono con su respectivo enlace) tal y como se muestra en el código que puse arriba.

Pon la dirección web (URL) de cada página de la red social respectivamente, como se indica en el texto coloreado de guinda, y el texto que he coloreado de azul, es el texto que aparecerá en el tooltip de cada icono respectivamente, es decir, al poner el puntero del ratón encima de cada icono, y que también puedes editar si quieres.

Si tienes dudas me dices ;)

Descargar
-
Información tomada de: http://www.compartidisimo.com/2012/04/introduciendo-la-plantilla-para-blogger.html