[TUTORIAL] Usuário para publicidade

Usuário para publicidade

Sabemos que a publicidade é um dos fatores mais importantes em nossos fóruns. E para melhorar esse fator, veremos neste tópico como criar um pseudo-usuário que ficará no final de cada tópico presente no fórum, anunciando o conteúdo que desejar.

--> Tutoriais, Dicas e Astúcias <--
Usuário para publicidade

PunBB

1º - Localizar e editar o template:
Painel de Controle  Visualização  Templates  Geral viewtopic_body  ()

Localize:

TABELA DE CÓDIGO: --------------------------------------------------------------------------------------------SELECIONAR CONTEÚDO

<!-- END postrow -->
      </div>

Logo abaixo da tag "</div>", adicione o código abaixo:

<div class="main-content topic">
<div class="post"{postrow.displayed.THANK_BGCOLOR}>
<a name="{postrow.displayed.U_POST_ID}"></a>
<div class="postmain"{postrow.displayed.THANK_BGCOLOR}>
<div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}>
</div>

<div class="postbody"{postrow.displayed.THANK_BGCOLOR}>

<div class="user">
<div class="user-ident">
<h4 class="username">
<br/>Publicidade</h4>
<div class="user-basic-info">

<br/><img src="Link do avatar" />
</div>
</div>
<div class="user-info">
Rank: Publicitário

</div>
</div>

<div class="post-entry">
<div class="entry-content">

<div>
<div><strong>
Sua publicidade aqui!
</strong></div>
<div class="clear"></div>
</div>
<p>
{postrow.displayed.EDITED_MESSAGE}
</p>
</div>
</div>
</div>


<div class="postfoot">
<div class="user-contact">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</div>
<div class="post-options">
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
<hr id="first-post-br" />
<div class="main-content topic">
<p class="p-hidden">{postrow.hidden.MESSAGE}</p>
</div>

Atenção para o que está em:

Vermelho: Nome do usuário.
Laranja: Link do Avatar do membro. Padrão: http://i.imgur.com/wbIOt.png
Azul: Informações adicionais sobre o usuário (opcional).
Verde: Conteúdo da Publicidade.

Por fim, clique em Salvar e depois em Publicar () para validar as alterações realizadas no template.

PhpBB2

1º - Localizar e editar o template:
Painel de Controle  Visualização  Templates  Geral viewtopic_body  ()

Localize:

TABELA DE CÓDIGO: --------------------------------------------------------------------------------------------SELECIONAR CONTEÚDO

{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

Substitua por:

TABELA DE CÓDIGO: --------------------------------------------------------------------------------------------SELECIONAR CONTEÚDO

 <div class="adds48">    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>

Localize e apague:

TABELA DE CÓDIGO: --------------------------------------------------------------------------------------------SELECIONAR CONTEÚDO

  <tr align="right">
          <td class="catBottom" colspan="3" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="9%" class="noprint"> </td>
                  <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
                  <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
                </tr>
            </table>
          </td>
      </tr>
    </table>

E então, embaixo de:

TABELA DE CÓDIGO: --------------------------------------------------------------------------------------------SELECIONAR CONTEÚDO

<!-- END no_post -->

Adicione:

<tr class="post">
<tr>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
</tr>

<tr>
<td class="row1" align="left" valign="middle" >
<div class="robot-contet">
Assunto: Re: <h1 class="cattitle">{TOPIC_TITLE}</h1>
<img class="sprite-icon_miniposted" src="http://illiweb.com/fa/empty.gif" /><Br/><br/>
Sua publicidade aqui!</div>
<div class="robot"><strong>Publicidade</strong><Br/>
<Br/><br/>
<img src="Link do avatar" width="100px" /><br/><br/><br/>
<strong>Rank: Publicitário</strong><Br/><br/>
</div>
</td>
</tr>
</tr>


<tr align="left">

<td class="row1" colspan="3" height="28">
<div class="robot-scroll-img">
<a href="#top">{L_BACK_TO_TOP}</a>
<a href="#bottom">{L_GOTO_DOWN}</a></div>


<span class="genmed">{no_post.L_NO_POST}</span>
</td></tr>

Atenção para o que está em:

Vermelho: Nome do usuário.
Laranja: Link do Avatar do membro. Padrão: http://i.imgur.com/wbIOt.png
Azul: Informações adicionais sobre o usuário (opcional).
Verde: Conteúdo da Publicidade.

Por fim, clique em Salvar e depois em Publicar () para validar as alterações realizadas no template.

2º - Adicionar o CSS:
Painel de Controle  Visualização  Imagens e Cores  Cores  Folha de estilos CSS

Adicione o seguinte código e Salve:

TABELA DE CÓDIGO: --------------------------------------------------------------------------------------------SELECIONAR CONTEÚDO

  .robot{
        position: relative;
      left: 8px;
        font-size: 11px;
        border-right: solid 1px #000;
        width: 170px;
        height: 250px;
        }
        .cattitle{
        color: #000;
        font-weight: normal;
        font-size: 10px;
        }
      .robot-contet{
        height: 0px;
        position: relative;
        left: 200px;
        width: 80%;
        font-size: 11px;
        }
        .robot-scroll-img{
        border-right: solid 1px #000;
        position: relative;
        left: 70px;
        height: 28px;
        width: 108px;
        }
    .adds48{
        width: 175px;
        }
   

Para editar a cor da linha que divide o perfil da mensagem, edite o seguinte CSS, sendo o que está em vermelho, a cor desejada.:

border-right: solid 1px #000;

PhpBB 3 & Invision

1º - Estudando o código:

jQuery(document).ready(function(){var n='NOME';var p='CONTEUDO';var i='IMAGEM';var f='INFORMAÇÕESADICIONAIS';if(jQuery('#wrap').length){var o='<div class="post row1 online" style="margin:10px 0px 10px 0px"><span class=corners-top><span></span></span><div class=postbody><div class=content>'+p+'</div></div><div class=postprofile><dl><dt><img src='+i+'><br><b style=font-size:1.2em>'+n+'</b></dt><br><dd>'+f+'</dd></dl></div><span class=corners-bottom><span></span></span></div>'}else{var o='<div class="post online" style="margin:10px 0px 10px 0px"><div class=post-container><div class="postbody clearfix"><div class=postprofile><dl class="postprofile-details postdetails"><dt><img src="'+i+'"><br><b>'+n+'</b></dt><dd><br>'+f+'</dd></dl></div><div class="postbody-head postdetails post-header"></div><div class=post-entry>'+p+'</div></div></div></div>'};jQuery('.post:eq(0)').after(o)});

Vermelho: Nome do usuário.
Laranja: Link do Avatar do membro. Padrão: http://i.imgur.com/wbIOt.png
Azul: Informações adicionais sobre o usuário (opcional).
Verde: Conteúdo da Publicidade.

2º - Adicionando código .JS:

Para podermos adicionar tal efeito, primeiro teremos que usar um codigo .JS, para isso aceda ao seu Painel de controle -> Modulos -> HTML e Java Script -> Gestão dos codigos Java Script -> criar um novo Java Script.

Titulo -> O que desejar.
Investimento -> Em todas as páginas
Código JavaScript -> Seu código que estudamos no passo anterior

Resultado final:


Expandir esta imagem Ver em tamanho real

---