Follow Us @soratemplates

sábado, 12 de julho de 2014

Caixa de Códigos Personalizada (tag PRE)

Oi. Tenho um recadinho para quem usa Facebook: agora também é possível comentar aqui no blog pelo Face, Hotmail, Yahoo e AOL, além do Google, claro.
Hoje trouxe uma caixinha para postar códigos para quem tem blogs com tutoriais; esse modelo é bem simples, existe outro mais completo, mas esse além de ser básico é fácil, usa-se apenas CSS! Depois mostro o outro jeito. O que faremos é a personalização da tag PRE com efeito para quando passar o mouse sobre os códigos. Veja como vai ficar na imagem abaixo:
Para isso, acesse Modelo - Editar HTML - e cole antes de </b:skin>:
 pre{
width:100%;
border: 1px dashed #fcc;
font-family: 'Open Sans Condensed', sans-serif;
font-size:11px;
color:#A0E1FF;
overflow:auto;
background:url(http://3.bp.blogspot.com/-4HV0LxiuBe0/U8FxV2yK2aI/AAAAAAAANbY/Oy0yGcRpcw4/s1600/prebg.png)top left;
padding-top: 14px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
margin: auto;
}
pre:hover {
color:#29B5D8;
webkit-border-radius: 10%;
-webkit-border-top-right-radius: 10%;
-moz-border-radius: 10%;
-moz-border-radius-topright: 10%;
border-radius: 10%;
border-top-right-radius: 10%;
} 

Se quiser usar a fonte Open Sans Condensed, cole isso antes de </head>:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
Você pode mudar o background editando a imagem abaixo e a substituindo depois no código se preferir:
Para usar em algum lugar, como na área de postagem, use isso:
 <pre>ESCREVA AQUI SEU CODIGO</pre> 
Cole o código acima na área HTML do editor de posts; no local indicado para escrever um código, você irá adicionar o HTML que quiser, sendo que talvez deva convertê-lo para aparecer exatamente igual ao que deva ser usado; para isso, use esse site: ParseHTML ou deixe marcado em Opções no Editor de Postagem, em Modo de Escrever, "Mostrar HTML literalmente".
Espero que gostem :)
(código base: I love themes/bordas Wanaseoby)

4 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Awwwwn,. Ameii, vou usar no meu blog.. Q Fofura *u*
    Blog: ♥ Pastel De Flango

    ResponderExcluir
  3. Bgd!Usei,nova no blog ^.^
    http://jeitode-nerd.blogspot.com.br/

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart