Postagens | Dicas blog, Imagem, Pc Windows

Criar link e Lista de links em Html

Mostrarei como criar um link e uma lista de links usando Html.

O blogger tem uma opção de criar uma lista de links fácil(sem uso de código) ela é fácil por ser simples simples, agora para quem quer algo diferente terá que aprender um pouco de Html, que não é um bicho de sete cabeças, basta ser bastante observador e estar atento ao modo com que os códigos são colocados, até porque em Html as coisas são parecidas, só muda as tags e suas funções. A dica é criar um blog para testes, testar e praticar o que da certo e como funciona...

Antes de mostrar a lista de links em Html, vou mostrar apenas os links, simples, que abre em nova página e link para envio de email
Detalhe: um link com endereço web precisa começar com http, para evitar erro, o melhor a fazer é abrir a página e copiar o endereço da barra de endereço do navegador.
Link Simples
<a href="http://blog.foitestado.com/2009/02/exibir-caixa-de-comentario-no-blogger.html">Nome do link que será visto</a>
Detalhes: Você pode observar que existe o código do link, mas ele funciona com:
Um endereço http:// e com o Nome do link que será visto
Link que abre em nova página ou janela
<a href="http://blog.foitestado.com/2008/08/facilefunciona-como-colocar-caixa-de.html" target="_blank">Colocar caixa de busca google no blogspot</a>
Detalhes: É a mesma coisa, com apenas uma tag para abrir em nova página, target="_blank"
Link para envio de Email
<a href="malito:Meu-Email@xxx.com">contato com Meu-Email@xxx.com</a>
Nesse caso, é só substituir Meu-Email@xxx.com pelo seu email, é bom deixar seu email visível, pois, o funcionamento do link depende do visitante ter um programa de email configurado em seu computador, se ele não tiver ele pode copiar o email.

Código de lista de links

Como você viu acima, o link começa com uma tag parecida com <a href=""> e termina com essa tag </a> e assim a maioria das coisas em Html. Uma lista também é parecido, ela começa com <ul> e termina com </ul> e dentro delas(entre uma e outra) vão as frases e as tags de item, cada item dentro da lista começa com <li> e termina com</li> e entre as tags de <li></li> pode ir uma frase ou um link, no código abaixo você pode ver que existem os códigos de item e entre eles está o código do link

Código de lista de link
<ul>
<li><a href="http://blog.foitestado.com/2008/08/facilefunciona-como-colocar-caixa-de.html">Colocar caixa de busca google no blogspot</a></li>
<li>
<a href="http://blog.foitestado.com/2009/03/posso-ou-nao-devo-excluir-meu-blog.html">Você deve ou não excluir seu blog?</a></li>
<li>
<a href="http://blog.foitestado.com/2009/02/colocar-gadget-seguidores-no-blogger.html">Adicionar gadget seguidores no blogger</a></li>
<li>
<a href="http://blog.foitestado.com/2008/11/colocar-imagem-link-no-blogspot.html">Colocar imagem-link no BlogSpot</a></li>
</ul>

Esse código acima gera uma lista de links simples, parecida com as listas que uso na lateral do blog, e, poderia personalizar um pouco com Css no <ul style="background:#ffffff; border:1px solid blue; list-style-position:inside">

O código de exemplo acima, estaria pronto para ser colocado em uma página de html, porém, em blogs ela deve ser colocado na área específica para ela, no blogger pode ser na lateral em um gadget Html/Javascript, ou na postagem na opção Editar Html, as vezes pode ficar uma linha em branco, principalmente se você der um Enter após a tag <li> e deixa sua lista "feia"

Opção Editar Html, criar post no bloggercolocar link em editar html no post do blogger


Para quem achar importante, poderia criar uma lista numerada, sem precisar digitar os números, basta substituir o ul por ol
O exemplo de código abaixo iria gerar uma lista numerada, e vou incrementar um pouco ela com um estilo Css e, mostrar como ficaria o código da lista com 4 links na mesma linha, mas perceba que, mesmo o código estando na mesma linha cada item ficará em uma nova linha, é essa uma das funções de uma lista e das tags<li>

Código de lista de link numerada
<ol style="background:cyan; border:2px dotted orange; list-style-position:inside;">
Post Relacionado:
<li><a href="http://goo.gl/A9ug" target="_blank">Texto com link na sidebar do BlogSpot</a></li><li><a href="http://blog.foitestado.com/2009/09/seo-coloca-link-no-post-do-blogger.html">Adicionar link na postagem do BlogSpot</a></li><li><a href="http://blog.foitestado.com/2008/11/colocar-imagem-link-no-blogspot.html">Colocar  imagem-link no BlogSpot</a></li><li><a href="malito:Apenas-para-teste não envie">Testar link malito?(clique)</a></li>
</ol>

Finalizando, o código acima gerou essa lista de links relacionados abaixo, que é uma boa maneira de você indicar o que acha que a pessoa irá gostar de ler,  e o ultimo link apenas para você testar o link para envio de email, se bem que pode ser mais aconselhado um formulário de contato, porque você não expõe seu email e o visitante não depende de ter um programa.

Quanto ao Css:
background: é a cor de fundo e border: é borda, e ela pode ser sólida ou, dotted que é pontilhado e, para quem sabe inglês vai ter facilidade em perceber já que quase tudo precisa ser inglês, inclusive as cores cyan e orange. Não era minha intenção citar Css, mas pode ser útil, e você pode encontrar na web tags Css bem interessantes.

    Post Relacionado:
  1. Texto com link na sidebar do BlogSpot
  2. Adicionar link na postagem do BlogSpot
  3. Colocar imagem-link no BlogSpot
  4. Testar link malito?(clique)

15 comentários:

  1. poxa muito interessante e bem explicado, mas é que eu que nao consigo ainda eu disse AINDA nao consegui capitar nada desses tags.
    mas parabens pela postagem.

    ResponderExcluir
  2. quero saber como faço para colocar o texto,o link da certo,me ajuda ae

    ResponderExcluir
  3. Gabriel W

    Acho que você quer uma lista simples, com frases:

    <UL>Uma lista
    <li>Primeiro item</li>
    <li>Segundo item</li>
    <li>E o terceiro item</li>
    </UL>

    Se você substituir o que não esta em vermelho você terá uma lista simples, uma frase embaixo da outra.

    ResponderExcluir
  4. é assim cara,eu quero coloccar uma postagem no link,ex: eu coloco o link:dicas god of... e eu quero q quando eles clicarem no link apareça uma postagem,como fazer para colocar postagem no link.

    Muito obigado.

    ResponderExcluir
  5. Você abre a postagem(já pronta) e copia o endereço da barra de endereços do navegador, vamos supor que em outra postagem minha eu queira colocar um link para essa postagem, eu copiaria o endereço que estou vendo na barra de endereço agora mesmo e faria assim:

    <a href="http://blog.foitestado.com/2010/07/cria-link-e-fazer-uma-lista-html.html">Criar link e lista...</a>

    Então, se eu colocar esse trecho de código em outro postagem eu estarei criando um link para cá, desde que, seja na opção Editar Html.

    Observe que o endereço que você vê na barra de endereço do navegador é:
    http://blog.foitestado.com/2010/07/cria-link-e-fazer-uma-lista-html.html
    E o nome do link seria:
    Criar link e lista...
    que posso mudar para outra frase se quiser

    ResponderExcluir
  6. Muito obrigado mesmo pela atenção,me ajudou muito!

    ResponderExcluir
  7. O MUITO BOM CARA MAIS EU NÃO ESTOU CONSEGUINDO MAIS EU ESTOU TENTANDO UM ABRAÇO

    ResponderExcluir
  8. Caro amigo.
    Procurei essa resposta mas não encontrei.
    Gostaria de saber como colocar um link no Menu video por exemplo, pra quando lá clicasse o visitante fosse direcionado para o meu canal do youtube. É possível fazer isso?
    E outra pergunta é como posso colocar uma página dentro de outra no menu. Por ex: Menu diversões - colocaria uma página para vídeo, outra para charges, outra para áudio.
    Obs: o menu do meu template é horizontal.
    Será que deu pra entender minha pergunta??!!
    Um abç. Obrigada.

    ResponderExcluir
  9. Kátia Fernandes

    Para sua primeira pergunta, você precisa copiar o endereço Url do seu canal de vídeos, para isso acesse ele e copie o Url da barra de endereços do navegador, essa Url você usa para criar o link, agora, eu não sei que tipo de menu você usa, se ele é um gadget que você pode editar ficará fácil porque ele indica onde colocar cada coisa.

    Agora sua segunda pergunta provavelmente trata-se de um menu e sub-menu, nesses casos é muito difícil até mesmo para quem entende de Html e Css mudar algo já pronto, se ele for um gadget do blogger, fica quase impossível, isso porque ele não tem opção de mudar o Html. Eu indicaria para fazer um menu online em Html e Css, mas mesmo para esses você precisaria saber um pouco de Html para instalar, e, talvez não encontre um que tenha a mesma aparência do seu que já está sendo usado.

    Uma dica é usar um blog de testes para fazer essas coisas sem medo de errar e ver se algo dá certo.

    ResponderExcluir
  10. Olá passando pra agradecer as dicas. Estou tentando fazer estas listas sugeridas acima, pois no meu blog não consigo encontrar nada. Acho ele muito bagunçado, meio sem rumo para o leitor. Mais uma vez obrigada por sua ajuda.

    ResponderExcluir
  11. como faço para colocar o link de um site com uma foto??

    ResponderExcluir
  12. Memeu

    Veja no final dessa postagem, nos posts relacionadas e clica onde diz 'colocar imagem-link no BlogSpot.

    ResponderExcluir
  13. Anônimo30/12/11

    valeu pelas dicas mto obrigado me ajudou bastante. Obrigadooooooooo!!

    ResponderExcluir
  14. Muiiiiiiiiiiiito obrigado mesmo,resolveu meu problema. parabens pelo excelente tutorial...

    ResponderExcluir

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!

Postagens Populares