[TUTORIAL]Alerta igual, ao facebook

Aprenda agora, como colocar um alerta igual ao facebook...

--> Tutoriais, dicas e astúcias <--
[TUTORIAL]Alerta igual, ao facebook

1º - Aceda a:
Painel de controle Modulos Gestão dos widgets do fórum Criar um widget personalizado.

Nome do widget : Coloque o que quiser
Utilizar um table type : Marque Não!
Título do Widget: Deixe em branco
Fonte do widget :

Código:

<span class="usernamepainel" id="usernamepainel">{USERLINK}</span>

2º - Aceda a:
Painel de controle Modulos HTML & JAVASCRIPT Gestão dos codigos javascript Criar um novo Javascript

Título
- Terá de colocar um título para a página, de forma a poder
identifica-lo na lista de páginas JavaScript do Painel de Controle;
Investimento - Escolha a opção "Em todas as páginas"
Código JavaScript - Neste campo teremos de inserir o código que esta logo abaixo;
Confirmar
- Por fim, após adicionar o código, terá de clicar neste botão para
salvar a criação. Se você clicar em um outro botão ou em uma outra
seção, as mudanças não serão validadas.


Coloque o seguinte codigo na caixa:

Código:

jQuery(document).ready(function(){
   
    $.get('/forum', function(nome1){
    var link1 = $('#usernamepainel a:eq(0)', nome1).attr('href').split('u=')[1];
    $.get('/u'+link1+'stats', function(nome2){
    var link2 = $(' a[href*="/st/"]',nome2).attr('href');
    $.get(link2, function(nome3){
    jQuery('tr td.tdtopics .status img[alt="Novas mensagens"]:eq(0)',nome3).each(function(){

$('#popupnew').append($('img[alt="Novas
 mensagens"]',
nome3).parent().parent().siblings('td.tcr').children('strong').html()
+', postou no topico:<b>'+$('tr td.tdtopics .status img[alt="Novas
 
mensagens"]',nome3).parent().siblings('h2.topic-title').html()+'</b>');
$('#popupnew').fadeIn('slow');
$('body').prepend('<div
 style="font-family: Segoe UI, Calibri, sans-serif; border-radius: 1em
1em 0px 0px; background-color: #efefef; border: 1px solid #acacac;
position: fixed; padding: 5px; box-shadow: 0px 0px 1px black, 0px 0px
5px gray, 0px 0px 10px black, 0px 0px 15px gray, 0px 0px 20px black;
bottom: 0px; right: 0px; margin-right: 40px; z-index:
9999;">Desenvolvido por: <font style="color: lightblue;
text-shadow: 0px 0px 3px black, 0px 0px 3px indigo, 0px 0px 3px purple,
0px 0px 3px pink;">BangBang</font></div>');
});
   
    });
    });
    });
$('body').prepend('<div id="popupnew"></div>');
    });

3º - Aceda a:
Painel de controle Visualização Imagens e Cores Cores Folha de Estilo CSS
Coloque o seguinte codigo:

Código:


#popupnew {
font:12px/16px Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
cursor:pointer;
color:#333;
outline:0;
text-decoration:none;
background-color:#eceff5 !important;
border-bottom-color:#eceff5 !important;
min-height:50px;
border-left: 10px solid !important;
min-width: 200px;
position: absolute;
position: fixed;
bottom: 30px;
margin-left: 40px;
border-radius: 0px 1em 1em 0px;
padding: 5px;
box-shadow: 0px 0px 3px black, 0px 0px 5px black, 0px 0px 10px black, 0px 0px 15px black;
z-index: 999;
display:none;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size: 12px/16px;
}


O resultado é igual do facebook....

Créditos: BangBang