Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

14/02/2013

Tutorial - Estilo diferente para códigos da postagem

Estava planejando falar sobre um assunto completamente diferente hoje, mas como até eu estava sentindo tédio antes mesmo de escrever, resolvi que é melhor não arriscar não ter acesso, não em tempos de crise... Hehehe...
Ao invés disso, trago um tutorial super simples, que pode ser útil às vezes. A maioria dos blogueiros prefere adicionar códigos HTML a uma postagem em uma citação, e colocam o estilo da citação de forma personalizada. Eu, particularmente, não gosto muito dessa pratica; primeiro pois eu uso a citação para várias outras coisas; e segundo pois gosto sempre de combinar as cores da postagem com a imagem que a encabeça.
O código a seguir é bem simples e não precisa ser acrescentado no HTML do template, ou seja, o risco de dar algo errado é zero. Se você o fizer certo, ficará mais ou menos assim:

exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo

E você poderá usá-lo com qualquer texto que quiser, não apenas com códigos.

Estilo diferente para códigos da postagem:

Primeiro explicarei o código, depois darei alguns exemplos já prontos para servir de inspiração para vocês, OK?
Antes de tudo, escreva sua postagem normalmente, acrescentando à ela os códigos que você quer destacar.
Depois que tudo esteja escrito, clique no botão "HTML" (que fica ao lado de "Escrever", no canto superior esquerdo do editor de postagens) e procure o texto que você quer modificar. Antes dele, cole o seguinte código:

<div style="background: #eee; border: 1px solid #ccc; padding: 10px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; box-shadow: 3px 3px 3px #ccc inset; -moz-box-shadow: 3px 3px 3px #ccc inset; -webkit-box-shadow: 3px 3px 3px #ccc inset;">

E exatamente onde o texto acaba, escreva </div>
Agora clique em "Escrever". Repare que o texto escolhido já está completamente no estilo desejado! Viu como é fácil?
A parte que eu destaquei em negrito é a que dá estilo ao texto que será modificados. Você pode adicionar aí quantos códigos quiser, de acordo com seus conhecimentos, basta colocá-los antes das aspas fecharem.
Abaixo, colocarei alguns outros códigos, veja como há uma boa gama de possibilidades:

<div style="background: #D6E3EE; padding: 10px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">

<div style="background: #ccc; border: 1px dashed steelblue; padding: 10px;">

<div style="background: #eee; border: 6px double #666666; padding: 10px; border-radius: 20px 0px 20px 0px; -moz-border-radius:  20px 0px 20px 0px; -webkit-border-radius:  20px 0px 20px 0px;">

E por aí vai... Divirta-se colocando seus textos da forma que você quiser! Só não se esqueça de colocar </div> depois do texto!!!

Espero que tenha sido útil, amanhã teremos "Capas para Twitter", não perca!!!

Mil Sweetkisses,
7 Comentários
Comentários

7 comentários:

  1. Adorei essa dica, vou salvar esse link para usar nas próximas postagens.

    ResponderExcluir
  2. Bem legais os estilos, eu gostei mais do segundo!
    Beijokass
    Fer--> RetardadasDaNet.blogspot.com

    ResponderExcluir
  3. Ficou muito legal. Eu nunca tinha pensado em fazer algo assim. Bjus!!!

    galerafashion.blogspot.com.br

    ResponderExcluir
  4. Olá linda. Faz só um mês que estou com o blog, então estou divulgando ele ainda. Sei que é chato, mas não custa nada dar uma passadinha por lá né? Se gostar segue, estou retribuindo.
    http://casos-demulher.blogspot.com.br

    ResponderExcluir
  5. Adoro tutoriais, cedo ou tarde acabam sendo úteis.
    Obrigada

    www.reticenciando.com

    Milhões de beijos

    ResponderExcluir
  6. Adorei os novos estilos de citação..
    ainda não aderia a eles, mas acho lindo em outros Blogs...
    perfeito parabens

    ResponderExcluir
  7. Olha aí outra coisa que eu amei... e bem legal que não precisa mexer no html do blog, vai direto no post, na parte que a gente quer realçar, destacar...

    Com certeza vou usar no meu blog para valorizar alguns trechos em vários posts.

    Valeu compartilhar :)

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados