Modelo de sidebar #2


 ¡Hola! como les va? 
Este tutorial de modelo de gadget/sidebar es un poco largo así que empecemos!~
Antes de empezar quiero darle créditos por los códigos a -Amary Miau's Blog- gracias a ella pude elaborar este sidebar para nuestros blogs.

 P R E V I A:

Para tener el modelo de sidebar en vuestros blogs
1 ) -Para poner el fondo-
Plantilla | editar HTML | CTRL + F
Y buscas:
]]></b:skin>
Y arriba pones este código:

.sidebar .widget {margin: 4px 2px 30px;background:#f;padding: 6px 6px;background:#fff;border-bottom: 5px solid #FED4E9

Para editar:
Lo rojo: El color del fondo.
Lo azul: Es la barra de abajo del fondo.

2) -Para el titulo-
Plantilla | Editar HTML | CRTL + F
Y buscas:
/* Headings
Después de encontrarlo hacemos lo siguiente:


 Lo que se muestra subrayado en la imagen lo borramos y lo reemplazamos por este codigo:

.sidebar .widget h2 {
color:#F7BDE2;
font-family: Georgia;
letter-spacing: 3px;
font-style: italic;
text-transform: lowercase;
background: #f1f1f1;
text-shadow: 1px 1px 0px #fff;
font-size:12px;
margin-top: -4px;
margin-bottom: 5px;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 0px;
padding-right: 5px;
text-align:center;
box-shadow: 1px 1px 0px #FED4E9;
}

Para editar:
Rojo: Color de las letras
Verde: Color del fondo de la cajita
Rosa: Color de la sombra de las letras
Azul: Color de la sombra de la cajita

¡Y listo! se guarda y ya lo tenemos en nuestro blog.
Sí ves que no funciona el fondo blanco, es por que quitaste esto ese fondo transparente, lo mejor es no quitarlo.


Adiós.
¡Espero les sirva!


6 comentarios:

  1. Me encanto! haber luego lo pongo en alguno de mis diseños XD

    ResponderEliminar
  2. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
  3. Hola, ¿que hago si no tengo en mi plantilla el "/* Headings"? Es que me gustó el diseño del gadget y lo quiero poner en mi blog pero no tengo ese código :'c ¿Lo puedo colocar en ]]>?

    ResponderEliminar
    Respuestas
    1. Hola.. que raro, pon la plantilla 'Windows, la azul' y ve sí sale, sí no, trata con ese código, ojala te funcione!

      Eliminar

¡Hey, gracias por leer la entrada!

Para que no tengas ningún problema/duda:

- Deja tu comentario referente a la entrada.
- Para las afiliaciones: ir a su sección (Afiliame/Afiliados)
- Comenta con respeto.
- No SPAM.
- No malas palabras.
- Respeta al administrador y a los usuarios del blog.
- Sí tienes problemas con un tutorial comenta o escríbeme a mi correo para ayudarte.
- Sí tienes algún problema conmigo, ya sea por créditos, derechos de autor o otro, escríbeme a mi correo.

- Símbolos:
☯♠♤♣♧ ♥♡♦♢♔ ★✖ ✗✘✌✿☽ ☾♩ ♪ ♫ ♬ ✧ ❝❞ ❀ ❄

- Emojis:
(>‿◠)✌ (✿◠‿◠) (▰˘◡˘▰) ( ͡° ͜ʖ ͡°) (≧∀≦) ( ˘ ɜ˘) (・w・)[̲̅$̲̅(̲̅ ͡° ͜ʖ ͡°̲̅)̲̅$̲̅] (ノ◕ヮ◕)ノ*:・゚✧ ( ͡° ʖ̯ ͡°) ( ͡° ᴥ ͡°) ヽ(゚▽゚*)乂(*゚▽゚)ノ

Recuerda dejar tu comentario + la URL de tu blog para poder visitarlo.
- (No cuenta como SPAM)

Sí te gusto la entrada no olvides seguir el blog, así no te pierdes ninguna entrada, actualizo cada semana o cuando pueda.

Contacto:
gladiuskagg@gmail.com

¡Saludos!

-Glad.