sábado, 12 de novembro de 2011

Colocar Um Botão Flutuante “Follow Us” - Twitter

“Podemos colocar um ícone Twitter como imagem flutuante com posição fixa. Isso vai atrair o visitante para clicar nele. Você pode conferir a demo Emocutez Veja,  na posição inferior direita da tela, há um gracioso ícone Follow Us onTwitter.”
Esse botão e o tutorial  foram publicados por Ipiet  e eu achei lindinho, além de fácil de colocar.  Por isso traduzi para vocês. 
Como fazer? Siga este passo a passo.

Vá em  Layout e depois ►  Editar HTML 
Copie copie o código CSS abaixo
#floatingimage {
bottom:10px;
right:0px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#floatingimage a img {border:0}
Encontre o seguinte trecho:
]]></b:skin>
Cole o código copiado logo ANTES do trecho.
Agora copie o  código HTML abaixo
<div id='floatingimage'>
<a href='http://twitter.com/SEUNOMETWITTER'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvn7J2gYBZHzXUuaXBVYiVOjGM1BVa-r_V7kyk8xEgQgqV3lWYubC4AfdF2w7e2DusbhDRLLNsuQjPgSMboVOJMssFE3ROIWy8C0SFQW0cecDOq60fbYwsWviu1tdVwLSOMbLQYPjx20cQ/s1600/follow+us.png'/></a></div>
Cole ANTES da tag

</body>

Visualize e se estiver  tudo bem e salve.

Prontinho.
O trecho marcado em azul é onde você escreve seu nome de usuário e em vermelho é o endereço da imagem que você poderá trocar por uma outra que mais combine com seu layout.

0 comentários:

Postar um comentário

Poste Seu Comentário

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
O Templates E Dicas DNB está de volta!