Modelos de Blockquote Personalizados

agosto 06, 2017


[ #06 | B E D A ] Konnichiwa fadinhas & elfos! Como estão? Hoje é dia de html/css! Hoje vou disponibilizar para vocês alguns tipos de blockquotes personalizados! Blockquotes é aquele espaço de citação que muitos blogs usam e é super comum em resenhas, textos e etc, espero que gostem, let's go?



Ele fica nessa opção, você seleciona um treixo do post e ativa esse botão para tranforma-lo em uma citação, o meu é assim:

Olá, esse é o blockquote desse blog, sempre mudo a cor.  Logo abaixo terá vários legais para você usar! <3
Para utilizar qualquer um que eu listar aqui, você precisará copiar o codigo do seu preferido, ir em Tema, Editar HTML e colar antes de /b:skin> ou de <style> . Se já possuir um modelo no seu blog procure por "post blockquote {" ou "blockquote {" apague toda a área e substitua por qual desejar. Agora vamos lá?



~ Com bordinha e efeito hover ~

 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;
} 


~ Simples ~


 blockquote{
padding: 6px;
background-color: #f3f3f3;
border: 1px solid #e1e1e1;
box-shadow: inset 1px 1px #f9f9f9, 0 0 6px #f6f6f6;
color: #bbb;
text-shadow: 1px 1px 0 #fafafa;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 11px;
} 


~ Bordinha com aspas~

 .post blockquote {
padding:10px 15px;
margin: 5px 15px;
outline: 1px dashed #fff;
outline-offset: -4px;
background: -webkit-linear-gradient(#9e896d, #a28b81);
background: -moz-linear-gradient(#a8c3be, #c0d3cf);
background: -o-linear-gradient(#a8c3be, #c0d3cf);
font-size: 15px;
color: #fff;
font-family: Times;
-moz-box-shadow: -1px 2px 5px #ccc;
-webkit-box-shadow: -1px 2px 5px #ccc;
box-shadow: -1px 2px 5px #ccc;
}

.post blockquote:before {
content: "\201C";
color: #dbf9fd;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: "\201D";
color: #dbf9fd;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}

~ Box ~


 blockquote {border: 3px solid #fafcfd;
background-color: #fbf0ff;
padding: 10px;
font-size: 11px;
color: #a48ead;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: inset 0 0 12px #f6dad8, 0 0 5px #d976a3;} 


~Hover mais claro e arredondado~


@font-face { font-family: "five"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf');} 
blockquote{
padding: 6px;
background-color: #e3e9ef;
box-shadow: inset 0 0 3px #c4cfd9, 0 0 6px #f6f6f6; 
color: #b8c4cf;
text-shadow: 1px 1px 0 #eaf0f4;
font-family: "five";
font-size: 8px;
-webkit-transition-duration: .50s;
}

blockquote:hover{
background-color: #ecf0f4;
box-shadow: inset 0 0 3px #d7dee5, 0 0 0 #f0f0f0;
color: #bfcbd6;
text-shadow: 1px 1px 0 #f1f5f7;
border-radius: 9px;
-webkit-transition-duration: .50s;
} 

~ Com barrinhas laterais ~

 blockquote { 
border-right: 7px solid #f99db3;
border-left: 7px solid #f99db3;
background-color: #f5f2f3;
padding: 10px;
font-size: 11px;
font-family: Verdana, sans-serif;
color: #777777;
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;
-webkit-transition-duration: .50s;}

blockquote:hover {
border-right: 11px solid #f99db3;
border-left: 11px solid #f99db3;
background-color: #f5f2f3;
padding: 10px;
font-size: 11px;
font-family: Verdana, sans-serif;
color: #777777;
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;
-webkit-transition-duration: .50s;} 


~ Barrinha com aspas ~

 blockquote {
    background:#f9f9f9;
    border-left:6px solid #ccc;
    font-family: Georgia, serif;
    margin:1.5em 10px;
    padding:.5em 10px;
    quotes:"\201C""\201D""\2018""\2019";
    }
    blockquote:before {
    color:#ccc;
    content:open-quote;
    font-family: cambria, Georgia;
    font-size:4em;
    line-height:.1em;
    margin-right:.25em;
    vertical-align:-.4em;
    }
    blockquote p {
    display:inline;
    }
    blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 10px;
    } 

Barrinhas late

.post blockquote { 
font-family: alegre;
letter-spacing: 2px;
font-weight: lighter;
background: url("http://static.tumblr.com/qbssgmc/Ltomo3rllndomodelo3.png");
border-left: 5px solid #812d50;
border-right: 5px solid #812d50;
padding: 10px;
text-align: center;
border-radius: 5px;
color: #d3977c;
}

@font-face {
font-family: "alegre";
src: url('http://static.tumblr.com/dlelfro/5jMmnnubw/al__gre_sans.ttf');
}

~ Bolha aspas ~

.post blockquote{ 
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 1em;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
.post blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #fbeff4;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.post blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}

~ Simples 2 ~

.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;
} 

Por hoje é só! Espero que tenham gostado! Eles funcionam em blogger e também wordspress! Você pode escolher o modelo e mudar as cores em todas as parte que tem (# e numeração, para saber mais cores, recomendo esse site >aqui<) Qualquer duvida é só perguntar nos comentários ok? Não esqueçam que estamos em BEDA! Terá postagem todo dia! Então segue o bloguinho e visite sempre ok?! Até mais! Kissus

Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest *

Leia também:

34 comentários

  1. Nossa que dica mais legal...não sabia que dava pra fazer assim em html... ♥ com certeza irei tentar fazer no meu...amo essas citações em destaque. Adorei a dica.

    ResponderExcluir
    Respostas
    1. Obrigadaa! Sério? Faça sim, vai ficar super lindo, mas tenta primeiro em um blog de testes ok? Fico feliz que gostou! Obrigada pela visita!

      Excluir
  2. Obrigada pela dica! Não sabe como ajuda, entrei a pouco tempo nesse universo e não conhecia muita coisa, hoje faço um curso d html para aperfeiçoar pois é muito útil para quem tem blog.

    ResponderExcluir
    Respostas
    1. Nada! Eu adoro poder ajudar, que bom, fazer curso ajuda muito mesmo. Eu aprendi sozinha e agora to no curso pra me aperfeiçoar também! Obrigada pela visita e tudo de bom, kissus!

      Excluir
  3. Olá! Tudo bem?
    Muito obrigada por esse post e por dividir isso com a gente, eu já copiei o meu <3 Amo quando as blogueiras dividem o que sabem e nos ensinam.
    Beijos.

    www.meumundosecreto.com.br

    ResponderExcluir
    Respostas
    1. Oláa! Tudo sim e você?
      Nadaa, e obrigada pela visita e por comentar! Já escolheu, que legaal! Vou dar uma olhada lá. Owwn! fico feliz <3 ~ Obrigada e Kissus

      Excluir
  4. OLA GATA,ACHEI BEM LEGAL O POST ALEM DE DIFERENTE FICA BEM FOFO, POREM EU SOU BEM BURRINHA NA HORA DE ESTAR MUDANDO DE CODIGOS,SE VOCE QUISER ME AJUDA FICAREI GRATA,O SEU BLOG E MUITO FOFINHO ADOREI.SUPER BEIJOS E SUCESSO!

    ResponderExcluir
    Respostas
    1. Oláa! Que bom que gostou! Sim sim, fica mesmo <3
      É sempre bom treinar em um blog de teste, comecei assim mexendo sem medo e depois amei personalizar layouts. Eu ajudo, é só me chamar, no facebook, twitter ou hangouts! Obrigadaa! Kissus, sucesso também!

      Excluir
  5. Menina sou tão leiga nesses assuntos que nem sabia que tinha como mudar isso hehe vou mandar pro meu amigo que é quem configura meu blog se usarmos algum voltamos aqui te contar!

    Beijos.

    ResponderExcluir
    Respostas
    1. Sério? kk Então já digo que da pra mudar tuuuuuuudo, sim, tudo que quiser o/ , okay, vou ficar atenta e ficarei muito feliz se usarem! Obrigada pela visita e kissus!

      Excluir
  6. Nossa, adorei saber que existem tantas possibilidades assim!! Eu sou super lesada em informática e adorei as suas dicas, fáceis de entender! Obrigada!

    ResponderExcluir
    Respostas
    1. Que bom! Fico muito feliz em ajudar, e que conseguiu entender direitinho! Nada! Obrigada vc pela visita e por comentar! Kissus

      Excluir
  7. Amei o post, você ajudar a gente que é leigo em html hasuahsua, agradecida :*

    ResponderExcluir
    Respostas
    1. Fico feliz que gostou! kk Adoro ajudar, mas é bom até pra ver outros modelos de design e se basear ^^ Nadaa! Obrigada pela visita, kissus!

      Excluir
  8. Sempre divido o que eu sei com minhas leitoras, muito legal você fazer esse post.
    Já salvei nos favoritos quando eu precisar entro aqui.

    Beijos <3

    ResponderExcluir
    Respostas
    1. Isso é tão legal, e ficamos bem em poder ajudar né? Fico feliz que gostou! Obrigadaa! Kissus ;** <3

      Excluir
  9. Ah que tutorial maravilhoso, já estou salvando muuuito! Eu estava buscando a um tempo atrás, mas nenhum tinha me agradado. Vou está colocando em pratica esse que passou. Super beijos!
    www.pausapracriatividade.com

    ResponderExcluir
    Respostas
    1. Obrigadaa! Espero que seja útil,qualquer duvida é só perguntar aqui ok?
      Que bom que gostou! Ansiosa para ver como vai ficar, obrigada pela visita e por comentar! Kissus

      Excluir
  10. Amei demais! Valeu pelo tutorial, pelas dicas e por oferecer os htmls ajuda muito muito mesmo! Ainda mais a mim que tenho muita dificuldade com o código! Obrigada e amei demais a postagem!

    ResponderExcluir
    Respostas
    1. Que ótimo que gostou! Nadaa, fico feliz em poder ajudar! Teste e sempre pratique em um blog de teste, você vai melhorar <3 Obrigadaa! Kissus

      Excluir
  11. Seu blog é liindo! E eu adorei a dica... Eu nem sabia que isso tinha um nome, quem dirá um código...hahaha sou bem por fora nesses assuntos "tecnológicos".
    Que bom que disponibilizou alguns modelos...

    ResponderExcluir
    Respostas
    1. Obrigada! Foi feito com carinho <3 Verdade, eu antes também não sabia que o nome era esse haha,tudo beem ^^ Sim, acho legal alguns e junto para agradar o gosto de mais pessoas. Obrigada pela visita! Kissus

      Excluir
  12. Wooow, que gracinha! Que bom que você partilha logo os códigos :p ficamos logo com tudo feito, muito legal mesmo! Obrigada <3

    beijo

    www.keke.pt

    ResponderExcluir
    Respostas
    1. Eaí fadinha! Vi que seguiu, obrigada!
      Que bom que gostou, sim adoro juntar uns modelos e partilhar. Awwn, obrigada! Nada! <3 Kissus

      Excluir
  13. Esse barrinha aspas e o bolha aspas são lindos. Adorei! Posso te dá um abraço? Só pessoas lindas fazem posts maravilhosos assim pra ajudar a gente! Vou compartilhar com minhas amigas blogueira ❤

    ResponderExcluir
    Respostas
    1. Que bom que gostou, gostei muito do da bolha de aspas, diferente né? hehe clarooo! vem cá +----(^.^)----+ kk. Que isso, é nada demais, gosto de codigos e acho legal compartilhar. Obrigadaa pela ajuda! ~ Kissus

      Excluir
  14. Eu sou louca nessas coisas de html, apaixonadissima. Adoro ficar mudando meu blog. Adorei os tutoriais. XOXO
    www.soseflor.com 🌻

    ResponderExcluir
    Respostas
    1. Legal ver uma pessoa que já adora html *-* Fico feliz que gostou! Obrigada pela visita, kissus!

      Excluir
  15. Olá, td bom?
    Adoro tutos ♥ O meu lay já vem com um, mas eu acho ele simples, porém gosto do fato dele ser simples... Estou confusa, n sei se mudo oooo hsuahsuahsh Achei lindo esses ♥
    bjs

    Instagram | Sorteio de divulgação - Redes Sociais e Blog! | VSCO com todos os filtros! | Facetune de graça!

    ResponderExcluir
    Respostas
    1. Oláa, tudo sim você!?
      Que bom que gosta, sei como é, o meu tb já tem um simples, gosto dele ser simples então só mudei a cor haha. Testa algum, vai que gosta! Obrigada! Kissus

      Excluir
  16. Respostas
    1. Que legal que gostou! Sérioo? Vai ficar lindo <3

      Excluir
  17. Aiii que dica mara! Obrigada por disponibilizar! Vou usar já já, queria mesmo saber como fazia! *-*
    <3

    Beijinhos
    tipsnconfessions.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada! Nada, é sempre bom ter alguns modelos pra escolher né ? <3 Que bom que o post te ajudou! Obrigada pela visita, Kissus

      Excluir

© 2017 Sweet Magic. Re-Design By: Juciane Damasceno. Tecnologia do Blogger.
Eu Sou do CBBlogers