ShiftActif fórum

[TUTORIAL] Avatar no index dos fóruns Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Avatar no index dos fóruns 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Avatar no index dos fóruns 1660898911

[TUTORIAL] Avatar no index dos fóruns

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

  • 0

[TUTORIAL] Avatar no index dos fóruns Empty [TUTORIAL] Avatar no index dos fóruns

Mensagem por Shek em Qui 30 Ago - 12:52


[TUTORIAL] Avatar no index dos fóruns Avatars

Avatar no index dos fóruns


Jà pensou o avatar do último postador em sua página principal? Neste tutorial, vamos aplicar facilmente esse efeito, deixando o código trabalhar por nós.

Atenção:
[TUTORIAL] Avatar no index dos fóruns StopEste tutorial está sob os direitos autoriais de Toxi|Geek. A cópia deste tutorial sem a permissão da equipe Toxi|Geek.com pode resultar em perseguição na justiça. ShiftActif está permitido pelo criador do código a usá-lo como tutorial, e distribuir seu código.


--> Tutoriais <--
Avatar no index dos fóruns



- Noção básica da função:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>
[TUTORIAL] Avatar no index dos fóruns Painel13
[TUTORIAL] Avatar no index dos fóruns 110111Arrow Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Avatar no index dos fóruns 110210Arrow Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções:
No índice : O código será aplicado ao índice do fórum.
No portal : O código será aplicado ao Portal do fórum.
Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns.
Sobre os temas : O código será aplicado aos tópicos do fórum.
Na galeria : O código será aplicado na sua Galeria de imagens.
Em todas as páginas : O código será aplicado em todas as páginas do fórum.
[TUTORIAL] Avatar no index dos fóruns 110310Arrow Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Avatar no index dos fóruns 110410Arrow Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.


- Uso do código e resultados finais:
Vamos aplicar primeiramente o CSS de personalização, então acesse Painel de Controle > Visualização > imagens e Cores > Cores > Folha de estilo CSS >:
/* Avatar na página principal - Desenvolvido por http://shift.forumactif.com/u116 Toxi|Geek */
.avatar-index {float: left;}
.avatar-index img {width: 40px;height: 40px;background: #F4F4F4;border: 1px solid #DDD;margin: 0 5px;padding: 1px;}
.avatar-index img:hover {border: 1px dashed #CCC;}
.avatar-subforo {float: right;}

/* Avatar na página principal - Desenvolvido por http://shift.forumactif.com/u116 Toxi|Geek - FIM */
Ao adicionar, vamos aplicar o código JS.

// No lugar de VERSAO, coloque a versão do seu fórum e letras minúsculas. Por exemplo, phpbb3.
// Desenvolvido por http://shift.forumactif.com/u116 Toxi|Geek.
var versionForum='VERSAO';

eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 0=3;$(4(){0=5});$.6(\'7://8-9.a.b/c/d/1/e.1\');',15,15,'READY_AVATAR|js|var|false|function|true|getScript|http|scripts|giobanii|googlecode|com|svn|trunk|avatar_index'.split('|'),0,{}))
Marque Investimento, para Todas as páginas e Salve.


  • Resultado:
    [TUTORIAL] Avatar no index dos fóruns Result11




© ShiftActif & Toxi|Geek


[TUTORIAL] Avatar no index dos fóruns Exclam11 Copyright
Este tutorial está sob os direitos autoriais de Toxi|Geek. A cópia deste tutorial sem a permissão da equipe Toxi|Geek.com pode resultar em perseguição na justiça. ShiftActif está permitido pelo criador do código a usá-lo como tutorial, e distribuir seu código.

[TUTORIAL] Avatar no index dos fóruns Act_bottom Cada fórum adotará o código. Se por a caso ele repetir as imagens nos sub-fóruns, sendo que há postadores diferentes, crie um novo tópico contendo o título do tutorial e solucione suas questões.


Última edição por Gombor em Dom 9 Dez - 11:08, editado 2 vez(es)
Shek

Shek
Administrador

Masculino
Idade : 25
PointActif's : 5560
ReputActifs : 97
Mensagens : 2715
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%

Ver perfil do usuário http://www.shiftactif.com/
  • 0

[TUTORIAL] Avatar no index dos fóruns Empty Re: [TUTORIAL] Avatar no index dos fóruns

Mensagem por Shek em Ter 18 Set - 16:20


[TUTORIAL] Avatar no index dos fóruns Avatars

Avatar no index dos fóruns


Jà pensou o avatar do último postador em sua página principal? Neste tutorial, vamos aplicar facilmente esse efeito, deixando o código trabalhar por nós.

Atenção:
[TUTORIAL] Avatar no index dos fóruns StopEste tutorial está sob os direitos autoriais de Toxi|Geek. A cópia deste tutorial sem a permissão da equipe Toxi|Geek.com pode resultar em perseguição na justiça. ShiftActif está permitido pelo criador do código a usá-lo como tutorial, e distribuir seu código.

Segunda opção de código, com efeito. ORIGINAL: Forumeiros.com

JS:
Código:
jQuery(document).ready(function(){
       
    if(!window.localStorage) return;
 
    // Avatar par défaut
    var default_avatar= 'http://illiweb.com/fa/invision/pp-blank-thumb.png';
 
    // Temps de cache, ici 24 h * 60 m * 60 s * 1000 ms donc un jour
    var caching_time= 24*60*60*1000;
 
    // Temps de cache d'une erreur, ici 60 s * 1000 ms donc une minute
    var caching_error= 60*1000;
 
    var set_avatar= function(id) {
        $('.mini_ava.member'+id).html('<img src="'+get_avatar(id)+'" />');
    };
 
    var get_avatar= function(id) {
        if(localStorage.getItem('t_ava'+id) < +new Date - caching_time || (localStorage.getItem('d_ava'+id)==default_avatar && localStorage.getItem('t_ava'+id) < +new Date - caching_error))
        {
            localStorage.setItem('d_ava'+id, default_avatar);
            $.get('/u'+id, function (d){
                localStorage.setItem('t_ava'+id,+new Date);
                localStorage.setItem('d_ava'+id, $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img',d).first().attr('src')||default_avatar);
                set_avatar(id);
            });
        }
        return localStorage.getItem('d_ava'+id);
    };
 
    var to_replace= {};
 
    $('dd.lastpost strong a.gensmall, .ipbtable tr td:last-child span strong a.gensmall, .table td.tcr strong a.gensmall, .forumline .row3.over strong a.gensmall').each(function(){
        to_replace[$(this).attr('href').substr(2)]= 1;
        $(this).closest('td,dd').prepend('<div class="mini_ava member'+$(this).attr('href').substr(2)+'"></div>');
    });
 
    for(i in to_replace)
    {
        set_avatar(i);
    };
 
});

CSS:
.mini_ava {
float: left;
}
.mini_ava img {
width: 40px;
height: 40px;
margin: 0 5px;
border-radius: 10px;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.mini_ava img:hover
{
width: 80px;
height: 80px;
}



© ShiftActif & Toxi|Geek


[TUTORIAL] Avatar no index dos fóruns Exclam11 Copyright
Este tutorial está sob os direitos autoriais de Toxi|Geek. A cópia deste tutorial sem a permissão da equipe Toxi|Geek.com pode resultar em perseguição na justiça. ShiftActif está permitido pelo criador do código a usá-lo como tutorial, e distribuir seu código.

[TUTORIAL] Avatar no index dos fóruns Act_bottom Cada fórum adotará o código. Se por a caso ele repetir as imagens nos sub-fóruns, sendo que há postadores diferentes, crie um novo tópico contendo o título do tutorial e solucione suas questões.
Shek

Shek
Administrador

Masculino
Idade : 25
PointActif's : 5560
ReputActifs : 97
Mensagens : 2715
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%

Ver perfil do usuário http://www.shiftactif.com/

[TUTORIAL] Avatar no index dos fóruns Empty Re: [TUTORIAL] Avatar no index dos fóruns

Mensagem por Shek em Ter 2 Out - 12:25

Shek

Shek
Administrador

Masculino
Idade : 25
PointActif's : 5560
ReputActifs : 97
Mensagens : 2715
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%

Ver perfil do usuário http://www.shiftactif.com/

[TUTORIAL] Avatar no index dos fóruns Empty Re: [TUTORIAL] Avatar no index dos fóruns

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


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

- Tópicos similares

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