• image01
    TRUCOS PARA TU BLOG
  • image02
    TUTORIALES
  • image03
    VIDEOTUTORIALES
  • image04
    PROGRAMAS

Como centrar los Títulos de las Entradas en Blogger

Seguramente al ver sus entradas , hay un detalle que les llama la atención : El titulo esta pegado a la izquierda.  Ahora veremos como centrar dichos títulos , para mejorar la apariencia de nuestro Blog usando el siguiente código:

text-align: center;

Sea cual fuere su plantilla del Blog nos vamos a : Plantilla / Editar HTML  y ubicamos la siguiente linea:


h3.post-title {       ( si no es esta hacemos la prueba con la siguiente)



.post-title {             ( si no es esta hacemos la prueba con la siguiente)



.post h3 {                 ( si no es esta hacemos la prueba con la siguiente)



.post-title { margin: 0; padding: 10px;          
  

Pinchamos Control + F verás un buscador que sirve para usarlo en cualquier página, coloca el comando, por ejemplo: .post h3 {   y te lo ubicara de inmediato.

Busquen cualquiera de las cuatro líneas que les muestro arriba en su plantilla; ahora solo tienen que ubicar la línea para centrar, debajo de la línea de titulo que ustedes usen; como ejemplo les muestro la mía  que uso la Plantilla Etherea.

h3.post-title, h4 {

text-align:center;

font: $(post.title.font);

color: $(post.title.text.color);

}


En algunas plantillas antiguas, tal vez sea necesario no dejar un espacio entre: y center , quedando de la siguiente manera:

text-align:center;

Nota.-Para una plantilla de las que se consiguen con diseños ya hechos en páginas especializadas para plantillas, es muy probable que no vean ninguno de los códigos de arriba, por lo general la parte del titulo en estas plantillas es así:

<b:if cond='data:post.title'>
<div style="text-align: center;">
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</div>
</b:if>

Solo tendrían que agregarle las etiquetas <div>, que están en color rojo, como pueden darse cuenta en este caso la estiqueta div se coloca sobre el <h3 class='post-title entry-title'> y no debajo de él, el cierre del </div> va sobre el último cierre del </b:if>, la mayoría de veces es fácil saber donde termina ya que después sigue un nuevo <div>

Guardamos cambios y ye esta . 



Si te Gusto Compártelo en tus Redes Sociales

No hay comentarios.:

Publicar un comentario