Widget de parceiros deslizante no fim da página

[Holkis]

Olá Convidado,

Minha seguinte dúvida é: Ao ler o tutorial que ensina a colocar banner no rodapé fiz de acordo com que pede, mas o efeito não surtiu. Vou mostrar as imagens em print, e veja se a algo errado.
Link do tutorial: https://ajuda.forumeiros.com/t41812-
Link do meu fórum: http://holkis.forum.st/ (PHPBB3)
Criei as duas páginas de HTML:

Os códigos que estou utilizando são estes.

Código:

<link rel="stylesheet" href="/css.forum" type="text/css" /><style type="text/css"> body {background:transparent;padding:0px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script>
http://ajuda.forumeiros.com

function bannerforumtodo () {var imagem = new Array();var endereco = new Array();

// Versão do Fórum
var versao = 'phpbb3'; // Coloque a versão utilizada: phpbb2, phpbb3, punbb, invision

// Parcerias
endereco.push('http://holkis.forum.st/t12-');imagem.push('http://i.imgur.com/ONfoZsD.png');
endereco.push('http://holkis.forum.st/t12-');imagem.push('http://i.imgur.com/ONfoZsD.png');
endereco.push('http://holkis.forum.st/t12-');imagem.push('http://i.imgur.com/ONfoZsD.png');
endereco.push('http://holkis.forum.st/t12-');imagem.push('http://i.imgur.com/ONfoZsD.png');
endereco.push('http://holkis.forum.st/t12-');imagem.push('http://i.imgur.com/ONfoZsD.png');
//Podem adicionar ou retirar banners deste local

//Título Widget
var tituloparcerias = 'Parcerias';
var tituloparceriasa = 'center'; //left=esquerda right=Direita center=centralizado

// Scroll
var scroll = 'sim'; //coloque "sim" para rolar, e "nao" para ficar estático.
var svelocidade = '3'; //Quanto maior o número maior a velocidade.
var sdirection = 'left'; //left=esquerda right=Direita

// HTML no final do Widget
var scrollHtml = '<center><a href="/-fx" style="font-size:13px;">Clique aqui para fazer uma parceria!</a></center>';
//Colocar o que quiser depois dos banners.


//Não mecher a partir desta parte
//Não mecher a partir desta parte
//Não mecher a partir desta parte

var scrollA='';var scrollB='';
if(scroll=='sim'){
scrollA += '<marquee width="100%" scrollamount="' + svelocidade + '" direction="'+sdirection+'" id="scrollerP"><span onMouseOver="bover();" onMouseOut="bout();">';
scrollB += '</span></marquee>';
}else{scrollA +='<center>';scrollB +='</center>';}

var bannersA='';
if(versao=='phpbb2'){bannersA+='<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"><tbody><tr><td class="catLeft" height="25"><span class="genmed module-title" style="text-align:'+tituloparceriasa+'">'+tituloparcerias+'</span></td></tr><tr><td class="row1" align="left" style="height:auto;">';}
if(versao=='phpbb3'){bannersA+='<div class="module"><div class="inner"><span class="corners-top"><span></span></span><div class="h3" style="text-align:'+tituloparceriasa+'">'+tituloparcerias+'</div>';}
if(versao=='punbb'){bannersA+='<div class="module main"><div class="module"><div class="main-head" style="text-align:left;"><div class="h3" style="text-align:'+tituloparceriasa+';">'+tituloparcerias+'</div></div><div class="main-content clearfix" style="padding: 5px;">';}
if(versao=='invision'){bannersA+='<div class="module borderwrap"><div class="maintitle"><h3 style="text-align:'+tituloparceriasa+'">'+tituloparcerias+'</h3></div><div class="box-content">';}

var bannersB = '';var i = 0;
while (i < imagem.length){
bannersB += '<a href="'+ endereco[i]+'" target="_blank"><img class="alturaimg" src="'+ imagem[i]+ '" border="0" /></a> ';
i++;}

var bannersC='';
if(versao=='phpbb2'){bannersC+='</td></tr></tbody></table>';}
if(versao=='phpbb3'){bannersC+='<span class="corners-bottom"><span></span></span></div></div>';}
if(versao=='punbb'){bannersC+='</div></div>';}
if(versao=='invision'){bannersC+='</div></div>';}

document.getElementById("barraparceirosA").innerHTML = bannersA+scrollA+bannersB+scrollB+'<br>'+scrollHtml+bannersC;

if(imagem.length != endereco.length) { alert('Os links e as imagens do banner não estão correspondendo corretamente, cuidado!'); }
document.getElementById('scrollerP').start();


}
function bover() { document.getElementById('scrollerP').stop();}
function bout() { document.getElementById('scrollerP').start();}
WINDOWonload=bannerforumtodo;
</script>
<div id="barraparceirosA">
</div>

Código:

jQuery(document).ready(function(){ // Página dos banners var pagina = '/-h1.htm'; // Coloque a página criada anteriormente // Altura dos Banners var alturabanner = 50; alturabanner=alturabanner+65; jQuery('#page-footer,#pun-foot,#gfooter').before(' <iframe style="width: 100%;" frameborder="0" scrolling="no" allowtransparency="true" src="'+pagina+'" id="barraparceirosA"></iframe> '); });

O segundo código que é Jquery, testei em JavaScript e deu conflito entre os códigos. Portando não funciona.

E já na descrição, veja como esta no print.

Já tentei altera o link do HTML e mesmo não surtiu efeito.

O que possa ser?  

Abraços.

[Troubleshoot]

@Holkis
Olá,
O senhor não acha melhor adicionar o código da página HTML diretamente no template? Assim não é necessário o uso do Javascript para inserir a página no final do footer.

Caso queira inserir diretamente, me envie o código do seu template overall_footer_end.

Até mais.

[Holkis]

Olá,

Claro amigo. Cá está:

Código:

<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
   <div>
      <div>
         <div>
            <div>
               <div>
                  <div>
                     <ul>
                        <li>
<!-- END html_validation -->
                        </li>
                     </ul>
                     <!-- BEGIN switch_footer_links -->
                     <ul class="linklist clearfix">
                        <li class="rightside">
                           <!-- BEGIN footer_link -->
                              <!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->
                              {switch_footer_links.footer_link.FOOTER_LINK_SEPARATOR}<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
                           <!-- END footer_link -->
                        </li>
                     </ul>
                     <!-- END switch_footer_links -->
                     <span class="corners-bottom"><span></span></span>
                  </div>
               </div>
               <p class="copyright">
                  <strong>{ADMIN_LINK}</strong>
               </p>
            </div>
            {PROTECT_FOOTER}
         </div>
      </div>
   </div>
</div>

<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    FB.init({
      appId      : {switch_facebook_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
   if ($('a#logout'))
   {
      var lien_redir = $('a#logout').attr('href');

      if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
      {
         document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
      }
   }
});

$(document).ready( function() {
   $('a#logout').click( function() {
      FB.logout();
   } );
} );
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
</html>

Abraços.

[Troubleshoot]

@Holkis
Altere o código do template por este:

Código:


<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
   <div>
      <div>
         <div>
            <div>
               <div>
                  <div>
                     <ul>
                        <li>
<!-- END html_validation -->
                        </li>
                     </ul>
                     <!-- BEGIN switch_footer_links -->
                     <ul class="linklist clearfix">
                        <li class="rightside">
                           <!-- BEGIN footer_link -->
                              <!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->
                              {switch_footer_links.footer_link.FOOTER_LINK_SEPARATOR}<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
                           <!-- END footer_link -->
                        </li>
                     </ul>
                     <!-- END switch_footer_links -->
                     <span class="corners-bottom"><span></span></span>
                  </div>
               </div>
               <p class="copyright">
                  <strong>{ADMIN_LINK}</strong>
               </p>
            </div>
            {PROTECT_FOOTER}
         </div>
      </div>
   </div>
</div>

<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    FB.init({
      appId      : {switch_facebook_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
   if ($('a#logout'))
   {
      var lien_redir = $('a#logout').attr('href');

      if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
      {
         document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
      }
   }
});

$(document).ready( function() {
   $('a#logout').click( function() {
      FB.logout();
   } );
} );
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

<div id="ParceirosHolkis"><marquee><a href="http://holkis.forum.st/" target="_blank"><img src="http://i.imgur.com/oaqRezU.png"></a></marquee></div>
<style>
div#ParceirosHolkis img {
  width: 220px;
  height: 60px;
}
  /*
div#ParceirosHolkis img
Mude o valor em PX para determinar a altura e largura das imagens.
Width = Altura | Height = Largura PX
*/</style>
<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
</html>


Para realizar modificações, procure por 'ParceirosHolkis' e altere os valores do código(adicionei um resumo para facilitar a modificação ).


Até mais.

[Holkis]

Olá,

Deu certo, mas caso queira multiplicar o código para adicionar mais banner? Qual seria? Como faço para estar personalizando de forma que fique mais modelada.

Até mais.

[Troubleshoot]

O código é bastante simples, veja:

<div id="ParceirosHolkis"><marquee><a href="http://holkis.forum.st/" target="_blank"><img src="https://i.imgur.com/oaqRezU.png"></a></marquee></div>
<style>
div#ParceirosHolkis img {
  width: 220px;
  height: 60px;
}
  /*
div#ParceirosHolkis img
Mude o valor em PX para determinar a altura e largura das imagens.
Width = Altura | Height = Largura PX
*/</style>

Para adicionar outros banners, altere o código em negrito da seguinte forma:

<div id="ParceirosHolkis"><marquee><a href="http://holkis.forum.st/" target="_blank"><img src="https://i.imgur.com/oaqRezU.png"></a>
<a href="LINK DO PARCEIRO" target="_blank"><img src="BANNER DO PARCEIRO"></a>
<a href="LINK DO PARCEIRO" target="_blank"><img src="BANNER DO PARCEIRO"></a>
<a href="LINK DO PARCEIRO" target="_blank"><img src="BANNER DO PARCEIRO"></a>
</marquee></div>

Para mais informações sobre como editar o HTML, leia este tópico  Adicionando link a uma imagem - HTML

Até mais.

[Holkis]

Olá,

Perfeito @Troubleshoot , tenha o meu obrigado.

Abraços.