Web Dois Ponto Zero: citações

citações - blockquote

Quando queremos citar algum outro blog, livro, revista, etc., é de bom tom utilizar esse texto com uma formatação diferente da normal. O próprio html tem uma tag (<blockquote>) que serve exactamente para isso. Depois podemos formatar (usando css ou não) o conteúdo dessa tag à nossa maneira, da mais simples à mais ornamentada. Existirão pela internet milhares de possibilidades.
Aqui, vou descrever aquela que estou a usar e que saquei, mais uma vez, do BlogU, que por sua vez a tinha retirado de Fauxzen em Blogger Templates.
Então o que têm de fazer para que sempre que, no vosso html usem a tag <blockquote> e </blockquote> o texto entre essas duas tags apareça formatado de forma diferente do texto normal e com o aspecto convencional de uma citação?
Basta editar o vosso template/modelo/layout, editar o html (veja o procedimento e cuidados adequados que deve ter sempre que tem este procedimento de alteração do Esquema do vosso blog, aqui), procurar, entre <head> e </head> por
Blockquote {
… conteúdo ...
}
Depois, basta substituir esse bloco por este:


blockquote {
background-position:-10px -7px;
border: 1px dashed #FFC600;
margin: 20px 10;
padding: 0 20px 0 50px;
background: url("QuoteImage.URL") 5% no-repeat #FFF8DD;
}

Finalmente, há que fazer o upload da imagem para o vosso servidor.

Existem servidores gratuitos na internet que podem usar para colocar os ficheiros que precisam para o vosso blog, como esta imagem. Basta googlar um pouco por “free webhosting” (ou veja aqui e escolha/experimente). A maioria deles dá apenas como gratuito alguns MB, o que, em geral é suficiente, se for usado apenas para guardar algumas imagens e pequenos ficheiros.
Depois do upload feito, substituam a parte QuoteImage.URL pelo URL real da vossa imagem “uploadada”.
Vejamos um exemplo concreto de aplicação:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris pharetra imperdiet eros. Sed in tellus tempor massa vulputate eleifend. Nulla a justo in nulla egestas faucibus. Vivamus vitae quam. Curabitur pellentesque congue mi. Donec tortor sapien, tincidunt eu, iaculis sed, dapibus eu, elit.

Como dica extra, sugiro a utilização, para fins explicativos e outros (página em construção/desenvolvimento, por exemplo) do Lorem Ipsum generator. Existem também vários sites que geram este conteúdo. No caso de usarem aquele que refiro, podem lá ler a história deste texto, porque usamos, entre outras curiosidades, para além do gerador. Caso tenham dificuldades em ler em Inglês, o site tem possibilidade de tradução para Português.