Blockquote e Caixinha de Codigos

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO
Sempre que coloquei hacks com códigos para o blogger usava a função blockquote que são as "aspas" que aparecem quando você vai postar algo que deseja DESTACAR em seu post.
Porém, quando escrevia algo que queria destacar nos posts o destaque ficava igual aos hacks.
Então resolvi diferenciar as citações dos códigos de hacks usando um recurso muito simples que pode ser incorporado ao seu post durante sua criação → <pre><code>Código do Hack</code></pre> que é esta caixinha de códigos que você vê quando publico os códigos.

Aqui vamos aprender um pouco sobre a função BLOCKQUOTE e Como fazer a CAIXINHA DE CÓDIGOS
Blockquote
Block=Bloco - Quote=Citação ► Citação em Bloco



Para configurar/personalizar a função Blockquote em seu blog você deve ir em Modelo » Editar HTML e procurar o código CSS →.post blockquote (utilize o Ctrl+F)

Você pode personalizar o Blockquote do seu blog de várias maneiras.
Para isso substitua o código blockquote original pelo correspondente ao que você deseja.

Aqui vão algumas sugestões de códigos blockquote com suas representações acima:
Não se esqueça dos recursos CSS3, veja este post: Geradores de CSS e CSS3

1º - Com duas bordas uma superior e outra inferior.


.post blockquote{
background:#EAF3FB ; /*Altere a cor como preferir*/
border-top:2px solid #1C527A; /*Altere a cor como preferir*/
border-bottom:2px solid #1C527A;
margin:5px 20px;
padding:5px; }

2º - Apenas com a borda à esquerda.

.post blockquote {
margin: 10px 10px 10px 20px; 
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #333; /*Cor do Texto*/
background:#EEEEEE; /*Cor do Fundo*/
border-left: 20px solid #4F879F;}
Para alterar as cores veja » Como identificar cores

3º - Efeito Botão.

.post blockquote {
background:#FDFDFD;
border-top:1px solid #B6B6B6;
border-right:2px solid #B6B6B6;
border-bottom:2px solid #B6B6B6;
border-left:1px solid #B6B6B6;
padding: 5px;
margin:10px 20px 10px 20px;}

4º - Simples com bordas contíunas e background.

.post blockquote {
background: #FFE1E1;
border: 1px solid #C60000;
padding: 5px;
margin:10px 20px 10px 20px;}
♦ Observe que a cor de fundo (background) é #FFE1E1 e a cor da borda é #C60000 e podem ser alteradas ao seu gosto. Veja: Como identificar cores
♦ Você também pode alterar o tipo de borda.Veja: Lição11: Bordas

5º - Blockquote com 1 imagem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam augue tortor, feugiat non, molestie et, auctor vel, nisi. Nulla mauris elit, volutpat eu, hendrerit at, volutpat et, enim. Donec enim nisi, scelerisque eget, gravida id, tincidunt vel, tellus. Fusce nec pede a erat tristique aliquet. Nullam accumsan, tellus vitae lacinia euismod, nunc nibh aliquam felis, at sollicitudin nunc ligula non mauris.

.post blockquote {
background: url(URL da Imagem) top left no-repeat 5px 10px;
background-color: /*código da cor que quiser*/;
border: 2px dashed #C60000;
padding: 5px 5px 5px 110px;
margin:10px 20px 10px 20px;}
OBS: A linha padding tem a distância do lado esquerdo adaptadas à figura do exemplo.(100 por 83px).
Para entender melhor. Veja: Lição 10: Margin e padding

aspas.jpg
Como aplicar:
1) Você irá substituir o bloco do .post blockquote por estes dois blocos de código.
.post blockquote {
background: transparent url(URL da Imagem Superior) no-repeat 5px 10px;
border: 1px solid #C60000;
padding: 5px 5px 5px 60px;
margin:10px;}
.post blockquote div {
background: transparent url(URL da Imagem Inferior) bottom right no-repeat;
padding: 5px 60px 5px 5px;
margin:10px;}
OBS: As linhas padding tem as distâncias à figura do exemplo.(50px por 50px)
2) Para utilizar este recurso acrescente as tags <div></div> dentro das tags <blockquote></blockquote> na opção Editar Html do seu post ficando assim:

<blockquote><div>Citação</div></blockquote>


Caixinha de Códigos
Pronto. Agora que vocês já aprenderam um pouco sobre Blockquote vamos ao código para postar hacks:

Vou ensinar 2 formas de criar a caixinha de códigos em seu post:
A primeira já usei muito aqui no TPV, mas depois substitui pela segunda que é mais fácil na hora de digitar o post.

1ª Colocando a tag <div style> toda vez for fazer um post:

Você vai precisar ter este código abaixo salvo em seu computador num bloco de notas e vai ter que colocá-lo sempre:
<div style="border: 1px solid #555; background: #FAFAFA url(http://i33.tinypic.com/il8w0i.jpg) repeat-y left top; padding-left: 15px; margin:20px;">CÓDIGO</div>



Onde está escrito CÓDIGO insira o código do Hack que você vai postar.

A cor da imagem pode ser alterada da forma que você quiser em um editor de imagens aí altere também as bordas e background para ficar mais apresentável.

Sugiro que você salve as imagens deste post no próprio blogger para que elas sempre apareçam em seu blog.

OBS►A única vantagem que vejo em relação a segunda opção é que dessa forma a imagem da caixinha do código vai ficar da mesma altura de quantas linhas você usar.

2ª- Existe a opção de usar o recurso das tags <pre> + <code>

Onde você coloca no CSS do código HTML do seu blog as definições para estas tags e as utiliza quando for publicar códigos, não se esquecendo de usar os recursos &lt; e &gt; para < e > dentro das chaves:

<pre><code>&lt;CÓDIGO&gt;</code></pre>
Como Fazer?
1º - Em Modelo → Editar HTML → Coloque os códigos abaixo acima da linha ]]></b:skin>
pre {
background:transparent url(Endereço da Imagem do Código) no-repeat 0 0;
padding-left:12px;
}
pre code {
overflow:auto;
background-color:#F9F9F9;
border:1px solid silver;
color:#333;
font:normal normal 110% Arial, sans-serif;
display:block;
white-space:pre;
text-align:left;
min-height:63px;
word-wrap:break-word;
padding:5px;
}
2º - Feito isso, quando você for publicar algum post que contenha códigos utilize as tags <pre><code>CÓDIGO</code></pre> na parte Editar Html durante a edição do seu post. Desta forma ficará igual ao quadro acima.

3º - Salve esta imagem codigo em seu computador, hospede-a em um site de sua preferência e substitua o endereço da imagem no código acima:


Para complementar o conteúdo e Fontes:
Usando Bloco de Texto
Blockquote e Caixinha de Codigos Blockquote e Caixinha de Codigos Reviewed by Áurea on 11/25/2012 Rating: 5

12 comentários:

  1. Era essa a dúvida que eu tinha! Mas agora bateu outra dúvida: o blogger permite a tag code? Se permitir, ficaria bem mais fácil.

    ResponderExcluir
  2. Oiiii
    ahhhaaa!! eu sempre quiz saber obre isso.
    No caso do meu eu fiz, porque uma colega fez e me deu prontinho e ainda disse onde colocar, mesmo assim ficou desalinhado.
    Eu nunca entendi esse negocio de paging e margin.

    ResponderExcluir
  3. ótimo Áurea!
    esses dias peguei esse tutorial no Dicas Blogger, que por sinal era muito bom! O Seu está mais simples e explicativo ainda!
    Na realidade quando quero colocar esse recurso so coloco na própria postagem o código do blockquote, prontinho, muita frescura complica muito minha cabeça ^^

    ResponderExcluir
  4. Oi

    Eu tentei pegar o template Butterfly Yellow, mas não consigo mudar a imagem de cima, onde aparece o titulo do blog, como eu faço? alguem pode me explicar?

    abraço

    ResponderExcluir
  5. Muito bom seu blog ,eu o add seu blog nos meus links
    e gostaria de fazer parceria com vc ,dá uma olhada vê se vc gosta do meu blog.

    ResponderExcluir
  6. Ah, Oi Primeiramente Quero agradecer a boa disposição de criar seus ótimos tutoriais
    queria saber se há como eu implementar uma barra de rolagem para ficar melhor ao código Aqui meu Exemplo do meu blog:
    [b].post blockquote {
    background: #FAFAFA url(http://i33.tinypic.com/il8w0i.jpg) repeat-y left top;
    border: 1px solid #555;
    padding: 2px 2px 2px 20px;}
    .post blockquote div {
    padding: 5px 60px 5px 5px;}[/b]
    Grato.
    Aqui meu Blog
    Atenciosamente DraKoN

    ResponderExcluir
  7. Tentei de todas as maneiras, mas não consegui. Obg

    ResponderExcluir
  8. Gostei muito,irei modificar algumas cores e postar no meu blog!Darei os créditos!

    ResponderExcluir
  9. @Sáh~Sáh,
    Que bom que gostou e entendeu.
    Fico feliz em ajudar!

    ResponderExcluir
  10. Não estou conseguindo? Tem que aplicar em B SKIN?

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.