Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Personalizar la barra de desplazamiento con css





Hoy os sugiero un efecto muy elegante que vi en Terreno Blogger y que consiste en personalizar la barra de desplazamiento o scroll bar, simplemente con tan sólo css, es muy fácil de implantar en tu plantilla. La barra de desplazamiento, es aquella que aparece en la parte derecha de la pantalla de tu web o blog y permite que tus usuarios puedan desplazarse hacia abajo y hacia arriba de la página del blog.


Con está barra insertada en tu web o blog, podrás darle un toque de sofisticación, diseño, y elegancia, sin igual. Está barra de desplazamiento me llamó la atención.


Tus usuarios podrán desplazarse con más suavidad y sutileza, y mejorarás enormemente la imagen de tu site. Por ejemplo, si tienes un blog muy profesional y bien diseñado, y la barra de desplazamiento es de la vieja escuela, romperá los esquemas profesionales que tiene el lugar y no serán tan homogéneos.


La única pega que tiene este efecto, es que no se visualiza en todos los navegadores, sólo en los navegadores siguientes: Google Chrome, Opera, y Safari.


Por lo tanto, si quieres visualizar este efecto correctamente, debes de usar al entrar en este blog, los navegadores, anteriormente mencionados. Ver demo:



Demo!



Ahora sin más preámbulos, vayamos a la tarea que nos concierne para colocar e insertar este fenomenal efecto en Blogger, sigue las pautas a continuación:

  • Ves a Blogger después debes de ir a Plantilla y luego a Editar Html
  • Ahora debes de buscar presionando (Ctrl+F) la etiqueta ]]></b:skin>
  • Justo antes de dicha etiqueta pega el siguiente código que ves abajo

/* --- Barra de desplazamiento:www.aizumblog.com--- */
::-webkit-scrollbar {
background:#fff;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #cc4411 10%,#cc4411 51%);
}
::-webkit-scrollbar-track {
}

Por último deberás de cambiar el color hexadecimal que más se adecue a tu estilo o diseño de tu web o blog, espero que os haya gustado y que comentéis. Enjoy it.


Aizum Blog, martes, mayo 07, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9