Modelos de Blockquote Personalizados
[ #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; }

Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest *
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.
ResponderExcluirObrigadaa! 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!
ExcluirObrigada 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.
ResponderExcluirNada! 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!
ExcluirOlá! Tudo bem?
ResponderExcluirMuito 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
Oláa! Tudo sim e você?
ExcluirNadaa, e obrigada pela visita e por comentar! Já escolheu, que legaal! Vou dar uma olhada lá. Owwn! fico feliz <3 ~ Obrigada e Kissus
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!
ResponderExcluirOláa! Que bom que gostou! Sim sim, fica mesmo <3
ExcluirÉ 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!
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!
ResponderExcluirBeijos.
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!
ExcluirNossa, adorei saber que existem tantas possibilidades assim!! Eu sou super lesada em informática e adorei as suas dicas, fáceis de entender! Obrigada!
ResponderExcluirQue bom! Fico muito feliz em ajudar, e que conseguiu entender direitinho! Nada! Obrigada vc pela visita e por comentar! Kissus
ExcluirAmei o post, você ajudar a gente que é leigo em html hasuahsua, agradecida :*
ResponderExcluirFico feliz que gostou! kk Adoro ajudar, mas é bom até pra ver outros modelos de design e se basear ^^ Nadaa! Obrigada pela visita, kissus!
ExcluirSempre divido o que eu sei com minhas leitoras, muito legal você fazer esse post.
ResponderExcluirJá salvei nos favoritos quando eu precisar entro aqui.
Beijos <3
Isso é tão legal, e ficamos bem em poder ajudar né? Fico feliz que gostou! Obrigadaa! Kissus ;** <3
ExcluirAh 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!
ResponderExcluirwww.pausapracriatividade.com
Obrigadaa! Espero que seja útil,qualquer duvida é só perguntar aqui ok?
ExcluirQue bom que gostou! Ansiosa para ver como vai ficar, obrigada pela visita e por comentar! Kissus
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!
ResponderExcluirQue ótimo que gostou! Nadaa, fico feliz em poder ajudar! Teste e sempre pratique em um blog de teste, você vai melhorar <3 Obrigadaa! Kissus
ExcluirSeu 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".
ResponderExcluirQue bom que disponibilizou alguns modelos...
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
ExcluirWooow, que gracinha! Que bom que você partilha logo os códigos :p ficamos logo com tudo feito, muito legal mesmo! Obrigada <3
ResponderExcluirbeijo
www.keke.pt
Eaí fadinha! Vi que seguiu, obrigada!
ExcluirQue bom que gostou, sim adoro juntar uns modelos e partilhar. Awwn, obrigada! Nada! <3 Kissus
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 ❤
ResponderExcluirQue 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
ExcluirEu sou louca nessas coisas de html, apaixonadissima. Adoro ficar mudando meu blog. Adorei os tutoriais. XOXO
ResponderExcluirwww.soseflor.com 🌻
Legal ver uma pessoa que já adora html *-* Fico feliz que gostou! Obrigada pela visita, kissus!
ExcluirOlá, td bom?
ResponderExcluirAdoro 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!
Oláa, tudo sim você!?
ExcluirQue 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
Aaain.. adoreeii vou colocar no meu !
ResponderExcluirQue legal que gostou! Sérioo? Vai ficar lindo <3
ExcluirAiii que dica mara! Obrigada por disponibilizar! Vou usar já já, queria mesmo saber como fazia! *-*
ResponderExcluir<3
Beijinhos
tipsnconfessions.blogspot.com
Obrigada! Nada, é sempre bom ter alguns modelos pra escolher né ? <3 Que bom que o post te ajudou! Obrigada pela visita, Kissus
Excluir