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