![[Tutorial]Criando um Widget de Footer Empty](https://2img.net/i/empty.gif)
[Tutorial]Criando um Widget de Footer Ter 16 Jul 2013 - 16:59
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Nome do Arquivo: [Tutorial]Criando um Widget de Footer Autor: Victor Menezes
Funcionalidade: Todas as versões
Categoria: Recursos de Outros Autores
ola,hoje estarei disponibilizando um código de footer para as pessoas que querem usar mais de 1 Widget no rodapé que não é possível,no caso seria adicionado no portal,pelo fato de não ser adicionavel no forum,más ha uma possibilidade para tudo no caso daria para adicionado há overall_footer,isso ainda eu não adaptei!
vamos lá!!!
primeiramente os códigos são meus,então há créditos se forem postar em outros lugares,por favor deixe os créditos!
vamos ao Painel::Módulos::Portal:::Estrutura,:
crie um novo widget com essas informações:
Nome do widget : deixe oque quiser
Utilizar um table type :não
Título do widget :<no>
Fonte do widget * : coloque esse código;
- Código:
<!-- Créditos By victorMenezes-->
<center><div id="footbar">
<div id="footbar-esq">
<div class="footwid">
<h2 class="wid-title">
Parceiros
</h2>
<div class="execphpwidget">
<div style="margin: 0; padding: 0; height: 111px; display: block; overflow: hidden; text-align: center;">
<div id="quotearea">
<div id="quoterotator" style="display: block; opacity: 0.883750454440156;"><a href="#link" target="_blank"><img src="http://i.imgur.com/XNmNO3P.gif" alt=""></a><a href="#link" target="_blank"><img src="http://i.imgur.com/XNmNO3P.gif" alt=""></a><a href="#link" target="_blank"><img src="http://i.imgur.com/XNmNO3P.gif" alt=""></a><a href="#link" target="_blank"><img src="http://i.imgur.com/XNmNO3P.gif" alt=""></a><a href="#link" target="_blank"><img src="http://i.imgur.com/XNmNO3P.gif" alt=""></a><a href="#link" target="_blank"><img src="http://i.imgur.com/XNmNO3P.gif" alt=""></a><a href="#link" target="_blank"><img src="http://i.imgur.com/XNmNO3P.gif" alt=""></a><a href="#link" target="_blank"><img src="http://i.imgur.com/XNmNO3P.gif" alt=""></a><a href="#link" target="_blank"><img src="http://i.imgur.com/XNmNO3P.gif" alt=""></a><br></div>
</div>
<script type="text/javascript">
quoteRotator.quotesInit();
</script>
</div>
<center>
<div style="margin: 0; padding: 0; clear:both;">
<a href="#link">
<div class="h6mei" style="width: 133px; float:right; margin-left: 3px;">
<b>
Afiliados »
</b>
</div>
</a>
<a href="#link">
<div class="h6mei" style="width: 134px; float: left;">
<b>
Seja nosso parceiro!
</b>
</div>
</a>
</div>
</center>
</div>
</div>
</div>
<div id="footbar-mei">
<div class="footwid">
<h2 class="wid-title">
Divulgue-nos no seu site
</h2>
<div class="textwidget">
<center>
<div style="margin: 0; padding: 0; height: 111px; display: block; overflow: visible;">
<img src="http://i.imgur.com/XNmNO3P.gif" alt="Nome do seu forum" style="margin: 5px 0 9px 0;">
<br>
<textarea onclick="this.select();" name="buttonbox" style="font-family:arial; font-size:9px; color:#75afe8; margin: 0; padding: 2px; line-height: 12px; border:1px solid #75afe8; background-color: white; height: 50px; width: 95%; max-width: 260px; max-height: 50px; resize:none; overflow: hidden; cursor: pointer;"> <a href="link" target="_blank"><img src="img" border="0" title="Nome do seu forum" alt="Nome do seu forum" /></a>
</textarea>
</div>
<center>
<div style="margin: 0; padding: 0; clear:both;">
<a href="#link">
<div class="h6mei" style="width: 134px; float:right; margin-left: 3px;">
<b>
Outros banners »
</b>
</div>
</a>
<a href="#link">
<div class="h6mei" style="width: 133px; float: left;">
<b>
Nome»
</b>
</div>
</a>
</div>
</center>
</center>
</div>
</div>
</div>
<div id="footbar-dir">
<div class="footwid">
<h2>
Últimas do fórum
</h2>
<div style="height:100px; width:282px; overflow:hidden; display:block;">
</div>
<center>
<!-- coloque códigos html -->
<!-- coloque códigos html fim -->
<div style="padding: 11px 0 0 0; margin: 0;">
<a href="#link" style="color: #356ea6;">
<h6>
<b>
Ir ao fórum »
</b>
</h6>
</a>
</div>
</center>
</div>
</div>
</div></center>
<!-- Créditos By victorMenezes-->
você ja fez a primeira parte agora vamos ao css:
Painel::Visualização::imagem e cores::Cores:::Folha Estilo CSS,adicione isso:
- Código:
/*rodapé portal*/
.h6mei:hover {
background-color: #B2C7F5;
border: 1px solid #86A1DF;
text-decoration: underline;
}
.h6mei {
background-color: #CAD8F7;
padding: 2px;
font: 11px Arial, "Helvetica", sans-serif;
border: 1px solid #b5c6ea;
margin: 1px 0 0 0;
text-align: center;
}
#quotearea {
margin: 6px;
height: 160px;
}
#footbar {
display: block;
min-height: 165px;
margin: 0 13px 0 12px;
padding: 20px 0;
clear: both;
overflow: visible;
}
#footbar-esq {
float: left;
width: 340.2px;
min-height: 165px;
margin: 0 16px 0 0;
}
.footwid {
list-style: none;
padding: 3px;
font-size: 11px;
margin: 0 0 8px 0;
border: 1px solid #b5c6ea;
background: #F0F5F8;
overflow: hidden;
}
.footwid h2 {
background: #232b2b;
border-bottom: 0;
border-top: 4px solid #4F8F16;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: 700;
padding: 10px 5px;
text-shadow: 0 0 3px #004403;
}
#footbar-mei {
float: left;
width: 340.9px;
min-height: 165px;
margin: 0 16px 0 0;
}
#footbar-dir {
float: left;
width: 340.9px;
min-height: 165px;
margin: 0;
}
agora você deve deixar o widget assim,veja a imagem:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
pronto esta terminado agora vamos as observações:
primeiramente se seu forum possui largura menor ou maior,você tera que editar na css cada widget assim:
procure:#footbar-esq,#footbar-mei ,#footbar-dir;
bom esses são os primários para mudar a largura deles tem que modificar em cada um,nessa parte:
- Código:
width:
qualquer duvida referente a cor,onde mudá-las e outros pode postar aqui!!!
![[K]oke](https://i.imgur.com/07ALhxb.png)
