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


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