Tutorial: Cómo centrar las pestañas en blogger

by - 10:00 a.m.

Hola hola chicuelos, FELIZ VIERNES... auqneu supongo que está demás decirlo, porque siempre que es viernes, todos estamos felices ¿no? jaja... por lo menos yo sí xD.

Como lo prometido es deuda, aquí está el primer tutorial del blog. Espero que sea de ayuda para ustedes, y pues logre explicarme correctamente :)


Respondiendo al comentario y solicitud de KatnisFire del blog New Syndrome Book (al que deben visitar de inmediato), el primer tutorial será sobre

'¿Cómo centrar las pestañas de mi blog?' 

La verdad es un proceso bastante facilito, sólo que tiene algunas variantes dependiendo de la plantilla que utilices. yo les explicaré dos procesos a ver cuál les funciona mejor.

  1. Centrar pestañas con código CSS.
Este es la forma mas sencilla de hacerlo, y por experiencia propia sé que con la plantilla simple funciona a la perfección (Cabe destacar que yo siempre utilizo esa plantilla porque siento que es la mas fácil de modificar y personalizar).

Pasos a seguir:
1- Entrar en el apartado Plantilla
2- Clickar en Personalizar
3- Entrar en Avanzado
4- Y hasta abajo, seleccionar Añadir CSS
5- Una vez alli, debes agregar este pequeño código:
.PageList {text-align:center !important;}.PageList li {display:inline !important; float:none !important;}
 6- Dar click en Aplicar al blog (Parte superior derecha)
Y voilá, ya tienes unas pestañas centradas y bonitas. :)

Si por el contrario, a ti no te funcionó ese método, acá está el segundo:

    2. Centrar pestañas mediante código HTML:

1- Entrar en el apartado Plantilla
NOTA: cada vez que se desea modificar el código HTML, es recomendable hacer una copia de seguridad de la plantilla)
2- Ahora si, clickar en Editar HTML
3- Entrar en Ir al widget
4- Y selecciona PageList1


5- Allí encontrarás la siguiente línea:
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
Lo único que debes hacer es colocar: <center> al inicio de esa línea y </center> al final de la misma.
Al final la línea debe quedar así: 
<center><b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'></center>
6-  Antes de guardar, das click en Vista previa de la plantilla, para asegurarte de que todo está bien.
7- Y ahora si, puedes dar click Guardar plantilla.

Y LISTO chicos, así de facilito pasan de tener un blog con las pestañas así:


a tenerlas así:


Sé que no es gran cosa, pero a veces esos pequeños detalles hacen la diferencia en la estética de un blog.

Espero haberme explicado bien, y que el tutorial les sea de ayuda. Si tienen alguna duda pueden dejarla en los comentarios, que feliz de la vida les respondo :)

No olviden que acepto sugerencias, sobre los próximos tutoriales... así que si hay algo que desees saber sobre diseño de blogs, hazmelo saber.




Los quiere y adora con todo el corazón
-Liseth-

TAMBIÉN TE PODRÍA INTERESAR

3 Pensamientos

  1. Hola^^
    Muchas gracias por el tutorial.
    Besos

    ResponderEliminar
  2. Gracias por el tuto Liset, te lo agradesco...
    Un besote! xDD

    ResponderEliminar
  3. Lo tengo que poner en practica.
    Un besito^^

    ResponderEliminar

Tu opinión es importante para mí, así que no dudes y comenta, que me hará muy feliz leerte.

Las unicas normas que debes seguir son:
-Sé respetuoso
-Si vas a colocar algún spoiler, avisa antes, así no incomodamos a nadie :)