17 de mayo de 2016

Tutorial: Añadir separadores entre las entradas

   Este Tutorial, es algo sencillo y fácil, hoy les explicare como añadir una imagen entre los posts, los llamamos "Separadores" o dividers.
   Los separadores entre posts hacen que se delimite el área visual entre cada post lo cual hace más presentable y organizado tu blog...

Para colocarlos sólo ve a: Plantilla → Editar HTML y una vez cargado el código de tu plantilla da click en Ctrl + F y busca
<b:include data='post' name='post'/>
Justo debajo de ella pega lo siguiente:


<center><img src='DIRECCIÓN DE LA IMAGEN'/></center> 



En Smashing Magazine tienen más de 100 separadores que están a tu disposición y son de uso libre. Puedes escoger el que más te guste y utilizarlo.

Ahora, si tu imagen es muy grande tambien puedes modificar el tamaño, agregando altura y anchura al código, Ejemplo:
<center><img height="40" src="DIRECCIÓN DE LA IMAGEN" width="400" /></center>
  • 40: Altura 
  • 400: Anchura 
  • Dirección de la imagen: URL de la imagen de tu separador.

Otra Alternativa

Ahora, si no te gustan las imágenes y prefieres un diseños más simples puedes elegir por poner una línea de color. y para hacerlo entonces el código que pegaras es:
<hr style="align:center; background:#000000; border:0px; height:5px; width:60%;" />
  • 000000: Color de la linea. 
  • 5: Altura de la línea
  • 60: Ancho de la línea.

Ejemplos:


Agregando:
<hr style="align:center; background:#000000; border:0px; height:5px; width:60%;" />
el resultado es:

<hr style="align:center; background:#8c026e; border:0px; height:5px; width:60%;" />
Resultado:


<hr style="align:center; background:#dc1a00; border:0px; height:5px; width:60%;" />
Resultado:


¿Les gusta!?
Esto le dará un diseño muy creativo a tu blog.. Lo he utilizado en la mayoría de mis diseños..

4 comentarios:

  1. Hola Georgelys,

    Excelente post y todo muy bien explicado. Cuando tenga un tiempito, buscaré algunos modelitos a ver si me animo a colocar nuevos separadores en mi blog. Gracias por el tuto.

    Un abrazo!

    ResponderEliminar
    Respuestas
    1. AHHH!!! Tenia tiempo que no sabia de ti Liseth, espero este bien...
      Me alegro que que gustara. Yo adoro los separadores, razón por la cual la mayoría del tiempo los utilizo..

      saludos y besos!!!

      Eliminar
  2. hola, muchas gracias por este tuto, yo si bien lenta con el html asi que los tutos ayudan un bueno...
    estas invitada a pasarte por mi blog cuando gustes, Un beso

    ResponderEliminar
    Respuestas
    1. Gracias Fey... por supuesto que me pasare por tu blog, es todo un honor...
      Tranquila con practica te llevaras bien con el HTML! ;)

      Eliminar