Mi piace: sistema di voto nei messaggi


Tutorial Mi piace: sistema di voto nei messaggi

Messaggio Da MattiaDes il Gio 6 Ago 2015 - 22:28

Mi piace: sistema di voto nei messaggi


Buongiorno! Con questo tutorial vedremo come inserire un sistema di voto nei messaggi del proprio forum.  Come prima cosa, come sempre, bisognerà aggiungere un codice CSS nel foglio di stile del proprio forum.

Pannello di amministrazione mi piace - Mi piace: sistema di voto nei messaggi Arrow10 Visualizzazione mi piace - Mi piace: sistema di voto nei messaggi Arrow10 Colori mi piace - Mi piace: sistema di voto nei messaggi Arrow10 "Foglio di stile CSS"


Codice:

      #rep_post .reput_vote {
      background-color: #daedfb;
      color: #666;
      -khtml-user-select: none;
      -moz-transition: all,0.15s;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-transition: all,0.15s;
      -webkit-touch-callout: none;
      -webkit-transition: all,0.15s;
      -webkit-user-select: none;
      background: #f0f0f0 url(https://cdn1.iconfinder.com/data/icons/social-media-13/24/Like-16.png) no-repeat 6px center;
      background-size: 12px;
      clear: both;
      color: #666;
      cursor: pointer;
      display: table;
      font-size: 11px;
      font-weight: 400;
      line-height: 18px;
      margin: 5px;
      padding: 3px 5px 3px 25px;
      text-align: right;
      transition: all,0.15s;
    }
    .reput_vote.zero {
      background-color: #6a6a6a;
    }
      
      
      .BS_like:hover {
      background-color: #daedfb;
      color: #666;
    }
    .BS_like {
      -khtml-user-select: none;
      -moz-transition: all,0.15s;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-transition: all,0.15s;
      -webkit-touch-callout: none;
      -webkit-transition: all,0.15s;
      -webkit-user-select: none;
      background: #f0f0f0 url(https://cdn1.iconfinder.com/data/icons/social-media-13/24/Like-16.png) no-repeat 6px center;
      background-size: 12px;
      clear: both;
      color: #666;
      cursor: pointer;
      display: table;
      font-size: 11px;
      font-weight: 400;
      line-height: 18px;
      margin: 5px;
      padding: 3px 5px 3px 25px;
      text-align: right;
      transition: all,0.15s;
      user-select: none;
    }

    .BS_like:before {
      content: "Mi piace!";
    }
      
      #rep_post .bs_inline {
      list-style: none;
    }
      
      .BS_like:hover {
      background-color: #daedfb;
      color: #666;
    }
      
      #rep_post {white-space: nowrap;margin: 6px 4px;float: right;}
    #rep_post .bs_inline {list-style: none;}
    #rep_post .bs_inline > li {display: inline-block;margin: 0 3px;}
    #rep_post .bs_inline > li:first-child {margin-left: 0;}
    #rep_post .bs_inline img {display: none;}
    #rep_post span img {cursor: pointer;}


    .reput_vote.positive {background-color: #8db13e;}
    .reput_vote.zero {background-color: #6a6a6a;}

    #rep_post .reput_vote:before {
      content: "Likes: ";
    }

Ora, bisognerà aggiungere un nuovo codice javascript. Recati nella seguente pagina:

Pannello di amministrazione mi piace - Mi piace: sistema di voto nei messaggi Arrow10 Moduli mi piace - Mi piace: sistema di voto nei messaggi Arrow10 Gestione del codice javascript


- Titolo: Quello che si vuole;

- Posizione: Gli argomenti;

- *Codice: (*Per tutte le versioni dei forum, tratte che per PunBB)

Codice:
  function bestskins_ls() {
       for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                    var count = 0,
                          qtd = 0,
                          barra = $('.vote-bar', vote)[0],
                          botao = $('.vote-button', vote)[0];                      
                    if (barra) {
                            var numbarra = barra.title.match(/\d+/g);
                            qtd = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                    }
                  
                    //Imagem de reputação
                    var reputation_UP = 'http://www.agrotube.com.br/images/seta_baixo.png';
    
                    botao = botao ? '<li><span onclick="bestskinsVoto(\'' + botao.firstChild.href + '\',this);" class="BS_like"><img src="' + reputation_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reputation_UP + '" alt="+" class="rep_up"></li>';
                    var numrep = '<li>' + (qtd == 0 ? '<span class="reput_vote zero">' + qtd + '</span>' : '<span class="reput_vote positive">' + qtd + '</span>') + '</li>';
                    var htmlFinal =
                    '<div class="rep_bar clearfix" id="rep_post">' +
                    '       <ul class="bs_inline">' + botao + numrep  + '</ul>' +
                    '</div>';
    $('.postbody', vote.parentNode.parentNode.parentNode).append( htmlFinal );
       }
       x.remove();
    };
    function bestskinsVoto(b,a) {
      a.onclick = '#';
        $.get(b, function() {
         a.parentNode.style.display = 'none';
         var verify = a.parentNode.nextSibling.firstChild.innerHTML;
         if(verify == 0) {
         a.parentNode.nextSibling.firstChild.classList.remove('zero'),
         a.parentNode.nextSibling.firstChild.classList.add('positive');
         }
         var c = a.parentNode.nextSibling.firstChild, b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
         c.innerHTML = c.innerHTML.replace(/\d+/,b);
        });
    };
    if (document.readyState ===  'complete') {
             bestskins_ls();
    } else {
           document.addEventListener('DOMContentLoaded', function() {
             bestskins_ls();
           });
    }

- *Codice: (*Per i forum che hanno come versione PunBB)

Codice:
  function bestskins_ls() {
       for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                    var count = 0,
                          qtd = 0,
                          barra = $('.vote-bar', vote)[0],
                          botao = $('.vote-button', vote)[0];                      
                    if (barra) {
                            var numbarra = barra.title.match(/\d+/g);
                            qtd = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                    }
                  
                    //Imagem de reputação
                    var reputation_UP = 'http://www.agrotube.com.br/images/seta_baixo.png';
    
                    botao = botao ? '<li><span onclick="bestskinsVoto(\'' + botao.firstChild.href + '\',this);" class="BS_like"><img src="' + reputation_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reputation_UP + '" alt="+" class="rep_up"></li>';
                    var numrep = '<li>' + (qtd == 0 ? '<span class="reput_vote zero">' + qtd + '</span>' : '<span class="reput_vote positive">' + qtd + '</span>') + '</li>';
                    var htmlFinal =
                    '<div class="rep_bar clearfix" id="rep_post">' +
                    '       <ul class="bs_inline">' + botao + numrep  + '</ul>' +
                    '</div>';
         $('.postfoot', vote.parentNode.parentNode.parentNode.parentNode).before( htmlFinal );
       }
       x.remove();
    };
    function bestskinsVoto(b,a) {
      a.onclick = '#';
        $.get(b, function() {
         a.parentNode.style.display = 'none';
         var verify = a.parentNode.nextSibling.firstChild.innerHTML;
         if(verify == 0) {
         a.parentNode.nextSibling.firstChild.classList.remove('zero'),
         a.parentNode.nextSibling.firstChild.classList.add('positive');
         }
         var c = a.parentNode.nextSibling.firstChild, b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
         c.innerHTML = c.innerHTML.replace(/\d+/,b);
        });
    };
    if (document.readyState ===  'complete') {
             bestskins_ls();
    } else {
           document.addEventListener('DOMContentLoaded', function() {
             bestskins_ls();
           });
    }

- Risultato:

mi piace - Mi piace: sistema di voto nei messaggi Scherm45 mi piace - Mi piace: sistema di voto nei messaggi Scherm46

Buona giornata!  :zen:



mi piace - Mi piace: sistema di voto nei messaggi Z_user10

mi piace - Mi piace: sistema di voto nei messaggi 1300 mi piace - Mi piace: sistema di voto nei messaggi 2203 mi piace - Mi piace: sistema di voto nei messaggi 392
MattiaDes
MattiaDes
Amministratore
Amministratore

Sesso : Maschio
Età : 23
Messaggi : 4090
Località : Modena, Italy


http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Torna in alto


 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum