Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Dale tu propio estilo a los gadgets! Parte I


Hola hoy les enseñaré como terner los gadgets así como los míos (↓↓↓) Ahora les explicaré como diseñarlo paso a paso.

1RO: Desde el editor HTML de la Plantilla (siempre con los artilugios expandidos), puchale al botón F3 y escribe Headings.

2DO: Abajo de Headings aparecerá lo sgte.
h2 {
  font: $(widget.title.font);
  text-transform: $(widget.title.text.transform);
  color: $(widget.title.text.color);
  margin: .5em 0;
  text-align:center;
  •  Nota: No precisamente igual, pero parecido. Siempre inicia con h2 {
3RO: Al final (abajo de text-align) pega el sgte. código (↓↓↓)
background: url(url de la imagen);
border-top: #código de color 2pt solid;
margin: 0 -10px 0 -10px
  • Nota: Dale clic a los enlace de url de imagen y código de colores, ellos te llevarán ha páginas donde encontrarás diversos fondos (imágenes) y también los códigos.
4TO: "Gadget bordes redondeados". Esta parte es de uno por uno, o sea por gadget. Otra vez F3 y escribe el nombre del gadget que deseas modificar. Por ejemplo Archivos de Blog o como le hayas nombrado (debe ser el nombre que le pusiste).

5TO: Cuando has encontrado algo como el código de abajo (↓↓↓), que tiene el ID de ese gadget, lo hiciste bien. Copias el nombre ID (lo subrayado).
<b:widget id='BlogArchive1' locked='false' title='Historial' type='BlogArchive'>
6TO: Para evitar complicaciones abre un bloc de notas y pega el nombre ahí, y antes de este agrégale el símbolo de numeral (#). Debiendo quedar así... #BlogArchive1

7MO: Al lado de eso pega el sgte código...
{
padding: 0 10px 0 10px;
background: #fff;
-webkit-border-top-right-radius: 24px;
-webkit-border-top-left-radius: 24px;
-webkit-border-bottom-right-radius: 14px;
-webkit-border-bottom-left-radius: 14px;
border-bottom: 2px #código de color solid;
}
8VO: Debiendo quedar finalmente así (↓↓↓)
#BlogArchive1{
padding: 0 10px 0 10px;
background: #fff;
-webkit-border-top-right-radius: 24px;
-webkit-border-top-left-radius: 24px;
-webkit-border-bottom-right-radius: 14px;
-webkit-border-bottom-left-radius: 14px;
border-bottom: 2px #código de color solid;
}
  • Nota: En donde dice cógido de color es el color de los bordes superior e inferior.
9NO: Copia todo el código que armaste en el bloc de notas y pégalo antes de ]]></b:skin>

10MO: Puchale a vista previa y, si te gusta como ha quedado dale a guardar. FIN.

Espero que les haya gustado este tutorial. Que está algo larguito, pero en sí es fácil. Lo hice con mucho pasos exageradamente porque así sería más comprensible (-w-). Bueno me retiro y regreso más tarde, tal vez por la noche. Bye nyappy!!!


7 comentarios:

  1. Buena tutorial!!!Que mal que para mi plantilla no aplique,pero es una buena tutorial!!

    ResponderEliminar
    Respuestas
    1. Uhmm (u.u) que pena que a tu template no se le pueda aplicar esto.

      Eliminar
  2. Te sigo este bonito blog ^^ gracias por avisarme lo del concurso, ya me anote. Besos :D

    ResponderEliminar
  3. *0*ya lo estoy poniendo para mi blog que haria sin ti????

    ResponderEliminar
    Respuestas
    1. ^^ de nada kumy lo hago con mucho gusto :3

      Eliminar
  4. No se por qué pero en mi blog pongo F3 y pongo Headings y no me aparece nada u.u

    ResponderEliminar

HOME STAFF AFILIATE FOLLOW CONTACT
HOME STAFF AFILIATE FOLLOW CONTACT
Copyright© Nemuri Kuma | Powered by Blogger.
Design n' Blogger template by Kuma.