Tutorial: Personaliza tu scrollbar

Holaaaaa! Bueno en este tuto les enseño a personalizar el scrollbar a tu gusto^^ es muy fácil y te queda muy bonito :3 Por cierto, este tuto es de annyz. Bueno vamos a empezar:

Para todos los scrollbars:

Nos vamos a:

Plantilla / Editar HTML / Click en el recuadro / CTRL+F y buscas:

]]></b:skin

Copiamos y pegamos arriba de ]]></b:skin> el código del scrollbar que elijas:


Scrollbars simples {solo colores}

1) Simple con forma

::-webkit-scrollbar {
height: 12px;
width: 10px;
background: #E6C5FF;
}
::-webkit-scrollbar-thumb {
background: #CB85FF;
-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;
}

 

 2) Simple

::-webkit-scrollbar {
height: 12px;
width: 10px;
background: #E6C5FF;
}
::-webkit-scrollbar-thumb {
background: #CB85FF;
}

Rojo: Colores del scrollbar [para obtenerlos click AQUI]
Azul: ancho del scrollbar

Scrollbars con backgrounds {fondos}

3) Con background y forma

::-webkit-scrollbar {
height: 12px;
width: 10px;
background-image:url(URL DEL FONDO);
}
::-webkit-scrollbar-thumb {
background-image:url(URL DEL FONDO);
-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;
}

 

4) Con background simple

 

::-webkit-scrollbar {
height: 12px;
width: 10px;
background-image:url(URL DEL FONDO);
}
::-webkit-scrollbar-thumb {
background-image:url(URL DEL FONDO);
}

Rojo: Url del los fondos
Azul: Ancho del scrollbar

Para obtener los códigos de los colores que quieras: HTML color editor

Backgrounds:
  
  
   

Eso es todo

:D