[Tutorial] Widget estatisticas do fórum

Autor: Angie Tuteur
Funcionalidade: Em todas as versões

Código:

<!--
DEVELOPED BY ANGE TUTEUR
NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR
ORIGIN : http://fmdesign.forumotion.com/t594-widget-member-statistics#10109
-->
 
<style type="text/css">.fa_ms_row { font-size:12px; font-family:arial, sans-serif; text-align:center; padding:10px 0; border-bottom:1px solid #CCC; }
.fa_ms_row:last-child { text-align:left; border:none; }
.fa_ms_row > span { display:inline-block; width:50%; }
.fa_ms_label { text-align:left; font-weight:bold; }
.fa_ms_value { font-size:18px; vertical-align:middle; }
#fa_ms_avatar { background:#FFF; border:1px solid #CCC; float:left; padding:2px; margin-right:6px; }
#fa_ms_avatar, #fa_ms_avatar img { width:40px; height:40px; border-radius:100%; overflow:hidden; }
#fa_ms_new_member_info { margin-top:10px; }</style>
 
<div id="fa_member_stats">
  <div class="fa_ms_row"><span class="fa_ms_label">Membros</span><span class="fa_ms_value">{FORUMCOUNTUSER}</span></div>
  <div class="fa_ms_row"><span class="fa_ms_label">Recorde Online</span><span class="fa_ms_value">{FORUMONLINEUSER}</span></div>
  <div class="fa_ms_row">
    <div id="fa_ms_avatar"><img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" /></div>
    <div id="fa_ms_new_member_info"><div class="fa_ms_nmi_row">Membro recente</div><div class="fa_ms_nmi_row">{FORUMLASTUSERLINK}</div></div>
    <div class="clear"></div>
  </div>
</div>
 
<script type="text/javascript">//<![CDATA[
// this script gets the latest member's avatar and caches it for 1 hour
(function() {
  var id = +'{FORUMLASTUSERLINK}'.replace(/.*?u=(\d+).*/, function(M, S1) { return S1 }),
      img = document.getElementById('fa_ms_avatar'),
      storage = window.localStorage,
      avatar;
 
  if (img) {
    img = img.getElementsByTagName('IMG')[0];
 
    if (storage && storage['fa_new_avatar_u' + id] && storage['fa_new_avatar_u' + id + '_exp'] > +new Date - 1*60*60*1000) {
      img.src = storage['fa_new_avatar_u' + id];
    } else {
      jQuery.get('/ajax/index.php?f=m&user_id=' + id, function(d) {
        avatar = jQuery('.tooltip-content > img', d)[0];
 
        if (avatar) {
          img.src = avatar.src;
 
          if (storage) {
            storage['fa_new_avatar_u' + id] = img.src;
            storage['fa_new_avatar_u' + id + '_exp'] = +new Date;
          }
        }
      });
    }
 
  }
}());
'par ange tuteur';
//]]></script>