Cambia el título: Añade una línea detrás del título del post

martes, 19 de mayo de 2015


Hola artistas! Con este post vamos a inaugurar una nueva sección dentro de Hora Mágica: Diseño Blogger. Porqué creemos que a mucha gente le gusta tener sus propios blogs, y que éstos luzcan como uno quiere: bien bonitos.

Así que vamos a intentar recopilar información que hemos ido encontrando a lo largo de mucho tiempo -de árduas búsquedas- sobre el diseño blogger, y ofrecer nuestras propias propuestas.

En este primer post os queremos hablar sobre cómo cambiar el título de las entradas para que os quede así de chulo:



Se trata de añadir dos líneas entre el título del post para que éste quede enmarcado. Nos ha ayudado mucho el post de Xomisse, os recomendamos que le echéis un vistazo porque es muy interesante. Nosotros haremos nuestra propia versión y os enseñaremos ejemplos para que sepáis cambiarle el color y el tipo de línea.

IMPORTANTE: Nosotros hemos puesto como fuente la Cherry Swash, pero si no la tienes instalada en la plantilla no se verá en tu blog. Para saber cómo se instala una fuente de Google Fonts en tu plantilla mira éste otro post.


1. Primero deberás ir a Plantilla ➡ Editar HTML. Dentro del recuadro de código debes pulsar CTRL+F (en caso de que tengas Windows) o CMD + F (en caso de que tengas un Mac) para que se te abra el buscador. En él debes introducir post-title entry-title para encontrar la parte de código que se encarga de editar el título del post

IMPORTANTE: Tienes que buscar la segunda línea de código con esta nomenclatura. Para estar seguro de que estás en la línea correcta, fíjate en el número de línea de código en la que se encuentra el post-title entry-title. Por ejemplo, uno te puede aparecer en la línea 1340 y el otro en la 1451. Debes elegir la línea que se encuentre en el número más alto.

2. Te encontrarás algo parecido a esto:

<h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h3>
    </b:if>

Pues bien, ahora lo único que tienes que hacer es añadir <span> justo después de <h3 class='post-title entry-title' itemprop='name'>   y </span> justo antes de </h3>.

De forma que quede así:

<h3 class='post-title entry-title' itemprop='name'><span>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </span>
      </h3>
    </b:if>

Como puedes ver, las líneas de código que debes tener presentes las hemos marcado en azul y el código que deberás añadir en morado.

3. Ahora deberás añadir el código CSS para darle el formato estético que más te guste a las líneas. Para ello vuelve a Plantilla ➡ Editar HTML  y busca ]]> </b:skin>. Justo antes de éste código pega:

/**Empieza la línea del título del post**/

h3.post-title::before
border-top: 1px solid #666; /**aquí puedes cambiar el estilo de línea, el color y el grosor**/
margin-top: 15px; /**mueve la línea arriba o abajo, a más numeración más abajo**/
content: " ";
position: absolute;
left: 0;
right: 0;
z-index: 0; }

h3.post-title span {
background: #FFF; /**color de fondo del texto**/
padding: 0 20px; /**añade espacio a cada lado del texto**/
position: relative;
z-index: 1 !important;
margin: 0 auto; }

.post-title.entry-title { text-align: center; }

/**Acaba la línea del título del post**/

4. Para terminar te pondremos el código que hemos usado nosotros para hacer nuestro título. Vete otra vez a Plantilla ➡ Editar HTML  y busca de nuevo ]]> </b:skin>. Justo antes de éste código deberás pegar:

h3.post-title a, h3{
color: #666; /**color del título**/
text-align: center; /**título centrado**/
font-family: 'Cherry Swash', cursive; /**la fuente que más te guste**/
}



IMPORTANTE: Nosotros hemos puesto como fuente la Cherry Swash, pero si no la tienes instalada en la plantilla no se verá en tu blog. Para saber cómo se instala una fuente de Google Fonts en tu plantilla mira éste otro post.

¡Ahora sólo te queda elegir el color que más te guste!


Aquí te dejamos los códigos hexadecimales de los colores para que los cambies a tu gusto:

#666666  |  #cc6699  |  #3399ff  |  #66cc66  |  #ff9966


Y aquí finaliza el tutorial de hoy, espero que te haya sido útil.

Si compartes en tus redes sociales nos harás muy felices, ya que nos animas a seguir compartiendo información ;) Un fuerte abrazo!!

Laia

5 comentarios:

  1. Hola! Gracias por estos posts tan útiles, he intentado hacer esto de poner una linea detrás del titulo sin éxito! he conseguido centrarlo, cambiar la fuente pero lo de la linea nada, que puedo haber hecho mal? muchas gracias!

    ResponderEliminar
  2. Hola! Gracias por estos posts tan útiles, he intentado hacer esto de poner una linea detrás del titulo sin éxito! he conseguido centrarlo, cambiar la fuente pero lo de la linea nada, que puedo haber hecho mal? muchas gracias!

    ResponderEliminar
  3. ¡Un tutorial súper original! Me ha encantado ^_^

    ResponderEliminar
  4. ¡Hola!
    En primer lugar muchísimas gracias por el post, aunque tengo el mismo problema que la chica de arriba, después de seguir todos los pasos, he conseguido cambiar la fuente, centrar el título pero las líneas entre el título no me aparecen D: ¿Podrías decirme donde puede estar el fallo, por favor?
    ¡Gracias!

    ResponderEliminar
  5. Me sucede lo mismo, ojalá nos pudieran responder

    ResponderEliminar