Tutorial:Personalizar gadget 1 ♥



Hola ,,ya se empesaron a anotarse los participantes para el concurso wuhu si quieres participar en el concurso clic aqui ¡ .Bueno hoy les traigo un tutorial para personalizar tu gadget,yo le dare un estilo de gadget y ustedes pueden modificar los colores y otras cositas 
Aqui una imagen del primer estilo de gadgets :
Este estilo es el que uso yo mayormente como abran notado ,en mis dos ultimas plantillas y en esta plantilla masomenos ,bueno este estilo le agrege mas cosas ,como veran en la imagen tiene debajo de titulo unos puntitos ,y tambien le puse que al pasar el cursor sobre los bordes(las lineas celeste y rosada) cambian de color al pasar sobre ellas,no pude aser un gif para que lo vean por que taba apresurada 

bueno si les gusto sigan los siguientes pasos :
 Paso 1: Plantilla Basica: Ir a Plantilla/Edicion Html/Buscar con Ctrl +F  ]]></b:skin>
Pegar el siguiente codigo antes de ]]></b:skin> 
En caso de que no salga bien ,despues de presionar Ctrl +F pones /* Widgets
----- y debajo borras todo asta }.Aqui un ejemplo:
Y colocas el siguiente codigo debajo de  * Widgets
-----
(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )
.sidebar .widget {
background: #fff !important;
 border-bottom: 5px solid #fcc7c7!important;
 border-top: 5px solid #afeeee!important;
-webkit-border-radius: 10px!important;
font-family: Delius!important;
font-size: 14px!important;
text-align: center!important;
font-weight: norma!importantl;
padding: 1px!important;
-webkit-transition-duration: .80s;
}
.sidebar .widget:hover {
background:  #fff!important;
-webkit-border-radius: 10px!important;
 border-bottom: 5px solid #afeeee!important;
 border-top: 5px solid  #fcc7c7!important;
font-family: Delius!important;
font-size: 14px;
text-align: center;
font-weight: normal;
padding: 1px;
-webkit-transition-duration: .80s;}
.sidebar h2 {
font: normal 22px 'Emerald',Trebuchet,sans-serif;
color: #6FCFFF!important;
text-align: center!important;
margin-top: 3px!important;
margin-bottom: 2px!important;
border-bottom: 3px dotted #FFA6B2!important;
}
@font-face {
font-family: 'Emerald';
src: url('http://static.tumblr.com/z7rr9hy/SJNmixual/simplicity.ttf');
}
Paso 2:Personalizar colores y otros :
#fff:Color del fondo de los gadgets 
5:Tamaño del borde de la parte de abajo en los  gadgets
#fcc7c7::Color del borde de la parte de abajo en los gadgets(Ejemplo de la imagen:es la linea rosada que se encuentra abajo)
5:Tamaño del borde de la parte de arriba en los  gadgets
#afeeee:Color del borde de la parte de arriba en los gadgets(Ejemplo de la imagen:es la linea celeste que se encuentra arriba)
10:Si aumenta la cantidad las esquinas de los gadgets se redondaran mas y si disminuye pasa lo contrario
#fff:Color del fondo de los gadgets al pasar el cursor
5:Tamaño del borde de la parte de abajo al pasar el cursor
#afeeee:Color del borde de la parte de abajo en los gadgets al pasar el cursor
5:Tamaño del borde de la parte de arriba al pasar el cursor
#fcc7c7:Color del borde la parte de arriba en los gadgets al pasar el cursor
#6FCFFF:Color de la letra del titulo de los gadgets
3:Tamaño del borde de la linea bajo el titulo
#FFA6B2:Color de la linea bajo el titulo
NUEVO CODIGO IMPORTANTE :
!important: Cualquier código que vaya acompañada de un !important tendrá mayor importancia que cualquier otro código que tengas.
Pones primero vista previa para que veas como quedo   Y si no funciona dejame un comentario sobre cualquier duda o problema .


25 comentarios :

  1. AWWWWWW *0* muy bonis...como siempre tus editadas son adorables >w<

    ResponderEliminar
  2. gracias por el tutorial ^^
    intentaré ponerlo en práctica~~

    ResponderEliminar
  3. Gracias por el tuto *O* Esta genial!!

    Muchos besos y se me cuida!!

    ResponderEliminar
  4. esta precioso lo voy a provar y si me gusta lo uso
    aqui esta mi firma
    http://clasicylove.blogspot.com.es/2013/07/tutorialpersonalizar-gadget-v3firma-del.html

    ResponderEliminar
  5. cada vez mas ganas de cambiar el aspecto del blog *-* realmente tenia ganas de saber como hacías esto, sin embargo no sabia como decírtelo :)

    ResponderEliminar
  6. esta precioooso me gusto muchisimo se agradece

    ResponderEliminar
  7. Respuestas
    1. aqui esta mi firma del concurso:
      http://dayfananimes.blogspot.com/2013/07/packsiconos-taiga-aisakafirma-del.html

      Eliminar
  8. muy bueno el tutorial, gracias ^^

    ResponderEliminar
  9. ¡hola! ¡Lindo blogger!

    Una pregunta.~

    ¿Me podrías decir como se llama la canción que suena en tu blog?

    ResponderEliminar
    Respuestas
    1. Muchas me an preguntado eso ,pero no recuerdo su nombre es que taba en chino u.u¡ y cuando lo ponia como nombre en la musica no salia ,se ponia con "???" u.u.Pero toy buscandola :3

      Eliminar
  10. Hola linda :3 pasa por mi blog http://nieblaleal.blogspot.mx/

    ResponderEliminar
  11. muy lindo! ^v^
    gracias por el tuto!!!!! >u<

    besos!!! ^-^

    ResponderEliminar
  12. UN PREMIO PARA TI :D FELICIDADES!! ♥
    http://sakurakiminitodoke.blogspot.com.ar/2013/07/nuevos-premios.html

    Beso ^^

    ResponderEliminar
  13. Respuestas
    1. que raro no cambio nada tus gadgets ? owO¡

      Eliminar
  14. Holii esta genial el tuto a mi me va pero solo cuando paso el cursor por encima ;( en que me e podido equibocar ayudame plis :)

    ResponderEliminar
  15. me encato el tutorial >u< quedo super lindo en mi blog!

    ResponderEliminar
  16. Lunany, Hola! Sabes me quedó así: http://gyazo.com/a25aec5fa3f4fb7ba905913b73960b87
    Los gadgets chocan entre sí, sabes como separlarlos? ;_;

    ResponderEliminar
    Respuestas
    1. Si,esperame en la noche ,te lo respondo muy bien como separarlos :3 ,aorita estoy con full tareas

      Eliminar
  17. Muchas gracias ^^ No lo cambie mucho ya que los colores que tenian pegaban con mi blog !! Beso

    ResponderEliminar

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