Barra Desplazadora Perzonalizada


DESCRIPCIÓN:
Coloca una barra de Desplazamiento en tu Blog Profesional en Blogger, con neste recurso. Un ejemplo lo puedes ver en la barra desplazadora de SiverGame.

PASOS PARA INSTALAR TU BARRA DESPLAZADORA:
1. Ingresa a tu Blog en Blogger
2. Luego ingresa a Plantilla y Edicíón HTML:


3. Ahora busca ( CTRL + F) ]]></b:skin> y justo encima de él pega cualquiera de los códigos de tu preferencia.


ESTILO DE BARRA DE DESPLAZAMIENTO:


ESTILO #1:


/* Scrollbar Personalizado Estilo 1 */
::-webkit-scrollbar{
       width: 12px;
 }
 ::-webkit-scrollbar-track{
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      border-radius: 10px;
}
 ::-webkit-scrollbar-thumb{
     border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
ESTILO #2:


/* Scrollbar Personalizado Estilo 2 */
::-webkit-scrollbar{
      height:14px;
      width:14px;
      background:#eee;
      border-left:1px solid #ddd
}
::-webkit-scrollbar-thumb{
      background:#ddd;
      border:1px solid #ccc
}
::-webkit-scrollbar-thumb:hover{
      background:#c3c3c3;
      border:1px solid #c3c3c3
}
::-webkit-scrollbar-thumb:active{
      background:#a0a0a0;
      border:1px solid #a0a0a0
}


ESTILO #3:


/* Scrollbar Personalizado Estilo 3 */
::-webkit-scrollbar{
     height:12px;
     width: 12px;
     background: #eef6fd;
}
::-webkit-scrollbar-thumb{
     background-color: #79bbf8;
    -moz-border-radius: 10px;
     border-radius: 10px;
}


FUENTE: Recursos-Web 

Publicar un comentario

Artículo Anterior Artículo Siguiente