Como escrever igual a gadget "Posts da Vez"

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO
Recebi uma dúvida perguntando sobre como fiz para que a gadget da sidebar ficasse com a configuração que está, com a imagem paralela ao texto.
DICA: Aprendi a fazer isso selecionando textos com imagens que me interessam, clico com o botão direito do mouse e visualizo o Código Fonte da seleção. Assim... Fui testando até conseguir.
Aqui fica a dica para você por em prática sempre que quiser aprender algo, mas vou ensinar como está a configuração da gadget "Posts da Vez"

Veja só:
1º O código para a imagem:
<div style="FLOAT: left; WIDTH: 10%"><img style="vertical-align: middle;" src="URL da IMAGEM"/></div>
Entenda o código:
»Para que a imagem fique do lado esquerdo utilizei o comando [float:left;];
»[widht:10%] representa a largura do espaço que a imagem ocupa;
»[vertical-align: middle;] é o alinhamento vertical da imagem→central.
»OBS: Utilizei imagens com o tamanho 48x48px nesta gadget.

2º O código para o Título ao lado da Imagem:
<div style="FLOAT: right; WIDTH: 85%"><span style="font-weight: bold; border-bottom:1px dotted #B30000; line-height:1.4em; display:block; "><a href="URL do TÍTULO" target="_blank"> TÍTULO </a></span></div>
Entenda o código:
»Para que o texto fique do lado direito utilizei o comando [float:right;];
»[widht:85%;] representa a largura do espaço que ao texto ocupa;
»[font-weight: bold;] significa que o texto está em negrito;
»[border-bottom:1px dotted #B30000;] é o sublinhado do texto, apenas em baixo, mas você pode colocar ao lado, ou borda em tono dele todo;
»[line-height:1.4em;] altura da linha;
»[display:block;]para o texto ficar ao lado da imagem deve estar em bloco;
»[font-size:120%;] indica o tamanho da fonte.

3º O texto abaixo da imagem e titulo:
<span style=" margin-left:20px; padding:2px 0 0px 20px;">
<ul> TEXTO 1ªLINHA </ul>
<ul> TEXTO 2ªLINHA </ul>
<ul> TEXTO 3ªLINHA</ul></span>
Entenda o código:
»[padding:2px 0 0px 20px;] margem interna do texto na seguinte ordem: superior, direita, inferior e esquerda;
»[font-size:85%;] indica o tamanho da fonte;
»[margin-left:20px;] indica a margem esquerda do texto.
»[<ul>] define as linhas.

AO FINAL FICARÁ ASSIM:
<div style="FLOAT: left; WIDTH: 10%"><img style="vertical-align: middle;" src="URL da IMAGEM"/></div><div style="FLOAT: right; WIDTH: 85%"><span style="font-weight: bold; border-bottom:1px dotted #B30000; line-height:1.4em; display:block; font-size:120%;"><a href="URL do TÍTULO" target="_blank"> TÍTULO </a></span></div><span style="font-size:85%; margin-left:20px; padding:2px 0 0px 20px;">
<ul> TEXTO 1ªLINHA </ul>
<ul> TEXTO 2ªLINHA </ul>
<ul> TEXTO 3ªLINHA</ul></span>
<br/>
►Use <br/> para saltar uma linha entre os textos.

Siga estes passos e altere da forma que quiser.

Sugiro que visite sites que ensinam sobre códigos CSS e HTML como por exemplo:
CSS PADRÕES ou CSS PARA WEBDESIGN
Como escrever igual a gadget "Posts da Vez" Como escrever igual a gadget "Posts da Vez" Reviewed by Áurea on 8/20/2008 Rating: 5

11 comentários:

  1. Bela explicação. Detalhada e de fácil compreensão. Bom ver blogs que facilitam a vida dos usuários.

    ResponderExcluir
  2. vc sabe como fazer pra deixar definido a mesma imagem em todos os titulos sem precisar ficar sempre editando esse codigo? quero botar o simbolo do palmeiras nos meus titulos

    ResponderExcluir
  3. Obrigada CSSPADRÕES,
    Seu blog também faz parte dos que facilitam nossas vidas!
    *************************************************
    Lucas,
    Você quer colocar os desenhos nos títulos dos posts? Vou fazer um tutorial para esta ação!
    Aguarde só um pouco!

    ResponderExcluir
  4. mt obg! vou ficar aguardando. to precisando melhorar a aparencia do meu blog deixando ele mais palmeirense. a unica foto do palmeiras q tem la eh do cabecalho. quero botar algum simbolo nas postagens e tb uma foto pra ficar no fundo de td. vc sabe como bota uma foto desse jeito?

    ResponderExcluir
  5. Ohhh.. muito bom esse artigo, execelente!! parabens !!


    Michael

    ResponderExcluir
  6. Em uma linda árvore, existem lindos frutos

    Nesta árvore existem folhas suves, que nos trazem paz e amor

    Paz, pelo encanto de sua beleza

    Amor, pela postura, firme e corajossa

    Desta árvore, podemos desfrutar desses frutos

    Poís todos os dias, aquela linda árvore está ali

    Gerando esses frutos e da semente desses frutos

    Novas árvores surgiram

    Hoje eu sou um fruto, um fruto que surgiu

    de uma linda árvore

    Esta linda árvore, o que todos não sabem

    É que existe uma linda raiz

    Essa raiz é mãe dessa linda árvore

    Como é bom sermos gerados nessa raiz

    Hoje ensinamos, mais fomos gerados por essa raiz

    Professora Áurea

    Com você aprendemos e ensinamos

    Ensinamos a compartilhar dos nossos frutos

    Na ajuda, busco o refúgio e abrigo da sua sombra

    Poís nela encontro as minhas respostas

    Obrigado por me ajudar

    Samuel dos Santos


    Visite o site da professora Áurea, Templates para você

    Com ela tenho aprendido e colocado em prática todos estes

    conheçimentos

    Minha mãe da internet

    Professora Áurea

    ResponderExcluir
  7. Lucas,
    Estou trabalhando nisso...

    Michael,
    Obrigada por seu comentário.

    Samuel,
    Desse jeito vou ficar inchada e olha que já sou gordinha e não posso ficar mais cheia.

    Com relação ao link no campo parceiros, assim que tiver um tempo irei atualizar. É o tempo que está curto.

    ResponderExcluir
  8. Áurea, esses códigos são para serem colocados dentro dos elementos de página? :) Boa semana! Beijus

    ResponderExcluir
  9. Sim Luma,
    Por exemplo numa gadget tipo HTML como fiz com os posts da vez.
    É como ficou a configuração em HTML da gadget com imagem de um lado e texto de outro!

    ResponderExcluir
  10. oi, aurea! ja sabe sobre como botar foto em todos os titulos do post? e sabe como bota foto de fundo? se souber de algum lugar q explica tb me ajuda
    bjo

    ResponderExcluir
  11. Ou Aurea..obrigada pela dica valeu mesmo.....adorei e entendi direitinho....
    Abraço grande e até mais

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.