4 ago 2022

Personalizar seguidores + Botones

|| ||



Hey babies! Estaba yo probando este tutorial cuando me he dado cuenta que blogger o google o whatever ya no permite personalizar los seguidores al 100% (es decir, le podías cambiar los colores, la fuente, etc) PERO un poquito sí y eso es lo que voy a enseñar hoy, que se puede decir que son dos tutoriales: el primer a ponerle efectos al gadget de seguidores y el otro a cómo usar sólo un botoncito para seguir el blog. Ya veréis como ambos son muy simples, así que let's go!.

Efectos

Antes era necesario ir al código fuente de nuestro blog, pero ahora no ya que sólo vamos a aplicar los efectos y no a modificar colores, fuentes, etc.

1. Vamos a Tema > Personalizar > Editar HTML y buscamos ]]></b:skin> y encima pegamos alguno de los siguientes códigos:

Efecto opacidad

#Followers1 {
opacity: 0.2; -webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}

#Followers1:hover {
text-decoration: none !important;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease; opacity: 1;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}

Efecto blanco y negro

#Followers1 {
text-decoration: none !important;
-webkit-filter: grayscale(100%);
-webkit-transition-duration: .90s;
margin-bottom: 2px;
}

#Followers1:hover {
text-decoration: none !important;
-webkit-filter: grayscale(0%);
-webkit-transition-duration: .90s;
margin-bottom: 2px;
}

Efecto sepia

#Followers1 {
text-decoration: none !important;
-webkit-filter: sepia(100%);
transition:all 1s ease;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
margin-bottom: 2px;
}

#Followers1:hover {
text-decoration: none !important;
-webkit-filter: sepia(0%);
transition:all 0.4s ease;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
margin-bottom: 2px;
}

Solo botón

Para tener sólo el botón de seguidores, lo único que necesitamos es el ID de nuestro blog, el cual obtendremos en la bara de direcciones cuando entramos en la configuración del blog (da igual en qué sección).

Una vez que tenemos nuestra ID, añadiremos un nuevo gadget HTML/JavaScript donde pondremos el siguiente código:

<a href="http://www.blogger.com/follow-blog.g?blogID=ID DEL BLOG" title="Texto al pasar el ratón" target="_blank"><img src="URL de la imagen" border="0" /></a>

Hay que modificar todo lo que está en negrita. Si no te interesa que haya un texto al pasar el ratón, quita lo de: title="Texto al pasar el ratón"

Botones

Hace un tiempo hice botoncitos para seguidores de muchísimos colores. Espero que te gusten ʕ•ᴥ•ʔ









No hay comentarios:

Publicar un comentario

Hey! Si has llegado hasta aquí es porque has leído todo el post y si no, intenta hacerlo, tal vez haya escrito algo sobre mí, el blog o cualquier tema que a mi me parezca importante.

Aquí dejo algunos puntos a tener en cuenta a la hora de comentar:

Por favor, sé respetuoso/a.
Si tienes cualquier duda que no se pueda resolver por comentarios o cualquier pedido, hazlo en Contacto.
¿Quieres afiliarte? Puedes dejar el link en la sección Afiliate.
¡Gracias por visitar el blog!

Aquí dejo algunos Kaomojis por si quieres usarlos:

(* ^ ω ^) ☆ *:… o (≧ ▽ ≦) o…: * ☆ (o ^ ▽ ^ o) (‘. • ω •.`) (o · ω · o) (@ ^ – ^) ヽ (* · ω ·) ノヽ (o ^ – ^ o) ノ (^ 人 ^) (^ ▽ ^) (¯ ▽ ¯) (‘. • ᵕ •.`) (≧ ▽ ≦) / (♡ ˙)˙ ♡) (* ¯ ³ *) ♡ (* ♡ ∀ ♡) ♡ (¯ ▽ ¯) / ♡ (> ﹏ <) (; ⌣_⌣) (–_–) (╯_╰) (T_T) (╥ω╥) (O_O;) (⊙_⊙) (⌒ ▽ ⌒) (^ – ^ *) / (o’ω`o) ノ (✧∀✧) / (~ ▽ ¯) ~ (^ _ ^ ♪) (~ ˘ ▽ ˘) ~ (˘ ▽ ˘) っ ♨ (͡ ° ͜ʖ ͡ °)

O si estás usando Windows, usa la combinación de teclas Windows + . (punto) para otros símbolos y/o emojis.