Tutorial: Personaliza tu scrollbar

Imagen relacionada
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 :3 Bueno vamos a empezar:

Para obtener este:
Nos vamos a:
Plantilla / Editar HTML / Click en el recuadro / CTRL+F y buscas:
]]></b:skin
Pegamos arriba de ]]></b:skin> el siguiente código:

::-webkit-scrollbar {
height: 12px;
width: 15px;
background: #FA58D0;
}
::-webkit-scrollbar-thumb {
background: #00BFFF;
-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;
}
Rojo: Colores del scrollbar [para obtenerlos click AQUI]
Azul: Forma del scrollbar

Para obtener este:
Plantilla / Editar HTML / Click en el recuadro / CTRL+F y buscas:
]]></b:skin>
Pegamos arriba de ]]></b:skin> el siguiente código:

::-webkit-scrollbar {
height: 12px;
width: 15px;
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;
}
Rojo: Url del los fondos
Azul: Forma del scrollbar

Lo siguiente son las formas que les puedes dar a tus scrollbars

¿Como cambiarlo?
Fácil, copias el código de la forma que quieres y en la parte azul de los códigos, lo borras y reemplazas por el código de la nueva formita del scrollbar.

Forma 1:
-Moz-border-radius: 5px; border-radius: 5px;

Forma 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;

Forma 3:
-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;

Forma 4:
-Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px; -Moz-border-left-bottomleft: 50px; border-bottom-left-radius: 50px;
Eso es todo
:D

1 comentario:

  1. Es hermoso, lo usare para mi blog, Ojala puedas pasarte :3
    http://maggychanblog.blogspot.mx/

    ResponderEliminar

Comenta con respeto ^-^

¡Gracias por tu comentario!

Emojis:
(∩ω∩) | (>△<) | (>▽<) | (⊙▽⊙) | (╯ω╰) | (☆▽☆) | (≧ω≦) | ≡(▔﹏▔)≡ | ( ̄(エ) ̄) | (・∀・ ) | (ノ◕ヮ◕)ノ*:・゚✧ | (^▽^) | (¬_¬) | ✖‿✖ | (¬‿¬) | (─‿‿─) | (~ ̄▽ ̄)~ | (︶ω︶) | (+_+) | (。♥‿♥。) | (✿ ♥‿♥) | ●ᴥ●

Simbolos:
☺♥♫△☆ღ