Personalizar la barra de desplazamiento con CSS

, No hay comentarios.

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.

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. 

No hay comentarios. :

Publicar un comentario

Antes de comentar recuerda:
⇢ No se permite el uso de vocabulario inapropiado.
⇢ Se lo más especifico posible.
⇢ Si su comentario es una pregunta por favor sea paciente y será respondida dentro de las 24 horas por fedeemen o cualquier otro usuario.

Códigos para utilizar:
⇢ Para insertar un enlace, utiliza la etiqueta: <a href="URL">TITULO</a>
⇢ Para insertar un código, utilice la etiqueta: <i rel="pre">CÓDIGO</i>
⇢ Para insertar una imagen, utilice la etiqueta: <i rel="image">URL</i>
⇢ Para insertar un título, utilice la etiqueta: <b rel="h3">TEXTO</b>
⇢ Para insertar una nota, utilice la etiqueta: <b rel="quote">TEXTO</b>
⇢ Para insertar texto en negrita, utilice la etiqueta: <b>TEXTO</b>
⇢ Para insertar texto en cursiva, utilice esta etiqueta: <i>TEXTO</i>

¿De quien es esta página?:
⇢ Sluntamy fue creado el 25 de enero de 2010 por fedeemen.

Suscribirse a: Comentarios de la entrada ( Atom )

Últimos comentarios