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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmk89HX7my6oG6rtkYbofe_ZRNN4n-shCGoiEDUK_b87lkYGUogIlbVQzd1I0ta5R1XTDvxrI_5x7VBbmM0AchIHiNa1yyyjuiBLkcvFMBV1_5Q3zPhCaeounjEA7R8T3_OCyVyxsjmzw/s1600/radio.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmk89HX7my6oG6rtkYbofe_ZRNN4n-shCGoiEDUK_b87lkYGUogIlbVQzd1I0ta5R1XTDvxrI_5x7VBbmM0AchIHiNa1yyyjuiBLkcvFMBV1_5Q3zPhCaeounjEA7R8T3_OCyVyxsjmzw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmk89HX7my6oG6rtkYbofe_ZRNN4n-shCGoiEDUK_b87lkYGUogIlbVQzd1I0ta5R1XTDvxrI_5x7VBbmM0AchIHiNa1yyyjuiBLkcvFMBV1_5Q3zPhCaeounjEA7R8T3_OCyVyxsjmzw/s1600/radio.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmk89HX7my6oG6rtkYbofe_ZRNN4n-shCGoiEDUK_b87lkYGUogIlbVQzd1I0ta5R1XTDvxrI_5x7VBbmM0AchIHiNa1yyyjuiBLkcvFMBV1_5Q3zPhCaeounjEA7R8T3_OCyVyxsjmzw/s1600/radio.png" Title="  " /></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:

>>  Varias Dicas Para Blogs

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.