3 de maio de 2013

5

Balões com textos que aparecem sobre as Imagem ou Links no blog ou site



Olá galerinha!
_ Hoje eu irei ensinar uma coisa bem simples e ao mesmo tempo bem legal que é, aqueles Balões de texto que aparecem quando passamos o mouse sobre uma imagem ou link.
Vocês já devem de ter visto esses balões que aparecem com um comentário em alguns blogs,  pois saiba que isso é bem fácil de fazer e não requer nem uma instalação de CSS no HTML do blog...

Isso é bem útil pois você pode apresentar um título ou uma descrição em uma determinada imagem ou link.

Vamos lá, aprender então!
  • Como eu tinha falado logo no início deste tutorial, não será preciso você instalar nem um código CSS no HTML do seu blog, apenas será necessário acrescentar a Tag "Title" junto ao local onde se encontra a imagem ou link.
OBS: Pra seguir com minha explicação peço que Você Crie uma postagem e prosseguir passo a passo conforme a minha explicação "Obrigado" ;D.

Colocando Balão de texto em uma Imagem

1° Primeiro: 
Primeiro é preciso quer você crie uma postagem pra facilitar a explicação.

2° segundo:
Vamos começar por uma IMAGEM, então você vai inserir uma imagem na sua postagem, e quando inserir a imagem clique no botão HTML:
Observe que no HTML da postagem apareceu o código da imagem que você inseriu na postagem

3° Terceiro:
O código da minha Imagem que apareceu no HTML é esse aqui:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-nivGOxHRhf0/UYRDrRZiT1I/AAAAAAAADzE/XSM_nivrR7Y/s1600/radio.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-nivGOxHRhf0/UYRDrRZiT1I/AAAAAAAADzE/XSM_nivrR7Y/s1600/radio.png" /></a></div>

Vamos entender como é o código:
  • O primeiro link destacado em cor Azul se trata do link de redirecionamento, ou seja, é para quando a pessoa clicar na imagem abrir uma nova pagina ou  exibir na mesma página.

clique na imagem

  • O segundo Link destacado em cor vermelha, é o link que exibe (apresenta) a imagem na página:

4° Quarto:
Vamos adicionar o Tag: Title="  ", no código da imagem.
Então copie a Tag:
Title="  "

E cole logo depois da aspa (") do segundo Link do código da Imagem, veja o exemplo de como ficou logo abaixo:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-nivGOxHRhf0/UYRDrRZiT1I/AAAAAAAADzE/XSM_nivrR7Y/s1600/radio.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-nivGOxHRhf0/UYRDrRZiT1I/AAAAAAAADzE/XSM_nivrR7Y/s1600/radio.pngTitle="  " /></a></div>



Agora você vai escrever qual quer texto entre as Aspas (" ") do Tag que acabou de acrescentar no código da imagem.
Title=" Digite o seu texto entre aspas "
A seguir Clique no botão Escrever, agora passe o mouse sobre a imagem e logo você verá o balão aparecendo com o texto que você digitou, veja o exemplo abaixo:


É fácil né, somente acrescentar o Tag "Title" no código da Imagem que automaticamente já está pronto no HTML da postagem


Colocando Balão de texto em um LINK

1° Primeiro:
Vamos fazer o mesmo processo, porém vamos trabalhar com um Lik.

2° Segundo:
Na postagem, digite um pequeno Texto, e coloque um link no texto, pode ser até o endereço do seu blog só como exemplo.
>>  Varias Dicas Para Blogs

  • Caso você não saiba como colocar um link no texto, faça um seguinte: Selecione o texto, em seguida clique na ferramenta "Link" e adicione a URL (Endereço), exemplo:


3° terceiro:
Clique no Botão "HTML" novamente, e lá você vai vê o código do seu Texto com um link inserido, veja o meu exemplo:

<a href="http://variasdicasparablogs.blogspot.com.br/" target="_blank">Varias Dicas Para Blogs</a><br />

4° Quarto:
Copie a Tag: Title="  " em seguida cole logo depois da Aspa (") do link destacado em vermelho, veja o exemplo:
<a href="http://variasdicasparablogs.blogspot.com.br/" Title=" Digite o seu texto  "target="_blank">Varias Dicas Para Blogs</a><br />

5° Quinto:
Você vai digitar o texto entre as aspas (" ") da tag, em seguida clique no botão "Escrever" e por fim passe o mouse sobre o Link e observe que o texto apareceu.
>> Varias Dicas Para Blogs

Prontinho pessoal, veja como é simples adicionar a Tag "Title" no código de uma Imagem ou Link.

OBS:  O meu intuito em mostrar essa maneira de trabalhar com a Tag "Title", foi ensinar a como identificar um código de uma imagem ou de um link que você mesmo adiciona na postagem, e expliquei também o local onde colocamos a Tag, que foi tudo de forma manual.

5 comentários:

  1. Minha cabeça entrou em transe... Sou iniciante.

    ResponderExcluir
    Respostas
    1. é Facil de aprender, essa explicação toda que eu fiz, é pra mostrar a onde estar e como identificar o código da imagem que esta no HTML da postagem, só o que você vai fazer aí é, acrescentar a Tag "title" e nada mais.

      title="digite a frase"

      Excluir
  2. "Armaria, percisa isso tudo de HTML só pra iscrever umas coisinha dessa?" diria o Bode Gaiato no Facebook. Ainda bem que no Blogger (uso o clássico antigo) é superfácil: basta clicar na imagem, ela fica azul (selecionada) e abre embaixo um menu com opções. Clico em "propriedades" (ao lado de "remover") e escrevo o que desejo no "texto do título" e OK. Meu balão fica pronto rapidinho! Seu blog é ótimo, parabéns!

    ResponderExcluir
    Respostas
    1. Olá Assis Ramalho, muito obrigado por comentar e visitar meu blog...
      É! na verdade tem sim como adicionar o balão de comentário alterando as propriedades, porém essa opção só aparece para imagem, mais é mais fácil (melhor) de adicionar conforme eu falei, entretanto não serve pra links.

      Bom, mas minha intenção foi ensinar como e onde adicionar a Tag Title, de forma manual, mas também é fácil e não tem complicação.
      obrigado, valeu

      Excluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook