Scroll Bar Efecto Bisel


Hola queridísimos bloggers qué tal, cómo están? espero que fenomenal
En la entrada de hoy les traigo un tutorial para poner un scroll Bar

  • Scroll Bar efecto kawaii   


Se puede colocar de dos formas

Forma 1:En un gadget

  • Diseño
  • Añadir gadget javascrip

<style>
::-webkit-scrollbar{ width:7px;height:7px;} /* Largura da barra */
::-webkit-scrollbar-track-piece{background-color:#fff;} /* Fondo de la barra larga */
::-webkit-scrollbar-thumb:vertical{height:50px; background-color:#6b8bba; /* Estilos da barra vertical */
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #6b8bba; /* Borde de la barra */
::-webkit-scrollbar-thumb:horizontal{width:50px; background-color:#6b8bba; /* Estilos de la barra horizontal */
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #6b8bba; /* Borde de la barra */
</style>

Forma 2:Incrustada en el código HTLM

  •  Plantilla
  • Editar HTLM 
  • Crtlr+F & buscar & colocar antes de ]]></b:skin> 

::-webkit-scrollbar{ width:7px;height:7px;} /* Largura da barra */
::-webkit-scrollbar-track-piece{background-color:#fff;} /* Fondo de la barra larga */
::-webkit-scrollbar-thumb:vertical{height:50px; background-color:#6b8bba; /* Estilos da barra vertical */
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #6b8bba; /* Borde de la barra */
::-webkit-scrollbar-thumb:horizontal{width:50px; background-color:#6b8bba; /* Estilos de la barra horizontal */
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #6b8bba; /* Borde de la barra */
}
Esas son las dos formas de colocarlo 

Espero que este tutorial les haya gustado, es un tutorial muy fácil que deja bonitos resultados un beso enorme desde aquí :D y que pases una gran semana 

Si te gustó esta entrada deja un comentario