1º Passo - Instalando o JavaScript
Vamos até o gestor de códigos JavaScript e adicionar o código abaixo Admin PC > Módulos > HTML & JavaScript > Gestão dos códigos JavaScript >> Criar um novo JavaScript.
Título * : Escolha um nome para o JavaScript
Investimento : Em todas as Páginas
Código : Adicione o código abaixo.
- Código:
$(document).ready(function () {
/* TUTORIAL = http://staffergroupbr.stuning.net/t1037- */
$('.tcr a[href*="/u"]').mouseover(function () {
$(this).parents('strong').CSS('position', 'relative');
$('.perfilInfo').remove();
$(this).parents('.tcr').CSS('overflow', 'visible');
$(this).before('<div class="perfilInfo"style="position:absolute;"><span class="setPerfil"><span><img class="PerfilInfoImg"src="http://r25.imgfast.net/users/2517/28/07/20/avatars/1-82.png"/><h2>' + $(this).HTML() + '</h2><p><b>Cargo:</b> <span></span></p><p><b>Posts:</b> <span></span></p><p><b>Registro:</b> <span></span></p><p><b>Pontos:</b> <span></span></p><span class="linkPrf"><a href="/privmsg?mode=post&u=' + $(this).attr('href').replace('/u', '') + '">Enviar MP</a></span><span class="linkPrf"><a href="' + $(this).attr('href') + '">Ver perfil</a></span></span></span></span></div>');
$.get($(this).attr('href'), function (retornoMembro) {
var avtPrf = $('#profile-advanced-right img:first', retornoMembro).attr('src');
$('.PerfilInfoImg').attr('src', avtPrf);
var perfil_rank = $('#profile-advanced-right .module .main-content img:eq(1)', retornoMembro).attr('alt');
var perfil_post = $('#field_id-6 dd', retornoMembro).HTML();
var perfil_cad = $('#field_id-4 dd', retornoMembro).HTML();
var perfil_lastV = $('#field_id-13 dd', retornoMembro).HTML();
$('.setPerfil p:eq(0) span').HTML(perfil_rank);
$('.setPerfil p:eq(1) span').HTML(perfil_post);
$('.setPerfil p:eq(2) span').HTML(perfil_cad);
$('.setPerfil p:eq(3) span').HTML(perfil_lastV)
});
$('.perfilInfo').mouseleave(function () {
$(this).remove()
})
})
});
2º Passo - Instalando o CSS
Agora vamos adicionar o CSS para que o código funcione perfeitamente, vá até Admin PC > Visualização > Imagens e Cores > Cores >> Folha de estilo CSS.
Adicionaremos o código abaixo:
- Código:
/*- Informações do usuário no lastpost -*/
.perfilInfo {
background:url(http://i56.servimg.com/u/f56/17/71/75/73/bottom10.png) no-repeat 98% 0;
float:left;
height:167px;
left:-43em;
padding:16px 0 38px 5px;
top:13px;
width:510px;
z-index:999
}
.linkPrf {
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
background:#F6F6F6;
border:1px solid #DBDBDB;
border-radius:0 0 4px 4px;
border-top:none;
bottom:-7px;
box-shadow:0 1px 0 rgba(255,255,255,1) inset, 0 1px 0 rgba(0,0,0,0.3);
color:#616161;
float:left;
height:14px;
left:13.8em;
margin:2px;
padding:2px;
text-align:center;
text-decoration:none!important;
transition:all .2s ease-in-out;
width:8em
}
.linkPrf:hover {
border-color:#9A9A9A;
color:#4C4C4C
}
.linkPrf:hover a {
color:#4C4C4C
}
.linkPrf a {
color:#616161!important;
font-size:12px;
font-style:normal;
font-variant:normal;
font-weight:normal;
text-decoration:none
}
.setPerfil {
background:rgba(0,0,0,0.3);
border-radius:3px;
display:block;
height:100%;
padding:5px 5px 10px
}
span {
background:#f9f9f9;
border:1px solid #999;
border-radius:3px;
display:block;
height:100%;
padding:3px
}
.setPerfil .PerfilInfoImg {
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.1);
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.1);
background:#fff;
border:1px solid #D5D5D5;
box-shadow:0 2px 2px rgba(0,0,0,0.1);
display:table;
float:left;
height:91px;
padding:1px;
width:91px
}
.setPerfil .PerfilInfoImg:hover {
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.2);
border-color:#A1A1A1;
box-shadow:0 2px 2px rgba(0,0,0,0.2)
}
.setPerfil p div {
display:inline
}
.setPerfil h2 {
background:#E1E1E1;
border-radius:0 10px 0 0;
box-shadow:1px 1px 0 #CCC;
display:block;
float:left;
font-family:"Trebuchet MS";
font-size:19px;
font-style:normal;
font-variant:normal;
font-weight:bold;
margin-bottom:10px;
padding:5px;
text-shadow:1px 1px 0 #fff;
width:382px
}
.setPerfil p {
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
background:#F1F1F1;
border-left:3px solid #333;
border-top:1px solid #333;
box-shadow:1px 1px 0 #CCC;
display:block;
float:right;
font-weight:400;
margin:2px 5px;
padding:5px;
text-align:left;
width:350px
}
.setPerfil p:hover {
box-shadow:1px 1px 0 #9A9A9A
}
/* TUTORIAL = http://staffergroupbr.stuning.net/t1037- */
- Resultado Final
PRECISA DE SUPORTE?
Criador: SPDesign Site: http://staffergroupbr.stuning.net/t1037-tutorial-informacoes-do-usuario-no-lastpost |