25 jul 2015

[Tutorial] Blockquote ~6~

Heeey♥ Como están~? Yo genial! Hoy os traigo un blockquote con efecto hecho por mi :D Mirando la vista previa sabréis como es ^^
Para poner ese blockquote en tu blog, debes ir a Plantilla > Edición HTML Ctrl+f y buscas ]]></b:skin> Y pegas antes de ]]></b:skin> el siguiente código:
blockquote {
background: #000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtJPBMNGQfghAXFHmtnygJuTbX6HlOXsMbOtwHBeueYCERGMynNnwS72q85JmfXuaDr8LJBCJfICk6yXtGI5IhPG6Iwl6LEx874CEqpAtiowIb9ezmHgcI-f-hoLEGOOo-rxlu0AKqU3U/s1600/appfondo.png") repeat; /*Fondo*/
font-family: Courier;   /*Nombre de Tipo de Letra*/
Border: 2px dotted #f886a8;   /*Color del borde*/
Border-top: 2px solid #f886a8;   /*Color del borde*/
Border-bottom: 2px solid #f8b0c6;   /*Color del borde*/
font-size: 14px; /*Tamaño de Letra*/
color: #f886a8; /*Color de Letra*/
text-align: center;  /*Texto centrado (Center=Centro ; Right=Derecha ; Left=Izquierda)*/
padding: 10px;
-webkit-transition-duration: .50s;
border-radius: 5px  /*Bordes redondeadas*/
}
blockquote:hover {
background: #000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtJPBMNGQfghAXFHmtnygJuTbX6HlOXsMbOtwHBeueYCERGMynNnwS72q85JmfXuaDr8LJBCJfICk6yXtGI5IhPG6Iwl6LEx874CEqpAtiowIb9ezmHgcI-f-hoLEGOOo-rxlu0AKqU3U/s1600/appfondo.png") repeat; /*Fondo*/
font-family: Courier;   /*Nombre de Tipo de Letra*/
Border-left: 2px solid #f886a8;   /*Color del borde*/
Border-top: 3px solid #f886a8;   /*Color del borde*/
Border-right: 2px solid #f8b0c6;   /*Color del borde*/
Border-bottom: 3px solid #f8b0c6;   /*Color del borde*/
font-size: 14px; /*Tamaño de Letra*/
color: #f886a8; /*Color de Letra*/
text-align: center;  /*Texto centrado (Center=Centro ; Right=Derecha ; Left=Izquierda)*/
padding: 10px;
-webkit-transition-duration: .50s;
border-radius: 10px  /*Bordes redondeadas*/
Y listo! Si no te funciona prueba yendo a Diseño > Avanzado > Añadir CSS y poniendo el código ^^
Cualquier duda me dicen!! :D Y si lo usan o comparten, pongan créditooosss~
Hasta pronto~♥
post signature

No hay comentarios:

Publicar un comentario