Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Centrando la cabecera de mi Blog y también todo lo demás! LOL

Este es un truco que hará, como dice el título, centrar la cabecera (header), el título de las entradas (post title) y títulos de sidebars (headings). Bueno comencemos con el PASO A PASO!

ANTES QUE NADA, DESCARGA UNA COPIA DE TU PLANTILLA (TEMPLATE), SÓLO POR SEGURIDA(/ ̄(エ) ̄)
HEADER

PRIMERO: Vamos a 'Diseño → Plantilla → Personalizar'. Estarás en el Diseñador de de Plantillas Blogger. De la lista de la izquierda está la opción 'Avanzado', dale click

SEGUNDO: Ahí a la derecha de 'Avanzado' aparecerá una lista. Baja hasta el final y click en 'Añadir CSS'

CLICK EN LA IMG PARA AGRANDAR

TERCERO: Ahora estás en 'Añadir código CSS personalizado', que es el recuadro de color blanco. Ahí mismo pega es sgte. código.

.header .widget {
 text-align:center;}
.header img {margin:0 auto;}

QUEDANDO ASI

NOTA: En la parte inferior de tu 'Diseñador de Platilla Blogger' podrás ver la vista previa de como va quedando tu blog.

CUARTO: Click en 'Aplicar al blog'. LISTO!
POST TITLE

PRIMERO: Vamos a 'Diseño → Plantilla → Edición de HTML → Continuar' y buscamos .post-title (usa las teclas CONTROL+F). Apareciendo...

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
  background-color: #F5A9D0;
}
NOTA: PUEDE VARIAR EN CADA PLANTILLA (TEMPLATE)

SEGUNDO: Pegar antes del símbolo } el sgte. código → text-align:center;
Quedando así


h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
  background-color: #F5A9D0;
  text-align:center;
}


TERCERO: Click en 'Vista previa', si el resultado es como esperabas click a 'Guardar plantilla'.
HEADINGS

PRIMERO: Hacemos lo mismo que en POST TITLE, sólo que esta vez buscamos  Headings (usa las teclas CONTROL+F). Apareciendo...

/* Headings
----------------------------------------------- */
h2 {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
  background-color: #81DAF5;
  text-transform: uppercase;
 }

NOTA: PUEDE VARIAR EN CADA PLANTILLA (TEMPLATE)
SEGUNDO: Lo mismo que en POST TITLE. Pegamos → text-align:center;

/* Headings
----------------------------------------------- */
h2 {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
  background-color: #81DAF5;
  text-transform: uppercase;
  text-align:center;
}

TERCERO: Y último hacemos lo mismo (si lo mismo lo mismo. LOL). Y LISTO!!!

Y eso fue todo! Algo largo, pero no tedioso(?). Bueno creo que fui muy precisa y lo dejé fácil de entender jejeje. Cualquier duda, consultenme ^^. AH! otra cosa más, si quieres ver los resultados de este tutorial te invito a visitar mi otro blog → Labyrinth in my Heart (←click)

10 comentarios:

  1. Me Resulto *-*!
    Gracias Kuma :D!!~
    Buen Tuto *O*

    ResponderEliminar
    Respuestas
    1. De nada Danni-chan (¬w¬), que bueno que te sirvió el tuto :D

      Eliminar
  2. ke bien espero no liarme al aplicarlo hay tantos codigos x.x

    ResponderEliminar
    Respuestas
    1. No es tan difícil Candela-chan (^^), si tuvieras alguna dificultad dímela para poder ayudarte a solucionarla :D

      Eliminar
  3. YO TAMBIÉN ESTOY ASIENDO LO MINO JEJEJ GRACIAS

    ResponderEliminar
  4. MI BLUGGER http://beromaperu.blogspot.com/

    ResponderEliminar
  5. ABES SI ME DAR ALGUNAS RECOMENDACIONES JEJEJ

    ResponderEliminar
  6. Kuma!! Cuando busco el Codigo
    .post-title No aparece :( que hago??

    ResponderEliminar

HOME STAFF AFILIATE FOLLOW CONTACT
HOME STAFF AFILIATE FOLLOW CONTACT
Copyright© Nemuri Kuma | Powered by Blogger.
Design n' Blogger template by Kuma.