1 2 3
Sejam Bem-Vindos ao Catwalk B. Um blog feito por Beatriz Serralheiro com o objetivo de mostrar um pouco mais do meu mundo. Tutoriais de HTML, noticias dos famosos e muito mais. Fique a vontade Catwalkers :D -xoxo

9 de set. de 2012

Estilos de blockquote personalizada

38711_144452665580620_122042434488310_350589_4686287_n_large
Hey amores, este é o primeiro post oficial do blog "Catwalk B" e já trago pra você um tutorial que de minha parte eu acho muito importante em um blog, venho trazer o tutorial de como colocar blockquote no seu blog, e pra quem não sabe o que é..
É está caixinha aqui..

Para ser bem sincera este é um daqueles posts que todo blog de tutorial tem, mais hoje trago vários  blockquote diferentes. Vamos começar o tutorial?


  1. Vá em Design > Editar HTML;
  2. Depois clique em Ctrl + F ou F3 e procure pela tag: ]]></b:skin>
Abaixo terá as opções de blockquote, assim que decidir qual irá colocar em seu blog copie o código que está abaixo da imagem e coloque ACIMA da tag.

Obs: Se não conseguir visualizar a imagem, clique nela e ela ampliará.
blockquote { border-left: 8px solid #FA6B8F; background-color: #efefef; padding: 4px; color: #333333; text-align: justify; } 

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;
-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/
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;
-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/
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;
-moz-border-radius:20px 0;
-webkit-border-radius:20px 0;
border-radius:20px 0;
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;
border-radius:10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
}  
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;
border-radius:0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
}  
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;
-moz-box-shadow:5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
-khtml-box-shadow: 5px 4px 10px #ccc;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4)";filter:progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4);
}
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;
box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
-khtml-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
}  
blockquote {
border-bottom: 1px dashed #33CCCC;/* 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;
}  

/*---Início do blockquote personalizado pelo Blog das Meninas---*/
blockquote {
border: 1px solid #00BFFF; /* cor da borda */
background-color: #F8F8FF; /* cor de fundo */
padding: 10px;
font-size: 12px; /*tamanho da fonte */
color: #696969; /* cor da fonte */
text-align: justify;
-webkit-border-radius: 0px 9px 0px 9px; /*Pontinhas da Borda - não modifique se qusier o formato igual ao blockquote acima */
box-shadow: -2px 4px 15px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
-moz-box-shadow: -2px 2px 5px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
-webkit-box-shadow: -2px 2px 5px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
-khtml-box-shadow: -2px 2px 5px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
}
/*---Fim do blockquote personalizado pelo Blog das Meninas---*/
Espero que o post tenha sido útil. Comente e diga o que achou ;)
Post feito com ajuda do blog Just Debee.

4 comentários:

  1. Oiiêe!
    Percebi que só tem uma postagem, mas foi essa postagem que me ajudou no meu blog;)
    Muuuuuuito obrigada mesmo
    Bjuus!!

    ResponderExcluir
  2. Olá viih!
    Este ainda é o primeiro post rsrs em breve teremos mais.
    Que bom que o post te ajudou!
    Beijos. Obrigado por visitar & Volte sempre! :D

    ResponderExcluir
  3. Puxa, faz tanto tempo que fiz esse post e só vi agora que te ajudou! Obrigada por creditar <3

    ResponderExcluir
  4. Adorei o tutorial... me ajudou muito ! :D

    ResponderExcluir

 

Código base por Thays Bueno, modificado por Emily Caroline. Tecnologia do Blogger.