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:
 Resultado de imagen para background tumblr pastel image
Resultado de imagen para background tumblr pastel Imagen relacionada Resultado de imagen para background tumblr pastel
Resultado de imagen para background tumblr pastel Resultado de imagen para background tumblr pastel 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

¡Gracias por tu comentario!

Emojis:
⸜(。˃ ᵕ ˂ )⸝♡ | ૮ ˶ᵔ ᵕ ᵔ˶ ა | (>▽<) | ପ(๑•ᴗ•๑)ଓ ♡ | (╯ω╰) | (☆▽☆) | (≧ω≦) | ૮ • ﻌ - ა | ଘ(੭ˊᵕˋ)੭ | (・∀・ ) | (¬_¬) | (ノ◕ヮ◕)ノ*:・゚✧ | ฅ^•ﻌ•^ฅ | (¬‿¬) | (─‿‿─) | (~ ̄▽ ̄)~ | (︶ω︶) | ٩(ˊᗜˋ*)و ♡ | (╥﹏╥) | (✿ ♥‿♥) | ●ᴥ●

Simbolos:
♡♥♫△☆ღ