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

08/05/2012

Música em duas colunas + "DSManiacs"

Mais uma vez, teremos hoje um post com dois assuntos: o primeiro é um pedido da minha amigona Juliana Marques do "Meu Inexplicável Mundo", que queria saber como colocar as letras de música em duas colunas como eu faço aqui no DSM. A coitadinha teve que copiar a música daqui do DSM e editar tudo para conseguir colocar a música no blog dela nesse formato. Mas hoje vou ensinar como colocar apenas incluindo três códigos no HTML da postagem.
Hoje teremos também a estreia do novo "Você no DSM" que será mais do que especial, e se chamará "DSManiacs". Ao contrário dos outros, esse quadro não terá fim determinado e terá uma página especial, só para ele!!! Não é um desafio, nem um concurso, nem um sorteio... Está mais para "Feedback" do que para outra coisa. Mas vamos deixar de prólogos e ir logo para o que nos interessa:

Música em duas colunas:

Quase todo sábado coloco aqui no DSM uma música que quero compartilhar com vocês. Para isso, uso um player do Mp3Skull, para vocês ouvirem a música e logo após coloco a letra e a tradução da música, que eu retiro sempre do letras.terra.
Acontece que eu coloco a tradução ao lado da letra original, formato utilizado na maioria dos sites de letras de música. Se você ainda não sabe como é esse formato, veja a última música postada no DSM para entender.
Colocar uma música assim é bem simples, apenas vamos fazer uma tabela com duas colunas, colocando três códigos no HTML. Vamos aos passos?

1. Escreva a postagem normalmente, com a letra original colada primeiro e a tradução logo abaixo;
2. Clique em HTML (ao lado de Escrever, no topo direito do formulário de postagem);
3. Ache o começo da música, e cole antes o seguinte código (se você copiou a letra do letras.terra, é só colar antes de <div id="letra_original">):

<table border="0" cellpadding="5" cellspacing="0" class=""><tbody>
<tr><td style="color: #444444; text-align: right;" valign="top" width="299">

Se você não quiser que a letra original fique em cinza, apague o trecho em vermelho. Ou troque o código hexadecimal por outro ou por uma Named Color.

4. Ache o começo da tradução, e cole antes o seguinte código (no caso do letras.terra é antes de <h3>):

</td> <td valign="top" width="299">

5. Por último, ache o final da tradução e cole isso depois:

</td></tr>
<tr><td valign="top" width="299"></td></tr>
</tbody></table><br />
<br />

Se a sua área dos posts for maior e a letra estiver menor que ela, altere o valor de width nos três códigos de 229 para um número ligeiramente maior.

6. Clique em "Escrever", no alto do formulário de postagem. Verifique que sua letra original e a tradução estão em alturas diferentes, mas não se preocupe, isso só acontece no formulário de postagem. Para ver como elas ficarão de verdade, visualize a postagem.

Ainda assim, muitas vezes a parte da tradução fica maior do que a letra original, devido a algumas frases em português serem maiores que as do outro idioma. Para consertar isso e deixar as frases emparelhadas com sua respectiva tradução, visualize a postagem e vá anotando (mentalmente ou num papel) as frases em português que são maiores que a letra original. Volte na postagem e dê um "enter" com o cursor posicionado no início da frase da letra original imediatamente abaixo da tradução que você anotou. Vá visualizando e repetindo a ação até que sua letra fique arrumada na visualização (no formulário de postagem estará bagunçada mesmo).
Quando estiver tudo OK na visualização, publique ou programe a postagem.

Se você também quiser saber como fazer algo aqui do DSM, deixe um comentário que logo farei um tutorial explicando.

Você no DSM - "DSManiacs":

Reparem que esse "Você no DSM" não tem número. Pois é, isso acontece pois o "DSManics" é um quadro permanente e completamente diferente de todos os outros que já surgiram no DSM. Ele tem uma página exclusiva (como você já pode ver no menu, em DSManiacs) e não terá fim, nem prêmios ou muitas regras.
Só o que você precisa fazer é preencher o formulário que está na página em questão, escrevendo um pequeno texto onde você contará por que é um DSManiac, o que você mais gosta aqui no DSM ou a sua opinião pessoal sobre o blog, contendo ou não uma imagem feita por você.
Todos os textos enviados serão divulgados no final de uma postagem e na página dos DSManiacs, com seu nome, idade, link do seu blog e, se quiser, uma imagem. Quem não tem um blog também pode participar, basta deixar os campos "Nome do seu blog" e "Endereço do seu blog" vazios.
Para saber de mais detalhes e se inscrever, visite a página DSManiacs. É importante que todos os que gostam daqui participem e mostrem seu amor pelo blog, isso vai me deixar muito feliz!!!

Espero que vocês tenham gostado do tuto e do "Você no DSM", aguarde o post de amanhã!!!

Mil Sweetkisses,
12 Comentários
Comentários

12 comentários:

  1. Adorei o post, muito bom *-*

    sapoxuxu.blogspot.com

    ResponderExcluir
  2. gostei sim assim como gosto de tudo q vc faz !!!

    ResponderExcluir
  3. Oi!
    Que legal o DSManiacs!
    Bom, queria te dizer que o layout do blog está lindíssimo! Adorei!
    Mas, além disso, queria te avisar que coloquei o link do seu blog na minha Blogroll. Caso queira que eu o retire, é só avisar!

    O link é esse: http://myworld-blg.blogspot.com.br/p/blogroll.html

    Beijinhos, Carol!

    ResponderExcluir
  4. EEEEE obrigadaaaaaaaa Super Sheilaaaaa, vou participar do DSManiacs só não vou agora pq to cheia de trabalho e prova rsrs, bjus boa semana e prova boa noite e obrigadaa

    ResponderExcluir
  5. Seus tutoriais são muito bons, Sheila! sempre úteis pra mim rs


    Beijos,
    Caroline, do http//criticandoporai.blogspot.com

    ResponderExcluir
  6. Olá,
    Boa noite linda,
    Valeu as dicas e o alto astral de sempre!
    Sou tua fã.
    Um xero linda e aguardo o post de amanhã.

    ResponderExcluir
  7. Passei pra desejar uma ótima noite!
    Beijos♥

    ResponderExcluir
  8. Primeiro, obrigado pela visita lá no blog, eu gostei muito! (:
    Segundo, adorei o tutorial, está muito bem explicado...
    Parabéns, e até mais! *-*
    Beijos...

    http://cinco-datarde.blogspot.com.br/

    ResponderExcluir
  9. Você é tão criativa com essas coisas. Ando querendo fazer uma promoção no blog, mas não faço ideia nem de por onde começar. rs

    http://vitaminadepimenta.blogspot.com.br/

    ResponderExcluir
  10. Conseguiii colocar certinho a letra e a tradução obrigada Minha Flor!!!!!!!
    bjus Juju

    ResponderExcluir

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