Seu codigo bem apresentado - Blockquote

Você costuma postar códigos HTML ou citações em seu blog e deseja personalizar o campo 'menção' mas não sabe como? O artigo de hoje vai ensinar como ter o melhor espaço para menções de seu blog, no Blogger este espaço é conhecido como Blockquote. Continue lendo

A necessidade de um blog que fala sobre HTML, programação ou coisas da informática tem em postar códigos ou coisas parecidas surgiu a muito tempo. Tentei buscar algum código para melhorar o Blockquote do meu blog e encontrei coisas genéricas, por isso compartilho meus conhecimentos e códigos para melhorar seu blog neste sentido.

O QUE É  E PARA QUE SERVE O BLOCKQUOTE?

Seu nome deriva de bloco(block) e citação(quote), ou popularmente conhecido como 'citação em bloco'. Ele serve para você identificar parte do texto em seu blog que não é de sua autoria, uma citação que outra pessoa fez ou palavras que não são suas. 

MEU BLOG JÁ TEM ISSO?

Se a sua plataforma for Blogger sim e como não uso a WordPress, apenas acredito que a plataforma também já tem um modelo de blockquote pronto para uso. Se você usa a plataforma da UOL ou de outros, então você pode configurar um modelo de blockquote exclusivo para uso em seu blog pelo CSS ou HTML.

Como já me perguntaram via Facebook o motivo pelo qual eu não coloco meus códigos e scripts em um local mais apresentável é que o Blogger por si só não tem toda a infra que a WP tem, eu falo isso pois já vi locais específicos para códigos e scripts que contam com contador de linhas, opção de cópia e outros requisitos na mesma 'div' (ou seja lá o nome destes locais) que os códigos são apresentados e creio eu que isso é um recurso externo para a plataforma. No Blogger eu ainda não sei chegar ao mesmo resultado, mas consegui fornecer uma aparência bem parecida e acredito que outros blogueiros já chegaram a este resultado antes, mas não me importo em ter encontrado uma 'reposta tardia' para essa minha necessidade (sim, eu ando meio sem vontade de editar os HTMLs da vida...)

QUE TIPO DE RESULTADO FINAL ESTAMOS FALANDO AFINAL?

São eles:

IMAGEM 1 -Modelo possível no Blogger

IMAGEM 2 - Modelo que eu desejaria conseguir - Do Maujor

Como a imagem 1 mostra, há apenas as linhas de códigos escritas e ao fundo um contador de linhas. Na imagem 2 existe não só o contador de linhas mas um pequeno menu suspenso a direita que possibilita a impressão do que está dentro, a cópia e explicação da tecnologia usada na página (que é de terceiros).

Um dos resultados em seu Blog é o mesmo que a imagem 1 e outro, para blogs que mencionam frases ou poemas por exemplo, terão também um código exclusivo.

CÓDIGOS

Se você usa o Blogger faça o upload da imagem de fundo com as numerações no Picasa. A forma mais simples é você clicar em criar um novo post e depois inserir uma imagem. Após a imagem estar no campo de edição do post, clique sobre ela e veja o link destino da imagem (é que acontece quando você clica em uma imagem). 

Se você não usa o Blogger, então salve em local de confiança a imagem de fundo. A uol e WordPress fornece local para as imagens, só tomem cuidado para não redimensionar a imagem para um tamanho menor.

Depois estando no modo HTML do seu blog (no Blogger você deve procurar por Modelo depois de entrar no blog desejado pelo painel e na UOL na coluna lateral esquerda em Modelo de blog > Editor HTML no fim da página) aperte Ctrl + F para identificar se já existe algum blockquote. Se sim, mude apenas o que estiver dentro de { } e se não, localize o início do seu CSS 

<style type='text/css'>

e abaixo dele cole o seguinte código:

blockquote {
background:url(ENDERECO_SUA_IMAGEM.jpg) no-repeat;
color:#666;
font-size:13px;
font-family:'Courier New', Fixed, monospace;
line-height:17px;
overflow:auto;
border:1px solid #4D4749;
margin:1em 0;
padding:0 20px 0 30px;
text-align:left;
display:block;
} 

Você pode editar a cor da borda e da fonte, além da imagem. Neste caso, obrigatoriamente insira o local que você salvou a imagem, ou seja, hospede sua imagem em algum local e com o link dela substitua onde está escrito ENDERECO_SUA_IMAGEM.jpg. Podes também modificar a linha 3 que mostra color:#666 e a linha 8 depois de solid se você entender de HTML.

E aos que desejam apenas que apareça uma citação quando pressionado o botão 'Quote' a Helen do HTMHelen deu uma bela dica em 2008:

blockquote {
border:silver solid;
border-width: 0px 2px 2px 0px;
background: transparent url(http://www.blogblog.com/tictac/quotes.gif) no-repeat scroll left top;
padding-left: 33px;
padding-top: 17px;
padding-bottom:10px;
font-style:italic;
}

A dica é para sempre hospedar as imagens que pertencem ao seu blog. A imagem deste código é obrigatoriamente .GIF e mantenha isso. O resultado deste é:

E há outras formas de customizar seu Blockquote, basta você usar seus conhecimentos. 

O que achou destes modelos?