Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Personaliza la Barra de Desplazamiento

Y continuando al anterior post y antes de irme a dormi (ya son las 4am). Este es el último tutorial del día o bueno de la madrugada. LOL. Es que de seguro en la noche volveré con más.

Bueno ya aprendimos a como colocar barras de desplazamiento a la sección de las entradas. Ahora a PERSONALIZARLA! Existen dos formas de personalizarlas, A COLORES y CON FONDO. No se preocupen que ambos métodos se los voy a enseñar.

Aquí viene el PASO A PASO.

--- A COLORES ---
CLIC EN LA IMG. PARA AGRANDAR

PRIMERO: Nos vamos a 'Diseño → Plantilla → Edición de HTML' y buscamos (usa Control+F) ]]></b:skin>

SEGUNDO: Pega el sgte. código justo arriba de ]]></b:skin>



TERCERO: Clic a 'Vista previa' y WUJUUUUUUU ya está! Y ahora 'Guardar plantilla'.

Nota: Cambia el color de ambas barras modificando los códigos 'background'.

 --- CON FONDO --- 

Repetimos los mismos pasos que en el ejemplo de A COLORES, sólo que en el SEGUNDO paso el código cambia por...



TERCERO: Clic en 'Vista previa' si todo va bien, clic en 'Guardar plantilla'. LISTO!

Nota:

- El primer código 'background-image' es del fondo de la barra y, el segundo código 'background-image' es de la barra que se desplaza dentro.

- El código URL que piden para ambas barras lo puedes reemplazar con, el código URL de una img. de la web o puedes crear tu img. en photoshop y subirlo a la web.

- Usa 'ImageShack' si piensas usar una img. de tu propia creación, para subirla a la web.

Ahora ya finalizando les dejo 4 códigos más ¿DE QUE? ...Pues son los códigos de los diferentes tipos de barras de desplazamiento (Scrollbar).



(a) -Moz-border-radius: 5px; border-radius: 5px;

(b) -Moz-border-radius-bottomRight: 50px 25px;
      border-bottom-right-radius: 50px 25px;
     -Moz-border-radius-topLeft: 50px 25px;
      border-top-left-radius: 50px 25px;

(c) -Moz-border-radius-bottomRight: 50px;
      border-bottom-right-radius: 50px;
     -Moz-border-radius-topLeft: 50px;
      border-top-left-radius: 50px;

(d) -Moz-border-radius-topLeft: 50px;
      border-top-left-radius: 50px;
     -Moz-border-left-bottomleft: 50px;
      border-bottom-left-radius: 50px;

Bien eso es todo por ahora! Y ahora si me voy a dormir (/-(エ)-\) MUERO DE SUEÑOOOOOOOOOOOOOOOOOOOOOOOOO -infinito-
Bye! ヾ(´(エ)`ノ゙

2 comentarios:

  1. esto taba buscando *-*¡por fin¡¡jiji mas antes lo tenia ,pero se me desaparecio ,y no me acordaba donde lo encontre , muchas gracias por poner este tutorial :3 wii¡

    ResponderEliminar
    Respuestas
    1. De nada, me alegra que te haya sido de ayuda...

      más bien yo lo tengo aquí porque me paro olvidando los códigos XD

      Eliminar

HOME STAFF AFILIATE FOLLOW CONTACT
HOME STAFF AFILIATE FOLLOW CONTACT
Copyright© Nemuri Kuma | Powered by Blogger.
Design n' Blogger template by Kuma.