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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrQAfvLKTlgs2nKcnGRe_VTKyuozB6Zy9tm_VbfiiN1MQAC0VvvYc8JQ7pag5_SvROcvWVAxJbcK5t07DIsC8sGXoj-VmaJuvnlI3V7gbFXxZ0pDcwHlfTxpzmLhYzgOnxzdoHI6-20F0/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 :)
Este comentário foi removido pelo autor.
ResponderExcluirAwwwwn,. Ameii, vou usar no meu blog.. Q Fofura *u*
ResponderExcluirBlog: ♥ Pastel De Flango ♥
Bgd!Usei,nova no blog ^.^
ResponderExcluirhttp://jeitode-nerd.blogspot.com.br/
Obrigada e bem-vinda!
Excluir