lunes, 30 de noviembre de 2015

1er Tutorial! Como adornar tu gadget

Holitas mis ricotes Momitos!! Acá aprovecho para dar comienzo a una de nuestras nuevas secciones... TUTORIALES! [Solo para bloggers] *w*

Quiero avisarles también que tenemos nueva admin! Marielita wiiiiiiii, ella nos ayudara mucho! *w*

Bien, vamos al tutorial, cabe aclarar que solo pondre los que usamos en este blog :P

Si quieren tener un gadget como lo tenemos nosotros (con el conejito) deben copiar el siguiente codigo :p

Vamos a Plantilla → Personalizar → Avanzado → Añadir CSS
y pegamos


/**Imagen al lado del título de los gadgets**/
.sidebar h2{  
background:  url(http://2.bp.blogspot.com/-9Emi0UD01Xc/VlyRxDuLm_I/AAAAAAAAAlA/p-lS16zO-6Q/s1600/usagi.png) no-repeat right;
border-top: 2px dotted #000000; /**Borde Superior**/
border-bottom: 2px solid #000000; /**Borde Inferior**/
border-left: 0px solid #000000; /**Borde Izquierdo**/
border-right: 0px solid #000000; /**Borde Derecho**/
padding:5px; 

}

* Dependiendo el lado que quieras poner la imagen del titulo de los gadget.
* Si quieres que tenga un borde debes ponerle un numero a "px". También puedes cambiar solid por otras opciones...
Si queres que sean puntitos debes poner dotted y listo xD


Solid                                                            
Dotted.........................................................
Dashed-------------------------------------
Double_____________________________

Les va a quedar el conejito así :p
También pueden ponerle la imagen que ustedes quieran, hay que tener en cuenta las medidas!




Fondo y bordes redondeados en Gadget


Plantilla → Personalizar → Avanzado → Añadir CSS
y pegamos el codigo siguiente

.sidebar .widget{
background: url(http://4.bp.blogspot.com/-Jh7Ood_yB6I/VlnAV4GEzsI/AAAAAAAAAkE/XsmrQ2Ruz4g/s320/patter2.png);
margin:0 0 0.7em;
padding:4px;
}

.column-right-outer .widget, .column-left-outer .widget {
border: 2px dotted #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding:10px;
margin: 10px 0;
}

*Puedes ponerle el fondo que quieras poniendole otra dirección
* Poder aumentar o reducir los px del borde que le vas a poner a tu gadget
Solid                                                            
Dotted.........................................................
Dashed-------------------------------------

Double_____________________________

Nosotros le pusimos un radio de 25px, tu si quieres puedes variarlo, es a tu gusto 





No hay comentarios:

Publicar un comentario