Recents in Beach

Como adicionar um blockquote no Blogger


Antes de tudo, você precisa saber o que é um blockquote.

O que é?

Blockquote, é nada mais nada menos que uma caixa de texto, uma citação, ou algo que você quer destacar. Um exemplo:
Esta frase está destacada.
E hoje, vamos ensinar como adicionar isso no seu blog, e como cortesia, também disponibilizaremos alguns modelos de blockquote (os modelos foram pegos de outros sites. Créditos no final do post).

Primeiro vamos adiciona-lo ao blog. Primeiro vá no Painel de Blogger, e escolha o blog que quer para adicionar. Em seguida, clique em "Modelo".


Agora clique em "Editar HTML".


Na próxima janela que aparecer, clique na área do código e pressione Ctrl+F, irá aparecer uma caixa de pesquisa e procure por:
]]></b:skin>

Após achar esse código, acima dele, você vai colar o código do blockquote de sua preferencia. Segue alguns modelos:

Modelo 1:


Código:
.post blockquote {
padding: 3px;
border-radius: 3px;
background: #cea8a1;
box-shadow: inset 0 0 15px #BF958E;
text-shadow:#9E7B75 0px 1px 1px;
text-transform: lowercase;
font-family: verdana;
font-size: 10px;
color: #fff;
text-align: center;
-webkit-transition-duration: .30s;
}
.post blockquote:hover {
border-radius: 0px;
background: #f7c8a0;
text-shadow:#F5B076 0px 1px 1px;
box-shadow: inset 0 0 15px #F0BB8D;
-webkit-transition-duration: .30s;
}
Modelo 2:


Código:
.post blockquote {
background: url("http://static.tumblr.com/oiizew6/Zgqm3v6uq/blockquote.png");
padding: 14px;
padding-left: 70px;
font-size: 11px;
color: #696969;
text-align:justify;
box-shadow: 0px 1px 2px #edeeec;
}
Modelo 3:


Código:
blockquote {
background: #A9F5D0 url(http://2.bp.blogspot.com/_qgZA1ny_dAs/Sw66TNQV5hI/AAAAAAAADK4/lALxQAkmQF0/s200/blockquote.png) top left no-repeat;
margin: 10px 15px 3px 3px;
padding: 5px 15px 10px 32px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
font-style: italic;
}
Modelo 4:


Código:
.post blockquote {
margin: 1em 13px;
background:#f0f0f0;     /*cor do fundo do blockquote*/
border: 1px solid #c2c2c2;    /*cor da borda*/
border-left: 7px solid #c2c2c2;    /*cor da borda esquerda*/
padding:10px;    /* espaçamento do texto*/
font-size: 12px;    /*tamanho da fonte*/
font-family: tahoma;    /*tipo da fonte*/
color:#626262;    /*cor da fonte*/
}
*Em breve um post ensinando a como personalizar sua blockquote.

Agora é só escolher um modelo e colar antes da "]]></b:skin>".

Exemplo:


Agora é só salvar.
Para usar, vá na sua postagem, selecione uma frase ou palavra que deseja destacar e clique no ícone de citação:


Pronto, agora é só publicar!

E este foi o Como Alguma Coisa de hoje, fique ligado e até a próxima.

Créditos: Otaku Mode; Chá Com Anjos; Ferramentasblog.

Última atualização: 08/01/2016

Tags adicionais: Cherry Bomb: Personalizar blockquote do blog, Personalizar blockquote no blogger - [ Ferramentas Blog ], Personalizar Citações em Destaque (Blockquote) no blogger, * ~ Bomba de Glitter ~ *: Como usar o blockquote, Quando e como usar blockquote, 10 Estilos de Blockquotes Personalizados no Blogger, O que é Blockquote e como usar?, Como Personalizar a função Blockquote no Blogger, BLOCKQUOTE COM ASPAS