Tutorial: Colocar gadgets separados ♥


Hola a todas ,estoy algo cansada ayer me amanecí  haciendo un plano de una casa  termine como las 7 am y luego me dormí al toque ,me quede seca ,se sentía rico la camita ,me dolía mi cuellito y mis huesitos y la cama me calmaba. Ahorita estoy con los ojos un poco rojos por no dormir tanto jaja me levante alas 3 pm y no había nadies en la casa me dejaron nota donde estaba mi comida , me dejaron solitajeje . Bueno hoy me pidieron un tutorial de como colocar gadget separados , aqui les dejo una imagen a lo que refiero 




Para Plantilla Basica o Blogger: Ir a Plantilla/Editar HTML / Presionas CTRL+F y colocas en la cajita que te apareció .sidebar .widget {
luego abajito algunos codigos ,depende de su plantilla ,por ejemplo a mi me sale asi : 
lo que esta seleccionado con azul lo borrare y lo remplazare por el siguiente codigo :
background: #fff !important;/*Color de fondo*/
 border-bottom: 5px solid #fcc7c7 !important;/*Tamaño del borde,Tipo de borde,Color del borde parte inferior*/
 border-top: 5px solid #afeeee !important;/*Tamaño del borde,Tipo de borde,Color del borde parte superior*/
-webkit-border-radius: 10px !important;/*Tamaño del borde redondeado*/
font-size: 14px !important;/*Tamaño de la letra del gadget*/
text-align: center !important;
font-weight: normal !important;
padding: 1px !important;

Si no les gusta los bordes ,pueden quitarlo ,borrando el siguiente codigo
 border-bottom: 5px solid #fcc7c7 !important;/*Tamaño del borde,Tipo de borde,Color del borde parte inferior*/
 border-top: 5px solid #afeeee !important;/*Tamaño del borde,Tipo de borde,Color del borde parte superior*/
Si no quieres borde redondeados quita el siguiente codigo :
-webkit-border-radius: 10px !important;/*Tamaño del borde redondeado*/
Pero para que noten que los gadget tan separados añádele :
borde:2px solid #afeeee !important;/*Tamaño del borde,Tipo de borde,Color del borde parte superior*/
Notita:
Para los que no encontraron .sidebar .widget {
Ir a Plantilla/Editar HTML / Presionas CTRL+F y colocas en la cajita que te apareció ]]></b:skin>
y colocas el siguiente codigo antes de ]]></b:skin>
.sidebar .widget {
background: #fff !important;/*Color de fondo*/
 border-bottom: 5px solid #fcc7c7 !important;/*Tamaño del borde,Tipo de borde,Color del borde parte inferior*/
 border-top: 5px solid #afeeee !important;/*Tamaño del borde,Tipo de borde,Color del borde parte superior*/
-webkit-border-radius: 10px !important;/*Tamaño del borde redondeado*/
font-size: 14px !important;/*Tamaño de la letra del gadget*/
text-align: center !important;
font-weight: normal !important;
padding: 1px !important;
}
Y bueno eso es todo  para los que les aparece una caja blanca o otro color atrás de los gadgets y quieren eliminarlo clic aqui para el tutorial : Tutorial :Eliminando fondos transparentes
-----------------------------------------------
Algunas capas tengan problemas ,capas no les funcione pero es por su plantilla que tienen  dejarme el nombre de la plantilla que usan por que el codigo .sidebar .widget { en otras plantillas tienen otro nombre . 
Bueno ya que estoy cansadita un poco , mas rato empezare a hacer los pedidos de plantillas y el lunes no tengo clases ,ni el jueves ,asi que tendré mas días para avanzar con los pedidos,aun que el martes tengo examen 

!important: en la siguiente entrada les dire que significa este codigo  





8 comentarios :

  1. un muy buen truco para la plantilla simple :D

    ResponderEliminar
  2. ¿Funciona también para las entradas?

    ResponderEliminar
  3. Muy interesante tutorial :3 , muchas gracias, espero poder usarla.
    PD: A mi no me gustaría que me dejaran solita -.-

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥