Como personalizar as estatística?

• Descrição:

Olá senhores!

Gostaria de saber como personalizar as estatísticas dessa forma.

https://i.servimg.com/u/f41/17/01/37/73/sem_ta10.png

• Informações:

Código:


{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>
<br class="clear" />

<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
    <div class="inner"><span class="corners-top"><span></span></span>
        <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
            <div class="user_login_form center">
                <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
                <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
                <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
                {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
                <!-- BEGIN switch_fb_connect -->
                <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
                <!-- END switch_fb_connect -->
            </div>
        </form>
    <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->
    <div class="panel introduction">
        <div class="inner"><span class="corners-top"><span></span></span>
    <!-- BEGIN message_admin_titre -->
        <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
    <!-- END message_admin_titre -->

    <!-- BEGIN message_admin_txt -->
        <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
    <!-- END message_admin_txt -->
        <span class="corners-bottom"><span></span></span></div>
    </div>
<!-- END message_admin_index -->

{CHATBOX_TOP}
{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->

    <!-- BEGIN switch_viewonline_link -->
    <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
    <!-- END switch_viewonline_link -->

    <!-- BEGIN switch_viewonline_nolink -->
    <div class="h3">{L_WHO_IS_ONLINE}</div>
    <!-- END switch_viewonline_nolink -->

<img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
<p>{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}

<br />
{LOGGED_IN_USER_LIST}

{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

<br />
<em>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</em>

</p>
<div class="clear"></div>

    <!-- BEGIN switch_statistics_link -->
    <div class="h3"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
    <!-- END switch_statistics_link -->

    <!-- BEGIN switch_statistics_nolink -->
    <div class="h3">{L_STATISTICS}</div>
    <!-- END switch_statistics_nolink -->

<p class="page-bottom">
{TOTAL_POSTS}
</p>
<p class="page-bottom">
{TOTAL_USERS}
</p>
<p class="page-bottom">
{NEWEST_USER}
</p>
    <!-- BEGIN switch_chatbox_activate -->
    <div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
    <div class="page-bottom">
    {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
    {CHATTERS_LIST}<br />
    </div>
        <!-- BEGIN switch_chatbox_popup -->
        <div id="chatbox_popup"></div>
        <script type="text/javascript">
        insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
        </script>
        <!-- END switch_chatbox_popup -->
    <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
    <div class="inner"><span class="corners-top"><span></span></span>
        <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
            <div class="user_login_form center">
                <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
                <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
                <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
                {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
                <!-- BEGIN switch_fb_connect -->
                <span class="fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
                <!-- END switch_fb_connect -->
            </div>
        </form>
    <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_footer -->

<br style="clear:both" />

<!-- BEGIN switch_legend -->
<ul id="picture_legend">
    <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
    <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
    <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
    appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
     status: true,
     cookie: true,
     xfbml: true,
    oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Código:


<script>
jQuery(document).ready(function(){
jQuery('#main_abas').prepend(
'<ul id="navbar"><li><a class="active">Vida de Aquarista</a></li> <li><a>Estatísticas</a></li><li><a>Grupos</a></li><li><a>Créditos</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#content1').css('display', 'block');

jQuery('a', jQuery('#navbar')).click(function() {
var i = jQuery('a', jQuery('#navbar')).index(this) + 1;
jQuery(this).parents('#main_abas').children('.aba:visible').hide();
jQuery('#content' + i).show();
jQuery(this).parents('#navbar').find('a').removeClass('active');
jQuery(this).addClass('active');
})
})
</script><style>
.onlinelist {
  font-size: 12px;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  margin-top: 8px;
  padding: 8px 10px;
}
.onlinelist em {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-style: normal;
}
div.h3, div.h3 a {display: none!important;}
div#main_abas {
background: #f0f0f0 url(http://i42.servimg.com/u/f42/17/32/13/00/sp-des28.jpg) repeat-x top;
border: 1px solid #C4C4C4;
padding: 5px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
div.aba {
max-height: 200px;
overflow: auto;
padding: 15px;
border: 1px solid #444!important;
box-shadow: 0px 2px 6px grey;
border-radius: 6px;
background: #EEE;
background: -moz-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238, 238, 238, 1)), color-stop(100%,rgba(238, 238, 238, 1)));
background: -webkit-linear-gradient(top, rgba(238, 238, 238, 1) 0%,rgba(238, 238, 238, 1) 100%);
background: -o-linear-gradient(top, rgba(238, 238, 238, 1) 0%,rgba(238, 238, 238, 1) 100%);
background: -ms-linear-gradient(top, rgba(238, 238, 238, 1) 0%,rgba(238, 238, 238, 1) 100%);
background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%,rgba(238, 238, 238, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}
#navbar {
   font:bold 12px Georgia, "Times New Roman", Times, serif;
   margin:0;
   padding:3px 0;

   }
#navbar li {
   list-style:none;
   margin-right:6px;
   display:inline;
   }
#navbar li a {
-moz-text-shadow: 1px 1px 1px #fff;
-webkit-text-shadow: 1px 1px 1px #fff;
background: #E9E9E9 url(http://i42.servimg.com/u/f42/17/32/13/00/botao10.jpg) -1px 0px;
border-bottom: 1px solid #F3F5F7;
border-left: 1px solid #EEE;
border-right: 1px solid #AAA;
display: block;
font-size: 12px;
font-weight: 700;
padding: 7px 0;
text-align: center;
text-decoration: none;
width: 170px;
color: #636363;
   }
#navbar li a.active {background: #D0E1F7 url(http://i42.servimg.com/u/f42/17/32/13/00/ative10.jpg) repeat-x bottom;
border-bottom: 1px solid white;
color: #222;}

#navbar li a {
display:inline-block;
}
</style>


Código:


jQuery(document).ready(function(){
  $(".forabg + .linklist").after('
<div id="main_abas"><div id="content1" class="aba">
</div><div id="content2" class="aba">
</div><div id="content3" class="aba">
</div><div id="content4" class="aba">
</div>
</div>
');
  $("#i_whosonline + p").appendTo("#content1.aba");
  $("p + .clear + .h3, p.page-bottom + .h3, p.page-bottom").appendTo("#content2.aba");
  $("em").appendTo("#content3.aba");
  $('#content4.aba').append('
<center><strong>Código desenvolvido por Daemon - BestSkins');
  $("#i_whosonline + p").addClass('onlinelist');
});


Código:


<script>
jQuery(document).ready(function(){
jQuery('#main_abas').prepend(
'<ul id="navbar"><li><a class="active">Vida de Aquarista</a></li> <li><a>Estatísticas</a></li><li><a>Grupos</a></li><li><a>Créditos</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#content1').css('display', 'block');

jQuery('a', jQuery('#navbar')).click(function() {
var i = jQuery('a', jQuery('#navbar')).index(this) + 1;
jQuery(this).parents('#main_abas').children('.aba:visible').hide();
jQuery('#content' + i).show();
jQuery(this).parents('#navbar').find('a').removeClass('active');
jQuery(this).addClass('active');
})
})
</script><style>
.onlinelist {
  font-size: 12px;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  margin-top: 8px;
  padding: 8px 10px;
}
.onlinelist em {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-style: normal;
}
div.h3, div.h3 a {display: none!important;}
div#main_abas {
background: #f0f0f0 url(http://i42.servimg.com/u/f42/17/32/13/00/sp-des28.jpg) repeat-x top;
border: 1px solid #C4C4C4;
padding: 5px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
div.aba {
max-height: auto;
overflow: auto;
padding: 15px;
border: 1px solid #444!important;
box-shadow: 0px 2px 6px grey;
border-radius: 6px;
background: #EEE;
background: -moz-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238, 238, 238, 1)), color-stop(100%,rgba(238, 238, 238, 1)));
background: -webkit-linear-gradient(top, rgba(238, 238, 238, 1) 0%,rgba(238, 238, 238, 1) 100%);
background: -o-linear-gradient(top, rgba(238, 238, 238, 1) 0%,rgba(238, 238, 238, 1) 100%);
background: -ms-linear-gradient(top, rgba(238, 238, 238, 1) 0%,rgba(238, 238, 238, 1) 100%);
background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%,rgba(238, 238, 238, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}
#navbar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navbar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navbar li a {
-moz-text-shadow: 1px 1px 1px #fff;
-webkit-text-shadow: 1px 1px 1px #fff;
background: #E9E9E9 url(http://i42.servimg.com/u/f42/17/32/13/00/botao10.jpg) -1px 0px;
border-bottom: 1px solid #F3F5F7;
border-left: 1px solid #EEE;
border-right: 1px solid #AAA;
display: block;
font-size: 12px;
font-weight: 700;
padding: 7px 0;
text-align: center;
text-decoration: none;
width: 170px;
color: #636363;
  }
#navbar li a.active {background: #D0E1F7 url(http://i42.servimg.com/u/f42/17/32/13/00/ative10.jpg) repeat-x bottom;
border-bottom: 1px solid white;
color: #222;}

#navbar li a {
display:inline-block;
}
</style>


Código:


jQuery(function(){
jQuery('#content1 p:eq(0)').prepend("<img src='https://lh6.googleusercontent.com/-riwlz_XN1Kc/T2CreB6FYDI/AAAAAAABKls/HlePPh1HW0w/s800/11' />");
});