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á vistoLink 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 linkCó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 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.
Postar um comentário