Cuerpo & titulo de tus widget

La idea de este tutorial, es resaltar/separar/decorar nuestros widget & que no sea solo una linea recta formando un simple "sidebar". Para lograr esto sigue los siguientes pasos:

Para editar el cuerpo de tus widget ~
Vamos a Plantilla / Edición HTML / Buscas {Ctrl + F} lo siguiente:
]]></b:skin>
ARRIBA pegas & editas a tu gusto el siguiente codigo:
.main-inner .widget {
background: #000 url(URL IMG); /* COLOR/IMAGEN DE FONDO */
border: 1px solid #000000; /* BORDE DEL WIDGET */
font-family: calibri; /* FUENTE DE LETRA */
font-size: 13px; /* TAMAÑO DE LETRA */
margin-bottom: 10px; /* SEPARACIÓN CON EL "WIDGET" DEL FONDO */
border-radius: 20px; /* BORDE REDONDEADOS */
color: #ffffff; /* COLOR DEL TEXTO */
}
Para editar el titulo de tus widget ~
Ya vimos como cambiar el titulo por un "Titulo-imagen" {VER TUTORIAL}, ahora veremos como editarlos de la forma en que se encuentran ahora en mi blog ♥~
Agrega debajo de lo que pegaste anteriormente, lo siguiente & edita a tu gusto:
.main-inner .widget h2 {
padding: 5px;
background: #000 url(URL IMG);
border: 1px solid #000000;
font-family: calibri;
font-size: 13px;
border-radius: 10px;
margin-top: -30px;
}

Quiero que el titulo del widget, quede fuera del "cuerpo"

Busca en el ultimo código pegado la linea:
margin-top: -30px;
Edita en nro "30" aumentándolo, hasta que quede "sobre" el cuerpo de tu widget.
Ten cuidado de no borrar el signo menos (-)

17 comentarios:

  1. Gracias por el tutorial, lo utilizaré en mi nuevo blog :)

    ResponderEliminar
  2. Otra cosa, que plantilla usas?? Usas plantillas bloskin, clasicas o de diseñador??

    ResponderEliminar
  3. que lindo tu blog, me encantaron los colores del diseño!!!

    ResponderEliminar
  4. Siiiiiiiiiiii :) Miles de gracias!!! Que ganas de probarlo ^^

    ResponderEliminar
  5. ¡Hola de nuevo! Lo acabo de probar y tengo un problema ¿Cómo puedo hacer que el "recuadro" sea más grande? Quiero decir, del tamaño del gadget. Es que me queda descentrado. Y ¿Se puede eliminar el recuadro en la zona de la entrada?

    Gracias por todo <3

    ResponderEliminar
  6. Holi holi de nuevo ~
    A mi hasta hace poco tampoco me dejaban comprar por internet y creo que es por lo mismo que a ti, una vez empiezas no puedes dejar de comprar y comprar cosas!!!! -.-
    ¿Tienes email? Me gustaría enviarte una captura de pantalla para explicarte mejor lo que me pasa :S Solo si te parece bien y quieres ayudarme si no tienes tiempo o te molesta no pasa nada :) ¡Un beso enorme y de nuevo gracias! ^^

    ResponderEliminar
  7. Arigato ~*** lo haré mi blog de pruebas, para ver si me queda ^^

    ResponderEliminar
  8. hola mell, queria saber si puedes ayudarme con mi plantilla
    http://nyan-sweet.blogspot.com/
    si te fijas en la barra de la derecha esta esta como en 3D & la verdad no tengo idea como ponerla planita asi como el cuerpo del post ayudame no se que hice con mi plantilla :'(

    ResponderEliminar
  9. HI!gracias por el anterior tuto me sirvio mucho y tambien te puedo pedir que si me afilias ya que yo ya te afilie aui mi url:http://recuerdos-agridulcess.blogspot.mx/
    Y mi cumple es el 3/septiembre/99
    creo y eso es todo^^espero y se pueda
    ~Saludos

    ResponderEliminar
  10. Nunca me llego el e-mail sobre la plantilla te lo juero que lo rebisaba a diario pero nunca me llego,detodos modos gracias eso me servira para hacer mis plantillas propias-^^-

    ResponderEliminar
  11. Hola Melo,tomé este tutorial para mi blog porque me lo pidieron,pero te dejé créditos al principio de todo.
    Espero que no te moleste,si es así solo déjame un comentario en mi blog y elimino la entrada :)
    Un beso,y excelente tuto,eres una genia sigue así!

    ResponderEliminar
  12. Muchas gracias mell!! Queria saber si tenes un tuto para hacer lo mismo con las entradas? n.n y gracias por compartir tus conocimientos con nosotras

    ResponderEliminar
  13. El link a "Ya vimos como cambiar el titulo por un "Titulo-imagen" {VER TUTORIAL}," está roto, sería conveniente que hallaras solución >_<

    Por lo demás, fantástico post, explicas muy bien.

    ResponderEliminar
    Respuestas
    1. Graciasssss por avisarme <3
      Estoy en eso, reparación de links, debido al cambio de URL * --- * <33
      Genial que te sea util ~

      Eliminar