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, que é esta caixinha de códigos que você vê quando publico os códigos. (ainda estou atualizando os posts antigos colocando as caixinhas para os códigos).
Primeiro vamos aprender um pouco sobre a função BLOCKQUOTE:

Block=Bloco - Quote=Citação ► Citação em Bloco

Para configurar/personalizar a função Blockquote em seu blog você deve ir em Layout ► Editar HTML e procurar o código CSS →.post blockquote:

Você pode personalizar o Blockquote do seu blog de várias maneiras:

1º - Igual ao do Templates para Você com duas bordas uma superior e outra inferior.

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

2º - Apenas com a borda à esquerda.

.post blockquote {
background:#EAF3FB; /*Altere a cor como preferir*/
border-left: 3px solid #3D81EE; /*Altere a cor como preferir*/
padding: 5px;
margin:5px 20px;}

3º - Efeito Botão.

.post blockquote {
background:#FDFDFD;
border-top:1px solid #F5DEB3;
border-right:2px solid #CD853F;
border-bottom:2px solid #CD853F;
border-left:1px solid #F5DEB3;
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.
♦ 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.(50 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:
É muito simples você deve apenas colocar o código abaixo no HTML do seu post onde vai publicar os códigos:

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

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

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 em um site de hospedagem da sua escolha para que elas sempre apareçam em seu blog.


Para complementar o conteúdo e Fontes:
Blog a La Carte
Usando Bloco de Texto
Quando e como usar Blockquote