Con este tutorial realmente te mostrara como crear un blockquote impresionante y atractivo para tus mensajes en blogger o sitios web. Este blockquote cambiará de color cuando el cursor del ratón se pasa sobre él mismo. Pero este truco o efecto en blockquote es excepcional! Sólo echar un vistazo al ejemplo de blockquote a continuación.
Pasa el cursor del mouse cursor por (blockquote)o cita de abajo.
La estilizacion usada en crear esta cita al pasar el cursor del mouse sobre la misma es una idea de lo que realmente puedes hacer con Css.Si deseas puedes usar letras personalizadas,colores, y imagenes para darle un estilo distinto.
Este codigo de css puedes utilizarlo para uso comercial o persnal los bloggeres y a los webmaster se les pide que enlacen este a www.ciudadblogger.info si desean compartir este tutorial con seguidores o lectores.
Atractivo verdad? Ahora aprendamos como anadir como anadir el efecto de bombilla encendida. Este codigo de css puedes utilizarlo para uso comercial o persnal los bloggeres y a los webmaster se les pide que enlacen este a www.ciudadblogger.info si desean compartir este tutorial con seguidores o lectores.
Anadir efecto de bombilla encendida a las citas de tu blog
1.Entra en blogger>>Plantilla>>Editar Html2.Busque el siguiente codigo ]]></b:skin>
3.Pegue el codigo de abajo de CSS antes de ]]></b:skin>
.codigo1 {
overflow:auto;width:520px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoIRYlv7IosE9AhAKIulnP9ZifpuLHlLlWsVIiwrzd9aNSHpttORGtVB5eYsxAKgQ3Q3hFHZkoc3uH-CxglMjuNrqB_Silg5u-K2qukYAbtg7A78R8s5yE08O0_4UQKDYooLCaWr5BAB5U/s1600/rb+light+bulb.jpg) repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.codigo1:hover{
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja-14L5IJLBDsiplbHAbZe_I9tkUBkV_qh2V0kYg-en_f2X-FH-fm6EitSMGPNFx7HaesCSfgkV3H_SGy86qLY58FvXt3vOhGn-zGjGCOKkBM2ZbDoVMZcFh624uK1eupzWXsupg2WpmCM/s1600/rb+light+bulb+2.jpg) repeat-y top left;
color:#FEF9BF;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}
overflow:auto;width:520px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoIRYlv7IosE9AhAKIulnP9ZifpuLHlLlWsVIiwrzd9aNSHpttORGtVB5eYsxAKgQ3Q3hFHZkoc3uH-CxglMjuNrqB_Silg5u-K2qukYAbtg7A78R8s5yE08O0_4UQKDYooLCaWr5BAB5U/s1600/rb+light+bulb.jpg) repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.codigo1:hover{
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja-14L5IJLBDsiplbHAbZe_I9tkUBkV_qh2V0kYg-en_f2X-FH-fm6EitSMGPNFx7HaesCSfgkV3H_SGy86qLY58FvXt3vOhGn-zGjGCOKkBM2ZbDoVMZcFh624uK1eupzWXsupg2WpmCM/s1600/rb+light+bulb+2.jpg) repeat-y top left;
color:#FEF9BF;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}
4.Ahora cuando vayas a poner una cita en tu pagina cambia de Redactar a Html y pon la siguiente etiqueta:
<div class=''>Pon la cita o blockquote deseada aqui</div>
Sustitute "Pon la cita o blockquote deseada aqui" por tu frase,oracion o script que desees publicar.
Listo ya podran disfrutar de un efecto iluminado a tus citas o blockquotes.
0 comentarios:
Publicar un comentario