[Tutorial] Notificação de MP

Informações:
Autor: Wagner
Funcionalidade: Todas as versões

---

Acesse:

Painel de Controle ☛ Modulos ☛ HTML & Javascripts ☛ Gestão dos códigos javascripts

E Crie um novo javascript com investimento em todas as paginas com esse código:

Código:

function Notifications() {

    setTimeout(function() {

        var xhr = new XMLHttpRequest();
           xhr.onload = function() {
               var messages = this.responseXML.querySelectorAll('img[src="http://2img.net/i/fa/punbb/status_unread.png"]').length;
               if(!messages) return;
                  var $message = document.createElement("div");
                     $message.className = "message slide";
                     $message.title = "Clique para ler";
                     $message.innerHTML = '<a href="/privmsg?folder=inbox">' + messages + ' novas MP\'s</a>';
                  document.body.appendChild($message);
                      
               var $close = document.querySelector("div.message a");
                $close.onclick = function(event){
                  event.preventDefault(true);
                  var $link = this.href;
                  document.querySelector(".message").className = "message";

                  window.setTimeout(function(){
                     top.location.href = $link;
                  }, 1000);
              
               };
           };
           xhr.open("GET", "/privmsg?folder=inbox");
           xhr.responseType = "document";
           xhr.send();


    }, 2500);

};

window.onload = Notifications;

Depois disto, acesse:

Painel de Controle ☛ Visualização ☛ Imagens e Cores ☛ Cores ☛ Folha de Estilo CSS

E Adicione esse código:

Código:


@-webkit-keyframes Notifications{
   0%{
      opacity: 0;
      transform: translateX(-100%);
   }
   50%{
      transform: translateX(15%);
   }
   100%{
      opacity: 1;
      transform: translateX(0);
   }
}
div.message{
   background: rgba(0,0,0,.8);
   bottom: 5%;
   font: normal 1.3em "Arial";
   height: 5em;
   left: 0;
   line-height: 5em;
   opacity: 0;
   position: fixed;
   text-align: center;
   transform: translateX(-100%);
   transition: all ease-in-out .2s;
   width: 20em;
}
div.message a{
   border: #fff 1px solid;
   border-bottom-width: 2px;
   border-radius: 2px;
   color: #fff;
   display: inline-block;
   height: 1em;
   line-height: 1em;
   margin: 1.5em auto;
   padding: .5em 2em;
   position: relative;
   text-decoration: none;
   width: 8em;
}
div.message a:hover{
   background: #fff;
   color: rgba(0,0,0,.5);
}
div.message.slide{
   opacity: 1;
   transform: translateX(0);
   -webkit-animation: Notifications 1s 1;
}

Resultado: