Disponibilizar Códigos com Exemplos na Postagem

Olá!!! Uma das coisas mais legais na blogosfera é poder compartilhar com muitas pessoas tudo aquilo que se aprende, para que assim qualquer um tenha a oportunidade de decifrar códigos, entender sobre HTML, ir praticando até obter os resultados que deseja caso seu intuito seja ter um espaço personalizado online em que possa falar sobre o que gosta.
E ninguém melhor do que você mesmo para atender a essa necessidade de deixar seu blog com sua cara. Para isso contamos com auxílio de várias pessoas que disponibilizam códigos e mais códigos, coisas que permitem criar efeitos diversos, mesmo sem noções de HTML. Que tal se você fizer o mesmo? Já imaginou ver alguma coisa feita por você sendo usada por muitas pessoas :3

Vou mostrar como fazer para criar postagens de tutoriais com HTML e CSS, com demonstração no próprio post. É um tutorial bem fácil e você pode usá-lo também em algumas atividades que fizer em seu blog.

Quando você for criar um post em que irá deixar algum código, poderá fazer de 2 maneiras:
A primeira é colar o código na área de postagem normalmente (cole com a opção Escrever ativa e não na opção HTML). Deixe marcado em Opções a parte que diz "Mostrar HTML literalmente" e clique em Concluído. Assim quem visualizar seu post terá visto o HTML.
Se isso não funcionar, e às vezes não funciona porque o Blogger meio que "traduz" certos códigos mostrando o resultado e não o código, a opção mais infalível (rs) é usar um conversor e meu favorito é o Parse HTML for Blogger. Basta visitar o site, colar um código, clicar em Parse e ele te mostra o código pronto em HTML, para que você cole na área de HTML da postagem e apareça como estiver.
Pronto até aqui vocês já podem deixar HTMLs serem mostrados nos posts. Mas caso queira fazer uma demonstração do resultado de algum efeito dos códigos que postar, não se torna necessário fazer isso em um blog de testes, claro, com exceções, como quando pode interferir em seu próprio layout ou exigir maiores esforços, ser mais complexo; fora isso, você pode mostrar na própria postagem mesmo, principalmente se envolver apenas CSS e HTML.
CSS é aquilo que você adiciona acima de ]]></b:skin> ou entre <style> e </style>. Assim, no HTML da sua postagem para demonstrar algo deixe assim:
<style>
.class
{
...aqui vai o conteúdo do código..
}
</style>
Para mostrar o HTML adicione aquilo que se coloca em gadgets por exemplo, de acordo com o que definiu no CSS.
<div class="class">
Conteúdo do html ou da imagem <img src="URL DA IMAGEM" class="class"/>
</div>
Falando assim parece difícil não é? Mas na prática seria algo mais ou menos assim:
Lembram daquele efeito aparece-some? Aí eu mostro o resultado:

Quando você passar o mouse sobre este texto ou na imagem, vão sumir!

O que está no HTML da postagem é:
<style>
.magic { <-preste atenção no nome que der ao seu CSS para mostrar o resultado.
border-radius: 10px;
border: 2px solid #e3a2fa;
box-shadow: 2px 2px 3px #f2b3ff;
float: center;
text-align: center;
font-family: 'Lobster';
font-size: 22px;
font-weight: bold;
color: #c288d1;
text-shadow: 1px 2px 3px #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9cPRuYAo9inUQRVRBte51AvTHvlPqQwF1NK4Kavd16prkSIP2-MN2DlIlgC7t82M5djzT5aDr1XEMHsiSi4iE43t8MIW6jxVGlWkUxJucBJDspSksDCaDgRIcEiYY3HcFQeLU1qFffKAN/s1600/bg8.gif)repeat;
width: 305px;
-webkit-transition: 2s;
}
.magic:hover {
-webkit-transition: 2s;
-webkit-transform: rotate(0deg);
opacity:.01;
</style>
<center>
<div class="magic">
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3yFvjf0_Hw7OdRlSfS0mmwzE3-QcEuL3QEcEgtFXuP2la2YVEH6MFIgHdWJRz3e1t2BeAYZrn5PwqP0jxD2fMUbRqeuFFS8239fpzO48-dWpkOhOg7eHSUcoOj8G1j_ie7PaUw4FEvss/s200/27.jpg" /></center>
Quando você passar o mouse sobre este texto ou na imagem, vão sumir!
</div>
</center>
Viu? Na hora de postar como código é só remover <style> e </style> e dar as coordenadas de como usar.
Note que dessa mesma maneira usada no HTML da postagem já se pode colar em um gadget HTML/JavaScript que funciona também.
Super simples não é? Espero que lhes seja útil ^-^
Beijus...






Postar um comentário

2 Comentários

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 - Deviantart

up