Como colocar ícones flutuantes no blog

 

Você já deve ter reparado no ícones que estão no canto direito deste blog certo?

Pois bem, depois que coloquei estes ícones la eu recebi um caminhão de e-mails(brincadeira, foram ai uns 20) me pedindo como eu tinha feito , então resolvi criar este post.

É algo bastante simples, primeiro vá em painel>layout>elementos da pagina e adicione um gadget html/Java script, não importa em que ponto da pagina você ira por o código, ele não ocupara espaço nenhum.

Não coloque titulo, pois ele apareceria no local onde você adicionou o gadget como um texto perdido la..

Ai você deve encontrar um ícone que sirva para o que você projetou, eu utilizo o google imagens, e de preferencia uma imagem pequena(no caso deste blog a maior tem 48X50), e copie o link desta imagem.

No corpo do script HTML/Java script cole o seguinte código:

<a style="display:scroll;position:fixed;top:200px;right:5px;" href="link que quiser(exemplo twiter)" target="_blank" title="siga-me no twitter"><img src="url da imagem"/></a>

E em seguida troque a parte link que quiser por algum link que você~e desejar lincar, twitter, Orkut, alguma pagina especifica, etc...

Substitua “siga-me no twiter “por qualquer descrição da pagina de destino, e em url da imagem ponha o endereço da imagem que você procurou antes.

A posição na tela também pode ser mudada no trecho

<a style="display:scroll;position:fixed;top:200px;right:5px;"

Onde top representa topo da pagina, se desejar que o ícone apareça embaixo da pagina troque por bottom, e o 200px é a distancia do topo ou fim da pagina em pixels, se você quiser que o ícone fique emostado do canto basta por 0px.

Enquanto que right difere entre direita(right) e esquerda(left), e o numero apos é também a distancia da borda.

Você deverá utilizar um elemento HTML/Java script para cada ícone.

Se quiser utilizar os mesmos ícones e lugares que no estudando internet os códigos são:

Para contato por e-mail

<a style="display:scroll;position:fixed;top:420px;right:5px;" href="http://www.123contactform.com/contact-form-djone-35369.html" target="_blank" title="entre em contato"><img src="http://teleideia.com/images/icone_email.png"/></a>

Para voltar a pagina principal

<a style="display:scroll;position:fixed;top:365px;right:5px;" href="http://comoganharcominternet.blogspot.com/" target="_blank" title="voltar a pagina principal"><img src="http://www.shockdownloads.com/Estrutura/ferramentas/home.jpg"/></a>

Perfil do Orkut

<a style="display:scroll;position:fixed;top:310px;right:5px;" href="http://www.orkut.com.br/Main#Profile?rl=mp&uid=5973357316598052161" target="_blank" title="assinar newsletter"><img src="http://4.bp.blogspot.com/_k-BW_JxK-gw/SqQqW7vqJ0I/AAAAAAAACKE/9r7eZhTrTAc/S1600-R/Orkut-48.png"/></a>

Para assinar a newsletter :

<a style="display:scroll;position:fixed;top:255px;right:5px;" href="http://feedburner.google.com/fb/a/mailverify?uri=EstudandoInternet&loc=pt_BR" target="_blank" title="assinar newsletter"><img src="http://lh5.ggpht.com/_EttevOw0KeE/Sphfzc5b7nI/AAAAAAAAGqg/uGzsygEJJzg/1251499947_Social_RSS.png"/></a>

Para twitter

<a style="display:scroll;position:fixed;top:200px;right:5px;" href="https://twitter.com/djonh31" target="_blank" title="siga-me no twitter"><img src="http://lh5.ggpht.com/_EttevOw0KeE/Sphfzajn2mI/AAAAAAAAGqc/hVUj92UxFFg/1251499952_Social_Twitter.png"/></a>

É claro que você deverá trocar os links para os seus serviços, a não ser que você queira redirecionar algum visitante para mim(brincadeira;-))

Se você gostou deste post assine nossa newsletter e tenha todas as atualizações do estudando internet diretamente em seu e-mail.