2/5/15

Tutorial {Personalizando el scroll bar de tu blog}


Hola! amiwis (?) hoy les traigo este tutorial sobre como personalizar tu scrollbar wiii! (?) ok, ahora si les puedo pasar captures, antes no podía porque no se que le pasaba a mi laptop que se volvió medio loca y no sacaba captures pero ahora si!:
Lo que indica la flecha es el scroll bar
  1. Vamos a Plantilla > Editar HTML
  2. Buscamos (con Ctrl + F) <b:skin> y le damos clic a los puntos suspensivos de la derecha
  3. Buscamos: ]]></b:skin>
  4. Arriva vas a poner este código:
::-webkit-scrollbar {
height: 12px;  /* Altura del scroll bar */
width: 15px; /* Anchura del scroll bar */
background: #FA58D0; /* siquieres poner una imagen en vez de un color cambia esta linea por background-image:url(URL del fondo que quieres); */
}
::-webkit-scrollbar-thumb {
background: #00BFFF; /* siquieres poner una imagen en vez de un color cambia esta linea por background-image:url(URL del fondo que quieres); */
-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;}
  • Los bordes del botón (Si no los quieres borra lo que esté en negrita) puedes editarlo a tu gusto basado en las imágenes que se muestran a continuación:
Creditos a Anniz Blog por la imagen
  1. -Moz-border-radius: 5px; border-radius: 5px;
  2. -Moz-border-radius-bottomRight: 50px 25px; border-bottom-right-radius: 50px 25px; -Moz-border-radius-topLeft: 50px 25px; border-top-left-radius: 50px 25px;
  3. -Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;
  4. -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px; -Moz-border-left-bottomleft: 50px; border-bottom-left-radius: 50px;
Y Listo! solo guardas y ya! Bye!

4 comentarios:

~No seas ofensivo
~No utilices malas palabras
~Déjame una sonrisa