Caixas de Código Personalizadas - Blogger

Caixas de Código Personalizadas - Blogger

Boas, hoje vou ensinar como criar caixas de código personalizadas, é um recurso bastante útil porque podemos diferenciar o texto do código, podemos sempre usar a Citação, mas uma caixa de código fornece-nos mais opções. Em primeiro vou exemplificar uma caixa de código dita normal:

Isto é uma caixa de código normal.


O código usado é este:

<textarea name="textarea" onfocus="this.select()" onmouseover="this.focus()" style="font-weight: bold; height: 200px; margin: 2px; padding: 20px; width: 300px;">Isto é uma caixa de código normal.
</textarea>

Agora o que vamos fazer é ao código da caixa de código personalizada inserir uma class para podermos personalizar a nossa caixa de código. Adicionemos por exemplo class="box"

Isto é uma caixa de código personalizada!



 E adicionam este código CSS para personalizar sua caixa de código: Modelo -> Personalizar -> Avançadas -> Adicionar CSS

textarea.box { background-image: url("http://www.quemdisse.com.br/autores/bartsimpson.jpg"); overflow: auto; background-image: url("http://www.quemdisse.com.br/autores/bartsimpson.jpg"); overflow: auto; height: 200px; margin: 2px; width: 300px; padding: 20px; color: white; font-weight: bold; }

 Sempre que quiserem criar uma caixa de código personalizada tem de inserir este código na parte HTML da vossa mensagem:

  O código usado é este:

<textarea class="box" name="textarea" onfocus="this.select()" onmouseover="this.focus()" style="font-weight: bold; height: 200px; margin: 2px; padding: 20px; width: 300px;">Aqui o código.
</textarea>

Ou então podem optar por uma caixa de código sem uma imagem predefinida, em que apenas tem de colocar as tag <code> no início e </code> no fim.
Ficaria deste género:

 Aqui o código por Lima

O código usado é este:

<code>Aqui o código</code>


 Se optarem por esta parte mais simples só tem de adicionar este código em: Modelo -> Personalizar -> Avançadas -> Adicionar CSS


code{ display: block; padding: 10px; overflow:auto; color:white; font-size:80%; background-color: #1a82f7; background: url(images/linear_bg_2.png); background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #2F2727, #1a82f7); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #2F2727, #1a82f7); /* IE 10 */ background: -ms-linear-gradient(top, #2F2727, #1a82f7); /* Opera 11.10+ */ background: -o-linear-gradient(top, #2F2727, #1a82f7); }

Espero que tenham gostado e se desejarem uma caixa de código personalizada deixem nos comentários que eu irei criar!