Blockquote personalizado ♣

OI GENTE!

Essa postagem aqui já faz parte do meu projeto que eu estou fazendo, e hoje eu vou ensinar a você a personalizarem do blockquote do seu blog! "Mas ué? O que é o blockquote?" Nada mais do que a citação do seu blog. 

Há algum tempo atrás eu estava muito incomodada com o block que eu tinha no meu blog. Eu achava ele sem graça, e muito PAM!! Eu queria algo mais suave e com as cores do blog, e depois de penar muito com o meu código eu consegui instalar o código. 

Mas chega de enjoou, e vamos aprender 6 tipos diferentes de blockquotes para você escolher e esbanjar amor ♥

! Primeiramente eu recomendo que vocês façam a cópia do layout antes de qualquer mudança.

Parte geral de todos os códigos ~

Modelo -> Editar HTML -> Ctrl+F e procure por:  

]]></b:skin>

Caso você não encontre esse código, procure pelo código abaixo e clique até encontrar um semelhante ao de cima.

]]><

Após encontrar, cole ACIMA dele o código do modelo de blockquote que você preferir, personalize e salve ♥

Algumas imagens para você utilizarem: aqui/aqui/aqui/aqui

.post blockquote {
border: 2px double #FFFFF; /* cor e tamanho da borda */
background-image:url(URL DA SUA IMAGEM);
background-repeat:repeat;
padding: 10px; /* espaçamento do texto */
text-align: justify; /* alinhamento do texto - center, right, left*/
-webkit-border-radius: 2px; /* bordas arredondadas */
-moz-border-radius: 2px; /* bordas arredondadas */
border-radius: 2px; /* bordas arredondadas */
}

.post blockquote {
background:  #FFF0F5; /*Cor do fundo*/
border-left: 7px solid #CD6090; /*Cor da borda, estilo, direção e espessura da borda*/
padding: 5px;
margin:10px 20px 10px 20px;
} 

.post blockquote {
background:#FFD39B; /* cor de fundo */
margin:15px; /* margem entre a borda da area de postagem e a caixinha de blockquote */
padding:15px; /* margem interna */
border-top:5px solid #FF7F24; /* borda do top */
}

blockquote {
background-color: #dee9df;
padding: 5px;
border: 1px dashed #9bba9d;
text-shadow: 0px 1px 0px #deeedf;
box-shadow: inset 0 0 15px #a1c2a2, 0 0 3px #dbc8d3;
color: #94a395;
padding: 10px;
-webkit-transition-duration: .50s;
}
blockquote:hover {
background-color: #ffe7e9;
border: 1px dashed #f09fa5;
text-shadow: 0px 1px 0px #f6e4e5;
box-shadow: inset 0 0 15px #eca8ac, 0 0 3px #dfc9c3;
color: #f09fa5;
-webkit-transition-duration: .50s;
}

blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
}

blockquote {
border-right: 10px solid #f99db3 ; /* Cor da borda direita*/
border-left: 10px solid #f99db3 ; /* Cor da borda esquerda*/
background-color:#f5f2f3; /* Cor do fundo */
padding: 10px;
font-size:12px; /* Tamanho da fonte*/
color: #e193a6; /* Cor da fonte*/
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
}

E então? É um tutorial bem facilzinho. Aproveito e deixo essa tabela de cores para vocês personalizarem ao seu gosto! Beijooo e um queijo ♥