¡Hola! a peticion de Gladiuska★ les enseñare a como editar sus gadget de la manera mas breve posible
espero que puedan entender <3 Si tienen alguna otra duda, haganmela saber
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu4yigzjcdVYVyDwlPw6NstzpO1KLz5n7TMS7qQ3NDlvABnpGwp0u2XeOB4oWG1q34gelXCHNwyvXqk47UCtYSAhQUVKf1I2CJFni8SCSQsdOiGVLYJOUQjZ5EA9-voXoBwjvs4Pt91yY/s1600/12.png)
Cuerpo del gaget
su codigo principal es .sidebar .widget { acontinuacion te enseñare lo principal para editarlo ^_^![](http://i1098.photobucket.com/albums/g379/yuseong_13/Mis%20Pixels/Bullets/pencil_o.png)
background:#fff; ⇦ fondo simple con color
background :url(url de la imagen); ⇦ imagen de fondo
![]() |
sidebar con bordes redondeados e imagen de fondo** |
![](http://i1098.photobucket.com/albums/g379/yuseong_13/Mis%20Pixels/Bullets/pencil_o.png)
border-right: 5px solid #dfdfdf;/* Borde derecho */
border-left: 5px solid #dfdfdf;/* Borde izquierdo*/
border-bottom: 5px solid #dfdfdf;/* Borde inferior*/
border-top: 5px solid #dfdfdf;/* Borde superior*/
Grosor de tu borde
Tipo de borde
Color de tu borde
![](http://i1098.photobucket.com/albums/g379/yuseong_13/Mis%20Pixels/Bullets/dd_02.png)
border-radius: 20px;
Mientras mayor sea la cifra de numero, mas redondeadas estaran las esquinas.
![](http://i1098.photobucket.com/albums/g379/yuseong_13/Mis%20Pixels/Bullets/dd_02.png)
.sidebar .widget {
background :url(url de la imagen);border-right: 5px solid #dfdfdf;/* Borde derecho */border-left: 5px solid #dfdfdf;/* Borde izquierdo*/border-bottom: 5px dashed #dfdfdf;/* Borde inferior*/border-top: 5px dashed #dfdfdf;/* Borde superior*/border-radius: 20px;
Titulo del Gadget;
Para este se necesita el codigo .sidebar h2 {![](http://i1098.photobucket.com/albums/g379/yuseong_13/Mis%20Pixels/Bullets/pencil_o.png)
color:#fff; /**color de la letra del titulo**/font-family: Arial;letter-spacing: 1px;font-style: normal;text-transform: uppercase;background: #fff; /**fondo de la cajita**/text-shadow: 1px 1px 0px #fff; /**sombra del texto**/font-size:12px;margin-top: -4px;margin-bottom: 5px;padding-top: 2px;padding-bottom: 4px;padding-left: 0px;padding-right: 5px;text-align:center; }
![](http://i1098.photobucket.com/albums/g379/yuseong_13/Mis%20Pixels/Bullets/pencil_o.png)
font:10px 'arial';text-transform: uppercase; color: #fff; /**color del texto, elige alguno fosforescente para efecto 3d**/padding-left:10px; text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;-moz-border-radius: 1px;border-radius: 1px;padding:6px; background:#fff; opacity:0.9; text-shadow:2px 2px 0 #fff;/**sombra del titulo, elige color fosforescente para efecto 3d**/
Eso es todo ^_^ ¡Hasta la proxima!<3
Muy buen tutorial, gracias ♥
ResponderEliminarDe nada Natsuki <3
EliminarTodos muy lindos! ^^
ResponderEliminarGracias Chloe!
EliminarGracias! después lo pruebo a ver que tal me sale C:
ResponderEliminarSaludos♥
Saludos a ti Gladiuska!
Eliminar