16 ago. 2014

Tutorial: Cómo editar el gadget de los seguidores


  Esta es una sección en la que publicaré tutoriales, ya sea con códigos  o no (además de trucos), para modificar y/o agregar cosas a sus blogs.
   En el menú del blog, en Secciones, pueden encontrar la pestaña "Trucos, códigos y más...". Allí hay una lista de las entradas de la sección, que se publicarán semanalmente los sábados (:




Cómo editar el gadget de los seguidores


¡¡Hola, lectores!! ¿Cómo pasaron este sábado? Yo recorriendo librerías: Yenny, La Boutique del Libro y Kell ^.^

Entrando en tema, cómo el título indica, hoy les traigo un tutorial sobre cómo personalizar el gadget de seguidores. Más específicamente, ponerle una imagen de fondo así como editarle los bordes.        


Primera mente hay que ir a Plantilla --> Edición HTML
Cómo les expliqué en los Tutoriales Aclarativos de hace unas semanas, hacen clic en la plantilla y aprietan Ctrl + f. En el cuadro de búsqueda escriben esto:
 ]]>< /b:skin> 
Una vez que lo hayan encontrado, justo antes de esa línea, pegan el código que les daré más abajo.

Advertencia: antes de pegar el código:
Personalízalo (elige colores, la imagen de fondo, los bordes) y una vez que lo tengas listo, pégalo en tu plantilla y guarda los cambios.
La imagen de fondo tienen que subirla o una página para subir imágenes (por ejemplo, Imageshack) o a blogger. ¿Por qué? Es debido a que en el código deben pegar la url de esa imagen.
Los colores los pueden sacar de esta página, seleccionan el que les guste, lo copian y lo pegan junto con un #. De esta manera:    #FFFFFF  (en este ejemplo, es el código para el color blanco).

#Followers1
.widget-content{
height:auto;
width:auto;
background-image:url(URL DEL FONDO);repeat; repeat; padding: 5px;
border: 2px dashed # 59A4BA ;/*Color de borde Tamaño del borde Tipo de borde*/
border-radius: 8px;/*Bordes redondeados. Si se quiere redondear más, pon un número más grande*/
}

En el caso de no querer un borde, únicamente tienes que borrar la siguiente línea.

border: 2px dashed #F0CDFC ;/*Color de borde Tamaño del borde Tipo de borde*/

Y si no quieres las esquinas redondeados elimina esta línea:

border-radius: 8px;/*Bordes redondeados. Si se quiere redondear más, pon un número más grande*/

Por último, en esta página tienen los diferentes tipos de bordes que se pueden hacer, y pueden ir probando cuál borde quieren en su gadget. Y por supuesto, se aplica a cualquier borde que quieran hacer, no únicamente este gadget ;)


Es corto y sencillo, pero un paso más para diseñar el blog a gusto ;)
Nos leemos!!

4 comentarios:

  1. Me encanta la idea de que subas tutoriales, aunque justamente este no está entre mis intereses, voy a ver qué más subiste. Seguramente hay algo que necesite porque la realidad es que no sé nada ni de photoshop, ni de códigos, ni nada, jajajaja.
    Nos leemos! - Miranda

    ResponderEliminar
    Respuestas
    1. Gracias, Miranda!! Sí, a mí me resultan muy útiles los blogs con estos tutoriales. Yo apenas tengo unas entradas, recién hace poco empecé a publicarlas semanalmente, pero está teniendo buena aceptación ^.^
      Si quieres algún tuto en específico, me dices, que no tengo problema en poner alguno y, si quieres, te puedo pasar algunos blogs muy buenos con tutoriales de este estilo ;)

      Besos!!

      Eliminar
  2. Genial el tutorial!!
    Súper bien explicado y queda re lindo! :)
    Gracias por compartirlo ^^

    Besote

    ResponderEliminar
    Respuestas
    1. A vos por leerlo, Meli!! Te dije que era un obse de los tutos jaja

      Un abrazo, guapa :)

      Eliminar

Gracias por pasar!! Recuerden que un blog se alimenta de sus comentarios ;)

Eso sí, por favor:
*Comenten con respeto, en caso contrario tendré que eliminar el mensaje.
*Avisen si van a decir un Spoiler, así nos ahorramos disgustos.
*Si quieren contactarme, vayan a la pestaña Contacto.

Diviértanse ^.^

¿Te gustó la entrada? ¡Compártela!