Disponibilizar Códigos com exemplos na postagem

Olá bunnie's!!! Como vão todos? Estava relendo algumas postagens antigas e achei uma que nem lembrava que havia postado rs, então decidi edita-la e explica-la melhor. Esse tutorial é o que costumo chamar de tutu amigo. Com ele é possível postar um tutorial mostrando a própria brevia dentro da própria postagem.

.::Exemplo::.

Você também pode escrever, arrumar fontes e cores. Pode usar menus, imagens, efeitos e muito mais. Gostou? Siga o tutorial!

Abra uma postagem limpa. No canto direito da postagem terá um menu com essas opções "Marcadores, Programar, Links, Local, Opções" clique em Opções. O menu vai abrir  mostrando algumas opções. Escolha a opção "Mostrar HTML literalmente" (passo 1) e clique em Concluído. Ao fazer isso vocês estará permitindo visualizar HTML em sua postagem. Se estiver marcado clique em Concluído.

Para verificar se funcionou, escreva uma frase e centralize (somente para gerar um código). No topo da postagem ao lado esquerdo, clique em HTML como mostro na imagem abaixo (passo 2). Se entrou como um código está tudo ok, Ás vezes o Blogger "traduz" certos códigos mostrando o resultado e não o código. A solução é usar um conversor um que geralmente uso é o  Parse HTML for Blogger. Basta ir no site, colar um código, clicar em Parse e ele te mostra o código pronto em HTML. Copie o resultado e cole na postagem selecionada em HTML.

1) Agora sim vamos ao tutorial! Geralmente colamos o CSS sobre o ]]></b:skin> e o javascript em algum gadget, felizmente existe um pequeno código que simula o próprio dentro da postagem  o <style> e </style>. Entre ele pode se adicionar um CSS (menu ou efeito), o corpo ficaria mais ou menos assim quando pronto.

<style>

.class

{

outros códigos...

}

</style>

<div class="class"> TEXTO<img src=" IMAGEM" class="class"/> </div>


Entendendo o corpo:
<style> e </style>: Simula o ]]></b:skin> tanto dentro de alguma postagem ou gadget.
.class: Nome ou ID dado a algum css. O nome é o que da estilo ao javascript,
{}: No HTML são chamada de chaves. É ela que da inicio e encerramento ao código.

2) Agora vamos por em pratica! Abra uma postagem vazia de preferencia em um blog de testes. Dentro dessa postagem cole: 

<style>
outro códigos,</style>.

Apague onde está escrito "outros códigos..." e cole algum menu ou imagem. Para esse tutorial vou disponibilizar esse código aqui:

.neko{
width: 300px;
background: #ccc;
border: 2px solid #ccc;
float: center;
text-align: center;
font-family: 'Georgia';
font-size: 19px;
color: #000;
}
.neko:hover {
opacity:0.5;
webkit-transition: all 0.9s ease-out;
moz-transition: all 0.9s ease-out
}

Agora em baixo de </style> cole:

<center>
Outro código aqui</center>

Apague onde está escrito "outros códigos..."  substitua por um código. Para esse tutorial vou disponibilizar esse código abaixo:

<div class="neko">
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjft_v6D3Jsrs5nl1UxDsg-hxJa6JvXmXObDyrAWqiYCH9Uc0aLKQVD43itD_5nGOowbfFG5YdMn-Ev72oZt16PrERCrnIWeQj5V103Z0EqcJ8viUlmGiGj1GRNRMcafcsqc4AKKy4tyHw/s1600/19.png" /></center>
Você pode escrever um texto também.
</div>

É prontinho o resultado está no inicio da postagem. Quando for postar HTML junto com o exemplo, aconselho fazer toda a postagem deixando marcado o lugar que queira por o exemplo, ao terminar coloque a postagem na aba HTML e organize o corpo do exemplo. Quando pronto ative a aba em "Escrever" novamente, visualize se deu certo e publique.