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 ♥ 

4 comentários:

  1. Oi,
    Que lindas suas personalizações, estava testando o blockquote do meu blog pois estava dando erro e acabei usando o modelo 6. Porém alterei as cores, Tudo bem?
    Ah, claro! Coloquei os créditos, está lá page do meu blog.

    Parabéns pelo o blog e pelo tutorial, super fofo! ♥
    XOXO,

    http://vestigiosdipinup.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Oii Leehla ♥

      Eu que agradeço pelo comentário, o post estava faltando informações e estava desformatado - o que aconteceu depois de mudar meu layout hehe - , então muuuuito obrigada ♥♥ E fico feliz que tenha dado certo. Quanto as cores, por favor fique a vontade viu?

      E muito obrigada mais uma vez pelo comentário e pelos elogios (⁀ ᗢ ⁀)
      BEIJÃOOO!!! ♥

      Excluir
  2. Ooowwww, ameeeiii!!! Mas eu acho uma pena, porém não está funcionando nenhum deles no meu blog ಥ_ಥ

    ResponderExcluir
    Respostas
    1. Luuuu!!! Obrigadaa♡♡♡♡
      Olha, eu dei uma olhada no seu blog, eu acredito que é porque ele já está personalizado. Tenta procurar essa tag dentro dele, e mudar a que já tem. Pode ser uma opção, ♡♡♡

      Excluir

♡ Oi tudo bom? Você vai comentar? YAY, Muito obrigada pelo seu comentário :3 ♡
♡ E se você gosta de kaomojis, então aqui alguns que você pode usar:
\(*T▽T*)/ ≖‿≖ ʘ‿ʘ ☆ミ(o*・ω・)ノ (⁀ ᗢ ⁀) (= ^ _ ^ =) (●´∀`●) (◕ᴗ◕✿) ( ͡° ͜ʖ ͡°) (  ゜Д゜)⊃旦 (#`д´)ノ ╭(๑¯д¯๑)╮(; ̄Д ̄)(づ ̄ ³ ̄)づ ლ(́◉◞౪◟◉‵ლ) ヾ(^∇^) ( ゚▽゚)/ ( ^_^)/ ( ´ ▽ ` )ノ (ノ´∀`*)ノ ヾ(´・ω・`) ☆ミ(o*・ω・)ノ \(^▽^*) (*^▽^)/ ( ̄▽ ̄)ノ ヾ(-_-;) ヾ( ‘ – ‘*) ヾ(@⌒ー⌒@)ノ 【・_・?】ಥ_ಥ (✖╭╮✖) \(★´−`)人(´▽`★)/(*^ω^)人(^ω^*) (〜 ̄▽ ̄)〜