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. 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:
Imagen relacionada Resultado de imagen para background tumblr pastel Imagen relacionada
Resultado de imagen para background tumblr pastel Imagen relacionada Imagen relacionada Resultado de imagen para background tumblr pastel
Resultado de imagen para background tumblr pastel Resultado de imagen para background tumblr pastel Imagen relacionada Resultado de imagen para background tumblr pastel Resultado de imagen para background tumblr pastel
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:
☺♥♫△☆ღ