[Tutorial] Footer flutuante

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

avatar
Admin
Administrador
Tempo Online : 250d 6h 21m 59s
Mensagens : 693
Reputação : 4
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Sex Set 30, 2016 4:05 pm

Informações:
Autor:
Desconhecido
Funcionalidade: Todas as versões




Acesse:
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS
E Adicione esse código:
Código:

#icons1 {
position: fixed;
width: 580px;
text-align: center;
bottom: 0px;
right: 25px;
background-color: #ffffff;
background-image: url(http://i26.servimg.com/u/f26/12/56/56/12/12210.png);
background-repeat: repeat-x;
background-position: center left;
border: 1px solid #80c9ff;
border-bottom: 0px;
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
box-shadow: 0 0 7px LightGrey;
-webkit-box-shadow: 0 0 7px LightGrey;
-moz-box-shadow: 0 0 7px LightGrey;
z-index: 999;
}

.iconsz img {
margin-top: 0px;
width: auto;
height: 18px;
background-color: transparent;
background-image: url('');
background-position: center center;
background-repeat: repeat-x;
padding: 4px 4px;
border: 0px solid #fff;
}
.iconsz img:hover {
background-color: #80c9ff;
margin-top: 0px;
width: auto;
height: 18px;
padding: 4px 4px;
border: 0px solid #fff;
}
#icons1 a small {
text-align: center;
width: 150px;
padding: 2px 0px;
display: none;
background-color: #ffffff;
color: #000000;
font-weight: bold;
font-size: 10px;
font-family: Arial;
background-image: url(http://i26.servimg.com/u/f26/12/56/56/12/12210.png);
background-repeat: repeat-x;
background-position: center left;
border: 1px solid #80c9ff;
border-bottom: 0px;
}
#icons1 a:hover small {
display: block;
position: absolute;
margin-top: -20px;
top: 0;
right: 10px;
z-index: 999;
}

Depois disto, acesse:
Painel de Controle Modulos Portal & Widgets Gestão dos widgets do fórum
E Crie um novo widget com esse código:
Código:
<div id="icons1"><div class="icons img"><div id="icons">
<a href="URL AO CLICAR NA IMAGEM" target="_self"><img src="URL DA IMAGEM" border="0"><small>TEXTO AO PASSAR POR CIMA DA IMAGEM </small></a>
<a href="URL AO CLICAR NA IMAGEM" target="_self"><img src="URL DA IMAGEM" border="0"><small>TEXTO AO PASSAR POR CIMA DA IMAGEM </small></a>
<a href="URL AO CLICAR NA IMAGEM" target="_self"><img src="URL DA IMAGEM" border="0"><small>TEXTO AO PASSAR POR CIMA DA IMAGEM </small></a>
<a href="URL AO CLICAR NA IMAGEM" target="_self"><img src="URL DA IMAGEM" border="0"><small>TEXTO AO PASSAR POR CIMA DA IMAGEM </small></a>
</div></div></div>

As edições devem ser feitas no Código html acima... Visto que deixei explicando já!

Resultado:

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum