FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Cambiar los bordes de las entradas

27 feb 2012
Me preguntaron por tagboard como se hace para que los bordes de las entradas y los sidebars se vean redondeados así que acá hago este tutorial para que puedan aprender :) Espero que les sirva y cualquier duda ya saben que me pueden preguntar e intentaré ayudarlos.

De paso aprovecho para decirles que se bastante de HTML y CSS, así que si tienen alguna duda sobre eso también pueden pedirme tutoriales, los haré encantada! Comencemos.

1. Vamos a la pestaña Plantilla de nuestro blog y entramos en la Edición HTML.
2. Buscamos entre el código (CTRL+F para que salga el buscador) lo siguiente: .post { o bien .post-outer { (depende de la plantilla que usen) En el caso de que utilicen la plantilla fantástico lo que tiene que buscar es .date-outer {
3. Les aparecen algunas líneas de código entre { }, borran eso y pegan esto que les dejo.

  padding: 15px 20px;
  background: #000 ;
  border: 1px dotted #fff;
  margin: 20px;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  -khtml-border-radius: 40px;
Lo que está en rojo es lo que le dará el aspecto redondeado a los bordes. Pueden bajar o subir el valor, eso es a gusto de ustedes. Lo que sí en los tres va el mismo, porque sirve para que sea en distintos exploradores.

También cambian el código de background para cambiar el color por el que ustedes quieran poner de fondo de sus entradas y lo de border es opcional, pero pueden cambiar el color, los pixeles (más grande o más chico) y el dotted lo pueden cambiar por dashed o solid. Si no quieren usar borde, simplemente borren esa línea.

Por último, padding es el margen que queda entre el borde y el texto de la entrada. Pueden dejarlo así o cambiarlo, pero no es necesario.

4. Cuando lo tengan guardan los cambios y listo :)

10 comentarios :

  1. Guau muchísimas gracias! :D
    Yo tengo la plantilla simple, y gracias a esa plantilla no he tenido que eliminar ningún código.
    Lo he probado en mi blog de pruebas; lo he puesto y lo he quitado. ¡Y ha salido todo bien!
    Muchísimas gracias, te lo agradezco.

    ResponderEliminar
  2. Me re sirvió Katie! Muchísimas gracias :D

    ResponderEliminar
  3. Me alegra que les haya servido chicas :D Besos!

    ResponderEliminar
  4. Hola no sabes como redonder toda la plantilla no solo por secciones

    ResponderEliminar
  5. Hola, Me han servido mucho tus tutoriales, pero me gustaría saber como redondear toda la plantilla.
    Gracias

    ResponderEliminar
  6. donde esta las lineas entre {}? puedes poner imagenes?

    ResponderEliminar
    Respuestas
    1. Luego de .post lo tienes que poner.. dice .post { ...... y después esa llave se cierra, solo aclare eso de las llaves para que no las borren

      Eliminar
  7. Buen tuto :) lo use para mi blog (http://joan-vazquez.blogspot.com

    ResponderEliminar
  8. Gracias pero puedes hacer un video pliiiis casi no entiendo espero tu respuesta

    ResponderEliminar
    Respuestas
    1. Qué es lo que no entiendes? No puedo hacer un video, lo siento

      Eliminar