Информер топовиков со вкладками

Частично рипанул с одного известного сайта этот классный информер, он включает в себя сразу 4 информера топовиков. А именно: топ пользователей по файлам(в нашем случае новости), по постам на форуме, количеству комментариев и репутации. Все эти информеры упакованы стильными вкладками, что существенно экономит место на вашем сайте.

Установка:
Для начала создаем сами информеры, переходив в ПУ > Инструменты > Информеры

Информер №1:
Пользователи · Материалы · Кол. новостей · Материалы: 10 · Колонки: 1 и в шаблон информера сохраняем код:

Код

<table> <tbody><tr> <td width="70%"><a href="$PROFILE_URL$" target="_blank">$USERNAME$</a></td> <td style="text-align: right;" width="30%">$NEWS_POSTS$</td> </tr> </tbody></table>

Запоминаем номер информера, у меня он был $MYINF_1$

Информер №2:
Пользователи · Материалы · Кол. сообщений в форуме · Материалы: 10 · Колонки: 1 в шаблон информера сохраняем код:

Код

<table> <tbody><tr> <td width="70%"><a href="$PROFILE_URL$" target="_blank">$USERNAME$</a></td> <td style="text-align: right;" width="30%">$FORUM_POSTS$</td> </tr> </tbody></table>

Запоминаем номер информера, у меня он был $MYINF_2$

Информер №3:
Пользователи · Материалы · Кол. комментариев · Материалы: 10 · Колонки: 1 в шаблон информера сохраняем код:

Код

<table> <tbody><tr> <td width="70%"><a href="$PROFILE_URL$" target="_blank">$USERNAME$</a></td> <td style="text-align: right;" width="30%">$COM_POSTS$</td> </tr> </tbody></table>

Запоминаем номер информера, у меня он был $MYINF_3$

Информер №4:
Пользователи · Материалы · Репутация · Материалы: 10 · Колонки: 1 в шаблон информера сохраняем код:

Код

<table> <tbody><tr> <td width="70%"><a href="$PROFILE_URL$" target="_blank">$USERNAME$</a></td> <td style="text-align: right;" width="30%">$REPUTATION$</td> </tr> </tbody></table>

Запоминаем номер информера, у меня он был $MYINF_4$

Включаем конструктор и создаем новый блок и в его содержимое ставим следующий код:

Код

<div class="tabs-form">
<ul class="tabs">
<li class=""><a href="#tab1">Файлы</a></li>
<li class=""><a href="#tab2">Форум</a></li>
<li class=""><a href="#tab3">Комен</a></li>
<li class=""><a href="#tab4">Репа</a></li>
</ul>
<div class="tab_container">
<div style="display: block;" id="tab1" class="tab_content">Информер №1</div>
<div style="display: none;" id="tab2" class="tab_content">Информер №2</div>
<div style="display: none;" id="tab3" class="tab_content">Информер №3</div>
<div style="display: none;" id="tab4" class="tab_content">Информер №4</div>
</div></div>
<style>
/* TOPOVIKI ========================*/
.tabs-form{height: 240px;}
.tab_content table {border-bottom: 1px dotted #6f6f6f;padding: 0 0 1px 0; margin: 0 0 2px 0;width: 100%;}
.tab_container{border-top: none; clear: both;float: left;width: 100%; }
.tab_content{border-top:1px solid #ccc; padding: 6px;font-size: 11px;}
.tab_content a{text-decoration:none;}
.tab_content a:hover{text-decoration:underline;}
table.form {margin-bottom:20px;margin-top:20px;}
table.form, table.form td {border:1px solid #ccc;}
table.form td {padding:1px;}
ul.tabs {list-style:none;margin:0;padding:0;}
ul.tabs li {float:left;padding:3px 6px;}
ul.tabs li.active {background:#e5e5e5; border-radius: 5px 5px 0px 0px;}
#tab1, #tab2,#tab3,#tab4 {display:none;}
</style>

<script type="text/javascript">
  $(document).ready(function(){
  $('.splLink').click(function(){
  $(this).parent().children('div.splCont').toggle('normal');
  return false;
  });
  });
</script>
<script type="text/javascript">

$(document).ready(function() {
  $(".tab_content").hide();
  $("ul.tabs li:first").addClass("active").show();
  $(".tab_content:first").show();

  $("ul.tabs li").click(function() {
  $("ul.tabs li").removeClass("active");
  $(this).addClass("active");
  $(".tab_content").hide();
  var activeTab = $(this).find("a").attr("href");
  $(activeTab).fadeIn();
  return false;});});</script>

Заменяем: Информер №1, Информер №2, Информер №3, Информер №4 на номера своих информеров