4/9/13

dos Recursos en uno bloquotte e barra lateral del blog (scroll bar)

 hola , mis seguidoras bonitas !! buenas
jejejeje wow ayer me la pase mega hello muy bonito ambiente la verdad tome algunas fotos para el recuerdo
Hace mucho que me pidieron el scroll como cambiarlo
aqui les traigo un tutorial
no se preocupen si ya saben se salta la explicación porque les mostrare un scroll bar muy bonito
y como vi que era poco le voy a agregar el bloquotte explicacion tbm y si ya saben se la salta esa parte porque tbm sera lindo
a y  tengo un premio luego lo tomo y la lista de canciones jojojojo es very secret
si alguien le interesa esto se las revelo ok ? 
are you ready ?)
go




nos vamos a lo  nuestro
NOTA : PARA VER MEJOR LAS IMAGENES DALE CLIC EN LA IMAGEN GRACIAS !!
primero scroll bar
ejemplo:


 plantilla- editor html

            y para que salga el buscador especial le damos clic adentro de los codigos hmtl
y buscamos
                                                      ]]></b:skin>



y arriba de esto le pegamos


lo siguiente
ejemplo :
este el que les voy a pasar :
codigo 
recuerda arriba skin 

::-webkit-scrollbar {height: 12px;width: 7px;background: #fff;}::-webkit-scrollbar-thumb {background-color: #F6CDFA;-moz-border-radius: 10px;border-radius: 10px;border: 2px solid #fff;}

explicación 

el tamaño de la barrita morada 

el color del fondo afuera de la barra

el color de la barra es lila puedes modificarlo como tu quieras 

El estilo del borde

asi 
cortesia annyz  imagen y formas 
ahora 

1    -Moz-border-radius: 5px; border-radius: 5px;

 2    -Moz-border-radius-bottomRight: 50px 25px; border-bottom-right-radius: 50px 25px; -Moz-border-radius-topLeft: 50px 25px; border-top-left-radius: 50px 25px;

3  -Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;

4     -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px; -Moz-border-left-bottomleft: 50px; border-bottom-left-radius: 50px;

puede cambiarlo como ustedes quieran la forma 

y por ultimo 
el borde del botoncito 
imagen de cortesia annyz kawaii
 y
vista previa 
y si te salio bien 
tadan 
tienes el scroll bar modificado !! 



Ahora el bloquotte

el mismo procedimiento 

arriba de skin 

copiamos esto 

blockquote {color: #aaa;border-left: 10px solid #D8CEF6;border-top: 2px solid #D8CEF6;border-right: 10px solid #D8CEF6;border-bottom: 2px solid #D8CEF6;padding: 4px;margin:1em 20px;-webkit-transition: 1s;}
blockquote:hover {color: #fff;box-shadow: inset 530px 0 0px 0 #EDABFD;-webkit-transition: 1s;cursor: pointer;}
Explicacion
el tamaño el color y el borde de lado izquierda y derecha de tu bloquote 

el tamaño el color y el borde de arriba y abajo  

Recuerda que arriba esta los nombres de los bordes y puedes variar solid dotted dashed double etc

el color de fondo 

el color ahover que ven que esta morado  pueden cambiarlo por el que mas les guste





y listo puede modificarlo como quieran

yeah chocalas lo lograstes!! 

pero como la activamos o que?? 
muy fácil


seleccionamos lo que quieres que este dentro del bloquotte
aqui esta tu ejemplo  

y en donde esta cita le das clic ahí y listo





creditos dos   imagenes y los codigos de formas de bordes
http://annyzkawaiiworld.blogspot.mx/2012/04/personalizando-el-scroll-bar.html
pero la explicación y la molestia de encontrar un scroll y bloquotte bonito son parte
mias


REGLAS PORFAVOR 
este material es 100% hecho y publicado  por :
                            





y nos vemos hasta la proxima
sayonara!!

Hii muchas gracias por venir no olvides dejar un estelarcomentario

6 comentarios :

  1. ¡¡Muy lindo el tutorial!! te quedo hermoso <3 Tal vez lo use,no personalizé mi bloquotte todavia ;____; Saludos!

    ResponderEliminar
  2. muy buen tutorial, gracias por el :D

    ResponderEliminar
  3. Me encato el tuto !!! Jooo yo con lo q me gustan estas canciones ;( revelamelo porfiiis n.n
    Gracias no se q aria yo sin tus tutos !!!! >.<

    ResponderEliminar
  4. Que chula la tutorial!!gracias!
    por cierto adoro la canciones del blog
    saludos

    ResponderEliminar

Muchas gracias por dejar tu dulce comentario ^^
reglas y recuerden :
✿nada de conflictos ni peleas ok
✿no spam y
✿no groserías o ofensas a otros usuarios incluyendo al autor
SI no obedeces estas reglas que te pongo simple borro tu comentario por el bien de mi blog y de todos
muchas gracias por tu dulce atención
^u^ ♥ que tenga un Dulce pero mágico dia
sayonara

}