Cómo enmarcar las entradas y los elementos de la sidebar por separado


Hace tiempo me preguntaron cómo había conseguido que en mi sidebar cada elemento se mostrase como un bloque individual, por eso voy a tratar de explicar lo mejor posible cómo conseguirlo, aunque con la variante que también explicaré cómo hacerlo con cada post (entrada). Sin duda es una buena opción para mejorar el diseño de nuestros queridos blogspot.


1. Enmarcar post (entradas) por separado en Blogger.


1) Ves a Diseño
2) Edición de HTML
3) Busca el código .post { (teclea Ctrl + F para buscar más rápido)
4) Debajo de él pega lo siguiente:

border:1px solid black;
  }
.main .post { margin:0 0 1.5em;padding:0 0 1.5em; padding: 10px; }

La primera línea de border hace referencia al borde que recorrerá cada entrada individual. Si quieres más información sobre los bordes puedes visitar la siguiente entrada: Bordes en Blogger.

Padding es la separación o distancia que habrá entre el borde y el comienzo del texto. Margin es la distancia de separación entre el borde y la parte exterior del elemento. Cambia los valores de padding y margin según tus necesidades y la estructura de tu blog. Cada plantilla de Blogger es un mundo. Si te quedan dudas fíjate en esta imagen extraída de comocreartuweb.


5) Por último clica en vista previa y si todo está bien, guarda tu plantilla.



2. Enmarcar gadgets (widgets) de la sidebar por separado en Blogger.


1) Ves a Diseño
2) Edición de HTML
3) Busca el código .sidebar .widget,  (teclea Ctrl + F para buscar más rápido)
4) Debajo de él pega lo siguiente:

  .main .widget {
  border:1px solid black;
  margin:0 0 1.5em;
  padding: 10px;
 }

Es decir, al final debería quedarte algo así:

.sidebar .widget, 
  .main .widget {
  border:1px solid black;
  margin:0 0 1.5em;
  padding: 10px;
 }

Para modificarlo, te servirá lo mismo que comenté en la explicación de cómo enmarcar las entradas por separado.

5) Clica en vista previa, y si no hay ningún fallo guarda tu plantilla.



Espero que estos dos trucos para Blogger te hayan servido para decorar y diseñar aún más tu blogspot.

9 comentarios:

  1. Hola! he incluido un borde en mi blog, pero el espacio entre el borde y el exterior del cuerpo de la entrada me parece demasiado ancho. Intento cambiar el valor de margin, pero no se cambia la anchura. ¿puedes ayudarme?

    ResponderEliminar
  2. Hola, tengo una nueva plantilla de blogger, y no me funciona este truco para enmarcar gadgets. Puede ser a causa de la plantilla?
    Gracias
    Gaby

    ResponderEliminar
  3. primero que todo muy buen blog, he aprendido mucho.
    me gustaria preguntarte como puedes poner en tu sidebar 2 imagenes con enlaces independientes en la misma fila?? por ejemplo en tu RECOMENDACIONES: REPLICA Y MEDIA NARANJA
    tienes doble columna de sidebar?? o como lo hiciste
    ojala me puedas ayudar
    saludos:)

    ResponderEliminar
  4. Ante todo muchas gracias por este magnifico blog, la verdad es que esta todo muy bien explicado y pienso que va a ser de gran ayuda a muchas personas.
    Pero .... parece que yo soy muy torpe y no soy capaz de conseguir lo que necesito.
    Quisiera separar con bordes cada entrada de mi blog, ya que lo veo muy desordenado, pero por mas post que me he leido no he sido capaz.
    Es seguro que algo estoy haciendo mal, no se si puedes ayudarme de alguna manera.
    Muchas gracias anticipadas

    ResponderEliminar
  5. Hola Juan. Hace tiempo que vengo buscando este truco (enmarcar entradas) por numerosos blogs de ayuda bloguera, ahora te toca a tí. Resulta que no es que no entienda el truco, amén de que me desenvuelvo como pez en el agua con el HTML (ejem), pero ¿qué hago si no encuentro la línea ".post {" en mi plantilla? Ni el buscador interno da con ella, me marean tantos códigos. O eso o que no está incluía, lo cual es raro. No sé dónde queda, si al final o en medio o entre qué otras líneas de código. Espero se me entienda.
    ¿Puedes ayudarme?
    Gracias

    ResponderEliminar
  6. holes que a mi nome aparece .main .widget { que ago

    ResponderEliminar
  7. He mirado ya 10 blogs y todos ponéis como código para enmarcar: . post { ... Pues a mí la búsqueda no me da resultados, así que he puesto el código delante de head y no funciona y lo puse detrás y tampoco.
    En otros blogs en lugar de buscar: . post {
    te dicen que lo pongas delante de: main . wrapper { ... o algo asi, pero en mi plantilla tampoco viene.
    ¿Algún otro código que pueda venir en mi plantilla para poder poner el blog enmarcado?
    Porque la verdad es que no me vienen los códigos que decís y no puedo enmarcar mis entradas. :(
    http://insolitadimension.blogspot.com/

    Me harías un gran favor si me contestases en mi blog en la sección de "Comparte tu web"
    Gracias.

    ResponderEliminar
  8. Hola YO lo que quiero es que mis entradas esten divididas en tres bloques ose en tres marcos la uno para imagen del post otro seria los datos tecnicos y otro para el contenido y por ultimo un boton de leer mas puedes ayudarme

    ResponderEliminar