Tutorial {Estilo Blockquote

Ohaiio sekaiii, yo ya por fin en vacaciones oficiales, yeii estoy tan feliz, ya hice el registro de mis materias, ha sido un moento horrible, estresante y desesperante, ja ja, de verdad, la pagina estaba saturadisima, no tengo el mejor horario pero lo bueno es que alcance lugar, saldre como cuatro dias a las nueve de la noche pero peor es nada, otro semestre en la tarde, ya que.

Esta vez les traigo un estilo blockquote, mucho saben que es pero por si no, le dire como mi definicion porque en si no sabria como describirlo.

Bueno en blockquote sirve cuando insertas alguna cita, pero la mayoria de los bloggers lo utilizan para darle una diferente apariencia a su entrada, en mi caso lo uso para ponerles los codigos html.

Esa es la previa de como quedará.

Para colocarlo busca lo siguiente:

blockquote {

y borras todo lo que hay despues del corchete, lo remplazas por el siguiente codigo:

blockquote {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVIQP4hPvzOC9koS3ZMxbeV-YB9Clt4lyAr96hqEx6lHy-hGI3pj_vOcvpIBm1pvB1zDfVeyBpzw7UrX1fUZiw_KUGCypLO1F2l1w_rhTd1E6QevQBcPsk6FHsT08LbgQi9CEHJXyFxw4w/s1600/tumblr_lxwynw0Pdg1r9g6hvo5_250.png);

padding:10px;

color:#808080;

font:12 quote;

letter-spacing:1px;

margin-left:30px;

margin-right:30px;

border:3px solid #eee;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

blockquote:hover{

margin-left:0px;

margin-right:60px;

}

Le das guardas y listo.

Esto es si ya tienes el blockquote personalizado sino, haz lo siguiente:

Busca:

]]></b:skin>

Y pegas todo el codigo: te debe quedar asi:

blockquote {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVIQP4hPvzOC9koS3ZMxbeV-YB9Clt4lyAr96hqEx6lHy-hGI3pj_vOcvpIBm1pvB1zDfVeyBpzw7UrX1fUZiw_KUGCypLO1F2l1w_rhTd1E6QevQBcPsk6FHsT08LbgQi9CEHJXyFxw4w/s1600/tumblr_lxwynw0Pdg1r9g6hvo5_250.png);

padding:10px;

color:#808080;

font:12 quote;

letter-spacing:1px;

margin-left:30px;

margin-right:30px;

border:3px solid #eee;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

blockquote:hover{

margin-left:0px;

margin-right:60px;

}

Finalmente para personalizarlo, para que los colores combinen con tu diseño, cambia los siguientes valores marcados de colores:

Rojo: Esta es la url de fondo, si quieres ponerle una imagen u otro fondo remplazalo por la url de tu imagen
Azul: Es el color del borde, de preferencia que sea un color más obscuro pero eso es a tu gusto, para obtener el numero hexadecimal puedes obtenerlo de photoshop o tomarlo de la siguiente página Colores hexadecimales
Verde: Es el tamaño de la font
Rosa: Es el color del borde interior este de preferencia más claro pero tambien es al gusto

En si seria todo, espero les sea útil el tutorial
Nos leemos pronto
cuidense
bye bye