¡Acompáñanos!

BUSCADOR PARA EL BLOG

gadgets para blogger
Escríbenos a: irisamigos@hotmail.es

Lee el blog en...

English cv French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
Debido a los problemas que estamos teniendo para ver cual es vuestro blog y devolveros la visita, os pedimos que cuando os hagáis seguidores nos dejéis un comentario con vuestro blog, muchas gracias, os añadiremos de igual modo en nuestra pestaña de seguidores.

lunes, 13 de mayo de 2013

Tutorial. Blogger. Cómo dividir la cabecera del blog en dos.


Últimamente se van viendo blogs que tienen por ejemplo, una cabecera en un lado y la lista de seguidores en el otro.

Jeje, este mismo tiene esa cualidad.

Me explico, antes tenían una cabecera que ocupaba todo el ancho de la columna y ahora tienen la cabecera en la mitad y en la otra, la lista de seguidores. (Podéis poner otra cosa, el caso es que se puede incrustar otro gadget)

Para conseguirlo:

Reducir la imagen de la cabecera que tenías antes a la mitad o crear una que sea de la mitad de medida del ancho de la columna.

Suelen ser de unos 900 de ancho, pues de 450, aprox. Eso es ir probando.

Ahora vamos a lo técnico para hacer que puedas poner dos gadgets en esa columna.

Cuando entremos en edición html, si estamos con Chrome, damos a Control+F y se nos pondrá a la derecha una ventanita, ahí escribimso /*Header    y entonces veremos que a la izquierda, nos sale esa palabra iluminada en naranja.

Primero entra en Diseño | Edición de HTML y SIN expandir los artilugios busca esta parte:
/* Header
----------------------------------------------- */
Debajo de ella pega lo siguiente:
.header {width:48%; float: left; margin:0 auto 1%;}
.header2 {width:47%; float: right; margin:0 auto 1%;}

Ahora busca el siguiente código y agrega lo que está en color rojo:
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>

<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>

</div>

Si no te sale muy a la par o descentrado debes mirar esto:


Para que salgan igualados.

.header-inner {
  padding: 27px 0 3px;
}                                    (si cambiásemos el 27, variaríamos la altura de la cabecera)

.header-inner .section {
  margin: 10 35px;
}

(variando lo de margin, se cambia la altura del gadget que tengamos en la derecha)

Como ya digo, es jugar con los numeritos y probar, probar.

IMPORTANTE: SIEMPRE GUARDAR UNA COPIA DE VUESTRA PLANTILLA ANTES DE HACER ALGÚN CAMBIO.
O, cuando estéis editando vuestro html, dad a vista previa antes de guardar el trabajo, si no sale lo que os gusta, no guardéis nunca.




12 comentarios:

  1. De momento no quiero divisiones, bastante tengo cuando no me pongo de acuerdo conmigo mismo.

    Un abrazo agradecido.

    ResponderEliminar
  2. Muchas Gracias Dani por esta entrada ! a mi al menos me interesa mucho todo lo que sea de este tema porque estoy totalmente pegada y no se hacer nada , así que todo lo que sea de este tema me viene de maravillas . Te lo agradezco de verdad.
    Un abrazo grande

    ResponderEliminar
  3. Uy gracias por la ayuda , si me animo lo pongo

    ResponderEliminar
  4. Buen tutorial, ahora habrá que ponerse manos a la obra.
    Uffff, vamos a intentarlo.
    Gracias:)

    ResponderEliminar
  5. Ni que decir tiene que si alguien necesita ayuda, aquí estamos.
    Grrrr

    ResponderEliminar
  6. Pues sí peluche, si algun día hago algo, te llamo y me haces de arquitecto bloggeril.

    Besossssss!!!

    ResponderEliminar
  7. de momento no cambio pero sigue asi que gusta , chico eres una caja sorpresa ehhh ;) me falto ponerlo en la bio

    ResponderEliminar
  8. No lo puedo cambiar..........sirve para el nuevo diseño html que tiene blogger??

    Saludoss

    ResponderEliminar
  9. No pudeeeeeeeee desde que cambio la interfaz nueva no se como hacer!! Ayudaaaaaaaa

    ResponderEliminar
    Respuestas
    1. Hola Hernando, pues ahora mismo no te sabría decir si vale para la nueva interfaz.
      Probaré luego y si se puede, hago tutorial especial sobre cómo se hace.

      Un saludo.

      Eliminar
    2. Yo tampoco puedo… has encontrado alguna manera de hacerlo? Muchas gracias!

      Eliminar
  10. Hola Dany: Gracias por esta explicación muy buena!!!! Aunque no creo que me anime a hacerla....pues siempre viene bien tener conocimiento de estas cosillas >_<
    Besos =)

    ResponderEliminar

Recuerda darnos un +1 y comentarnos, nos haces seguir adelante.