Random Template

quarta-feira, 28 de dezembro de 2011

Tutorial - Colocar Imagem Ou Objetos Flutuantes

Sabe aquelas imagens ou pequenos menus q se movem quando vc rola a página pra cima ou pra baixo? Pois então, se vc vê alguma utilidade nisso, descobri como fazê-las. Pode ser interessante quando vc quer que seus visitantes vejam uma mensagem importante ou para dar destaque a alguma parte do seu blog ou mesmo para alguma promoção ou anunciante.

É até simples de implementar, veja como… 

Não precisa ser apenas imagens, podem ser widgets ou links e até um pequeno menu. Vai de sua criatividade para utilizar o recurso da melhor forma.

Esta é uma dica que serve para dar destaque a algo relevante em seu blog. Para quem não tem muito espaço para as publicidades, tá aí uma ferramenta bem útil.

Lembrando sempre que, se vai fazer alguma modificação no seu modelo, faça um backup para evitar sustos depois.

Siga os seguintes passos:


1. Vá até “Layout” e abra a aba “Editar HTML” e marque “Expandir modelos de widgets”.

2. procure pela seguinte linha: ]]></b:skin>

3. Logo Acima dessa linha cole o seguinte código:

------------------------------------------------------------------------------------------------------------------------------------

#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}


------------------------------------------------------------------------------------------------------------------------------------ 

4. O destaque em vermelho é a posição com relação à tela, que pode ser: “left”, “right”, “top”, “buttom”.

5. Agora encontre a linha “<body>” e cole abaixo dela:

-----------------------------------------------------------------------------------------------------------------------------

<div id="float_corner">
O que quer q flutue na tela… 
</div>
 

-----------------------------------------------------------------------------------------------------------------------------

Entre essas duas linhas de código, coloque o q vc quiser q flutue na tela. Pode ser uma imagem, um menu, um link ou até publicidades – como já dissemos antes. Cabe a sua criatividade.


6. Salve e veja o resultado.

Faça vários teste e veja como fica.

0 comentários:

Postar um comentário

Twitter Delicious Facebook Digg Stumbleupon Favorites More